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
2. ⚙️ Tech Stack
3. 🔋 Features
4. 🤸 Quick Start
5. 🕸️ Code to Copy
6. 🔗 Assets
7. 🚀 More

🤖 Introducing

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. 🚀

⚙️ Tech Stack

• 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.

🤸 Quick Start

Follow these steps to set up the project locally on your machine.

Prerequisites

Make sure you have the following installed on your machine:

• Git
• Node.js
• Bun (Bun Package Manager)

Cloning the Repository

git clone https://github.com/Divyajyoti1820/portfolio-production-saas.git
cd portfolio-production-saas

Installation

Install the project dependencies using npm:

bun install

Running the Project

bun run dev

Open http://localhost:3000 in your browser to view the project.

🕸️ Snippets

.env.local

AUTH_SECRET=

NEXT_PUBLIC_APP_URL=


AUTH_GITHUB_ID=
AUTH_GITHUB_SECRET=


DATABASE_URL=

📷 Snapshots

🚀 Future Update

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. 🚀

📕 Reference Docs

• Node.js
• Bun (Bun Package Manager)
• Tailwind CSS
• Auth.js
• Drizzle ORM
• ShadCn
• Hono
• Tanstack Query
• Jotai