Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/techysphinx/saver

a cutting-edge Project Management Software as a Service (BaaS) that empowers teams to collaborate seamlessly. This innovative platform features creative Kanban boards for visual project tracking, streamlined task management, and secure payment processing.
https://github.com/techysphinx/saver

aws-s3 clerk neondb nextjs prisma stripe-payments uploadthing website-design

Last synced: 15 days ago
JSON representation

a cutting-edge Project Management Software as a Service (BaaS) that empowers teams to collaborate seamlessly. This innovative platform features creative Kanban boards for visual project tracking, streamlined task management, and secure payment processing.

Awesome Lists containing this project

README

        

# 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](https://github.com/techySPHINX/Saver/blob/main/LICENSE).

## Link to Tools



Next.js


Tailwind CSS


Prisma


Neon DB


Clerk Authentication


AWS S3


UploadThing


Stripe


Visual Studio Code


Windows 11