A sleek, feature-rich project management application built with Next.js 15, featuring organization-based project management, sprint planning, and intuitive issue tracking with a beautiful, animated UI.
- Multi-organization support with role-based access control
- Admin-only permissions for sensitive operations
- Secure project creation and deletion
- Create, start, and complete sprints with date ranges
- Visual sprint status management (Planned, Active, Completed)
- Sprint-based issue organization
- Drag-and-drop issue management across statuses
- Visual project tracking with multiple status columns
- Real-time updates and smooth animations
- Rich issue management with priorities (Low, Medium, High, Urgent)
- Assignee and reporter tracking
- Markdown support for detailed descriptions
- Issue linking to projects and sprints
- Beautiful, animated components with Framer Motion
- Dark/Light theme support
- Responsive design for all devices
- Interactive 3D elements with Spline
- Smooth loading states and feedback
- Clerk-powered authentication
- Role-based access control
- Secure API endpoints
- Protected routes and middleware
- Next.js 15 - React framework with App Router
- Tailwind CSS 4 - Utility-first CSS framework
- Framer Motion - Animation library
- Aceternity UI + ShadCn - Accessible component primitives
- Lucide React - Icon library
- Prisma - Database ORM
- NeonDB with PostgreSQL - Primary database
- Next.js Server actions - Backend
- Clerk - Authentication and user management
- @hello-pangea/dnd - Drag and drop functionality
- React Hook Form - Form management
- Zod - Schema validation
- Sonner - Toast notifications
- Vaul - Drawer components
- Date-fns - Date manipulation
- React Day Picker - Date picker component
- Node.js
- NeonDB PostgreSQL database
- Clerk account for authentication
-
Clone the repository
git clone https://github.com/Async-NickL/Prism.git cd prism -
Install dependencies
npm install
-
Environment Setup Create a
.env.localfile in the root directory:# Database (Neon DB) DATABASE_URL="postgresql://username:password@ep-xxx-xxx-xxx.region.aws.neon.tech/database_name?sslmode=require" # Clerk Authentication NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key CLERK_SECRET_KEY=your_clerk_secret_key # Next.js NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/ NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/
-
Database Setup
# Generate Prisma client npx prisma generate # For development (pushes schema changes directly) npx prisma db push # For production (applies migrations) npx prisma migrate deploy
-
Start Development Server
npm run dev
-
Open your browser Navigate to http://localhost:3000
prism/
├── app/ # Next.js App Router
│ ├── (auth)/ # Authentication routes
│ ├── (Home)/ # Landing page components
│ ├── (main)/ # Main application routes
│ │ ├── organization/ # Organization management
│ │ └── project/ # Project and issue management
│ └── layout.js # Root layout
├── components/ # Reusable UI components
│ ├── ui/ # Base UI components
│ └── ... # Feature-specific components
├── lib/ # Utility functions and configurations
├── prisma/ # Database schema and migrations
├── actions/ # Server actions
└── hooks/ # Custom React hooks
- Secure multi-tenant system
- Admin-only project management
- Role-based permissions
- Visual sprint board
- Date range planning
- Status tracking (Planned → Active → Completed)
- Priority levels (Low, Medium, High, Urgent)
- Status workflow (Todo → In Progress → In Review → Done)
- Assignee and reporter tracking
- Rich markdown descriptions
- Animated transitions and micro-interactions
- Responsive design patterns
- Accessibility-first approach
- Dark/Light theme support
A huge thank you to Roadside Coder for the incredible inspiration and guidance that helped bring this project to life. Your YouTube channel has been an invaluable resource for learning modern web development techniques and best practices.
**Built with ❤️ using Next.js