A modern Next.js CRM application built for advanced customer relationship management, sales pipeline tracking, and team collaboration. This system demonstrates enterprise-grade architecture with modern web technologies optimized for performance and user experience.
- Frontend: Next.js 16, React 19, TypeScript, Tailwind CSS
- Backend: Node.js, Next.js API Routes
- Database: PostgreSQL with Prisma ORM
- Authentication: NextAuth.js with role-based access
- UI: shadcn/ui components with modern blue/white design
- Deployment: Ready for Vercel
- Customer Management: Add, edit, delete contacts with detailed profiles
- Sales Pipeline: Visual deal tracking through customizable stages
- Task Management: Assign and track team tasks with deadlines
- Analytics Dashboard: Real-time metrics and performance charts
- Team Collaboration: Multi-user support with role-based permissions
- Professional Theme: Clean blue/white modern design (Updated from cyberpunk)
- Responsive Design: Mobile-first approach for all devices
- Interactive Components: Smooth animations and transitions
- Form Modals: Add Contact, Deal, Task with beautiful forms
- Real-time Updates: Instant feedback for all actions
- Node.js 18+ installed
- PostgreSQL database (local or cloud)
- npm or yarn package manager
- Clone the repository
git clone https://github.com/EduLinkUp/crm-platform.git
cd crm-platform- Install dependencies
npm install- Set up environment variables
cp .env.example .env.localEdit .env.local with your database credentials.
- Run the development server
npm run devThe application will be available at http://localhost:3000
- Email: [email protected]
- Password: password123
├── src/
│ ├── app/ # Next.js App Router pages
│ │ ├── login/ # Authentication pages
│ │ ├── signup/
│ │ ├── dashboard/ # Main dashboard with working buttons
│ │ ├── contacts/ # Contact management
│ │ ├── deals/ # Sales pipeline
│ │ ├── tasks/ # Task management
│ │ └── analytics/ # Reports and charts
│ ├── components/ # Reusable React components
│ │ ├── ui/ # shadcn/ui components
│ │ ├── crm/ # CRM-specific components
│ │ ├── add-item-modal.tsx # Modal for adding contacts/deals/tasks
│ │ └── dashboard-client.tsx # Interactive dashboard
│ ├── lib/ # Utility functions
│ │ ├── auth.ts # Authentication config
│ │ ├── prisma.ts # Database client
│ │ └── utils.ts # Helper functions
│ └── types/ # TypeScript type definitions
├── crm/ # Complete CRM copy for submission
├── prisma/ # Database schema
├── public/ # Static assets
└── package.json # Project dependencies
Dynamic modal component with forms for:
- Contacts: Name, email, phone, company, status
- Deals: Title, company, value, stage, close date
- Tasks: Title, description, priority, due date, assignee
Interactive dashboard featuring:
- Real-time statistics cards
- Recent activities feed
- Top customers grid
- Working Add Contact/Deal/Task buttons
- localStorage data persistence
- NextAuth.js with credentials provider
- In-memory user storage for demo
- Protected routes with middleware
- Black background with yellow neon colors
- Dark aesthetic with glow effects
- Hard to read for professional use
- Clean white background with blue accents
- Professional business appearance
- Better accessibility and readability
- Industry-standard CRM interface
npm i -g vercel
vercel- Fork the repository
- Create a feature branch
- Commit changes
- Push to branch
- Open a Pull Request
This project is licensed under the MIT License.
EduLinkUp - Building educational technology solutions
Project Link: https://github.com/EduLinkUp/crm-platform
- Next.js Team
- shadcn/ui
- Tailwind CSS
- Prisma
- NextAuth.js