Saver: SaaS Project Management Platform

Project Overview

Saver is a Multivendor B2B2B SaaS platform built to empower digital marketing agencies and e-commerce businesses by streamlining project management through Kanban boards, website generation, and robust role-based access control. Saver allows agencies to manage sub-accounts, track projects, create and manage e-commerce solutions, and integrate Stripe for subscription payments.

Objectives

• Provide a user-friendly, scalable project management solution for agencies.
• Offer a Kanban board for tracking project progress.
• Enable agencies to manage multiple sub-accounts with role-based access.
• Support secure, flexible subscription and payment handling through Stripe.
• Allow agencies to create and deploy custom websites for clients.
• Enhance productivity through customizable dashboards and media management features.

Key Features

• Kanban Boards: Visualize and manage tasks in an intuitive drag-and-drop interface.
• Sub-account Management: Allow agencies to create and manage sub-accounts for multiple clients.
• Website Generation: A Figma-inspired editor to build and deploy websites directly within the platform.
• Role-Based Access: Define permissions for different users to ensure secure data handling.
• Stripe Payment Integration: Streamline agency payments and subscriptions with built-in Stripe support.
• Unlimited Funnel Hosting for paid users: Host an endless number of sales funnels without any restrictions for paid users.
• Custom Dashboards: Personalize dashboards to display key metrics and insights tailored to your needs.
• Media Storage: Store and manage all your media files securely in one place.
• Integrated Project Management System: Organize projects and track progress within the platform.
• Agency & Sub-Account Metrics: Get comprehensive reports on the performance of agencies and their sub-accounts.

Technology Stack

• Frontend: Next.js 14 for a responsive and dynamic user experience. Used TailwindCSS and ShadCN UI library to improve the look and user experience of the website platform.
• Backend: Prisma and Neon DB for data management and ORM. Used Clerk Authentication for managing users across the platform.
• Storage: AWS S3 for secure storage of files and assets. UploadThing was used to integrate file uploading, handling and saving to database.
• Payment Integration: Stripe API for seamless subscription and e-commerce payments.
• Software Tools: Visual Studio Code was the main IDE that we used for the project. We tested our application on Windows 11 Operating System

Challenges and Solutions

• Multi-client Management: Implemented structured sub-accounts with customizable access to streamline client management.
• Payment and Subscription Processing: Utilized Stripe’s flexible API for secure payment processing.
• Customization Needs: Integrated a Kanban board and dashboard customization to provide flexible options for agencies.

User Roles and Permissions

• Agency Owner: Complete control over the agency, sub-accounts, and billing.
• Sub-Account User: Access to sub-account features, project creation, and task management.
• Guest: View-only access to specific projects.

Future Enhancements

• Mobile App Version: Create a mobile version for easy access on the go.
• Advanced Analytics: Add analytics to help agencies track project performance.
• Integration with Popular Tools: Potential integrations with Slack, Trello, and other productivity tools.
• Pre-Built Templates: Offer customizable templates to quickly set up projects and workflows.
• AI Automation: AI integration to automate workflows and user funnels to generate new valuable leads.

Running the Project

To fork and run this project locally, please follow the steps below:

1. Install Dependencies

• Navigate to the project directory:

cd repo-name

• Run the following command to install the necessary dependencies:

npm install

2. Set Up Environment Variables

• Create a .env file in the root directory of the project by copying the provided .env.example:

cp .env.example .env

You will need to create accounts in the services mentioned in the .env.example file and fill in the required keys and credentials. Here’s a brief overview of the variables you need to configure:

• Clerk: Used for authentication. Set your NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY and CLERK_SECRET_KEY.
• Database: Set your DB_USERNAME, DB_PASSWORD, and configure the DATABASE_URL for your PostgreSQL database.
• UploadThing: Set your UPLOADTHING_SECRET and UPLOADTHING_APP_ID.
• Stripe: Set your Stripe keys such as NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY and STRIPE_SECRET_KEY.

3. Run the Development Server

• Start the development server using:

npm run dev

The server will start at http://localhost:3000.

4. Access Prisma

• If you need to run Prisma, ensure you have the Prisma CLI installed and use the following command to access the Prisma studio:

npx prisma studio

This will usually run at http://localhost:5555 (or another port if specified in your Prisma configuration).

Notes

• Ensure that your PostgreSQL server is running and accessible, and that you have created the necessary database specified in your DATABASE_URL.
• For any additional setup or configuration, refer to the documentation of the respective services you are using.
• To see all the Shadcn UI components integrated into the project. Click here

License

This project is licensed. You may view the license details here.

Link to Tools