Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/divyajyoti1820/portfolio-production-saas
Productivity SaaS helps manage projects with up to 5 boards, multiple columns, and movable tasks. Built with Next.js, TypeScript, and other modern web technologies, it demonstrates my expertise in creating end-to-end SaaS solutions. 🚀
https://github.com/divyajyoti1820/portfolio-production-saas
authjs drizzle-orm honojs jotai neondb next-auth nextjs14 reactjs tanstack-react-query tawilwindcss typescript
Last synced: 19 days ago
JSON representation
Productivity SaaS helps manage projects with up to 5 boards, multiple columns, and movable tasks. Built with Next.js, TypeScript, and other modern web technologies, it demonstrates my expertise in creating end-to-end SaaS solutions. 🚀
- Host: GitHub
- URL: https://github.com/divyajyoti1820/portfolio-production-saas
- Owner: Divyajyoti1820
- License: mit
- Created: 2024-09-21T15:48:40.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2024-12-19T13:49:45.000Z (20 days ago)
- Last Synced: 2024-12-19T14:45:41.750Z (20 days ago)
- Topics: authjs, drizzle-orm, honojs, jotai, neondb, next-auth, nextjs14, reactjs, tanstack-react-query, tawilwindcss, typescript
- Language: TypeScript
- Homepage: https://portfolio-production-saas.vercel.app
- Size: 816 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Productivity | Software as a Service
Productivity Software as a Service is an all-encompassing productivity tool. Users can register and log in via Auth.js, create up to 5 project boards, and manage tasks and subtasks within columns representing different stages of their projects. Developed with Next.js and TypeScript, it leverages NeonDB, Drizzle ORM, and Honojs for seamless backend integration and high performance. This project showcases my expertise in building complete SaaS solutions with a strong focus on quality and efficiency.
## 📋 Table of Contents
1. 🤖 [Introduction](#introduction)
2. ⚙️ [Tech Stack](#tech-stack)
3. 🔋 [Features](#features)
4. 🤸 [Quick Start](#quick-start)
5. 🕸️ [Code to Copy](#snippets)
6. 🔗 [Assets](#links)
7. 🚀 [More](#more)
A comprehensive tool designed to streamline project management. With Auth.js for user authentication, users can create up to 5 project boards, each featuring multiple columns for various project stages. Tasks, complete with titles, descriptions, and subtasks, can be effortlessly moved between columns. Built using Next.js and TypeScript, this project leverages NeonDB, Drizzle ORM, Honojs, TanStack Query for quality backend services and Jotai for simple state management. This tool exemplifies my expertise in developing end-to-end SaaS solutions with cutting-edge web technologies. 🚀
- Next.js
- Typescript
- ShadCn
- Tailwind CSS
- Neon DB
- Drizzle ORM
- Hono.js
- Tanstack Query
- Jotai
- Auth.js
- Bun
## 🔋 Features
👉 **Robust Authentication System**: Secure user login and registration implemented via Auth.js, & ensuring safe and efficient access to the application.
👉 **Project Boards**: Create and manage up to 5 distinct project boards, allowing for structured organization of various projects.
👉 **Column Management**: Define project stages with customizable columns, providing a clear visual representation of the workflow.
👉 **Task Management**: Create detailed tasks with titles and descriptions, assign them to specific columns, and track their progress.
👉 **Subtasks**: Break down tasks into smaller, manageable subtasks to ensure every detail is accounted for and trackable.
👉 **Versatile Forms**: Implement versatile forms that efficiently handle both the creation and updating of tasks and subtasks, ensuring a seamless user experience.
👉 **Real-Time Data Fetching**: Utilize TanStack Query for efficient querying and mutating of the database, ensuring real-time data accuracy.
👉 **State Management**: Leverage Jotai for sophisticated state management, offering a responsive and interactive user experience.
👉 **Reusable UI Components**: Employ ShadCN for developing reusable and consistent UI components, maintaining a cohesive design throughout the application.
👉 **Backend Integration**: Powerful backend APIs built with Hono.js, ensuring a typesafe and robust backend infrastructure.
👉 **Efficient Package Management**: Use Bun as the primary package manager for fast and efficient dependency management.
👉 **Database Interaction**: NeonDB as PostgreSQL database managed through Drizzle ORM, providing reliable and efficient data handling.
Follow these steps to set up the project locally on your machine.
**Prerequisites**
Make sure you have the following installed on your machine:
- [Git](https://git-scm.com/)
- [Node.js](https://nodejs.org/en)
- [Bun](https://bun.sh/docs/installation) (Bun Package Manager)
**Cloning the Repository**
```bash
git clone https://github.com/Divyajyoti1820/portfolio-production-saas.git
cd portfolio-production-saas
```
**Installation**
Install the project dependencies using npm:
```bash
bun install
```
**Running the Project**
```bash
bun run dev
```
Open [http://localhost:3000](http://localhost:3000) in your browser to view the project.
## 🕸️ Snippets
.env.local
```.env
AUTH_SECRET=
NEXT_PUBLIC_APP_URL=
AUTH_GITHUB_ID=
AUTH_GITHUB_SECRET=
DATABASE_URL=
```
## 📷 Snapshots
**Drag-Drop & Reorder Functionality**
In the next update, users will be able to drag and drop tasks between columns and reorder them, further enhancing the dynamic project management experience.
**Subscription Model with Payment Interface**
The implementation of a subscription model will allow users to access premium features. A seamless payment interface will be integrated, ensuring a smooth and secure transaction process for users opting for enhanced functionalities.
**Color Picker for Task Customization**
A color picker will be introduced, enabling users to select and customize colors for their tasks. This will provide a personalized experience and allow for better visual organization of tasks.
This feature set underscores the comprehensive functionality and technical prowess embedded in Productivity Software as a Service, demonstrating expertise in modern web development. 🚀
- [Node.js](https://nodejs.org/en)
- [Bun](https://bun.sh/docs/installation) (Bun Package Manager)
- [Tailwind CSS](https://tailwindcss.com/docs/installation)
- [Auth.js](https://authjs.dev/getting-started)
- [Drizzle ORM](https://orm.drizzle.team/docs/overview)
- [ShadCn](https://ui.shadcn.com/docs)
- [Hono](https://hono.dev/docs/)
- [Tanstack Query](https://tanstack.com/query/latest/docs/framework/react/guides/advanced-ssr#advanced-server-rendering)
- [Jotai](https://jotai.org/docs/introduction)