A premium, real-time project management platform designed to organize workspaces, track project timelines, manage tasks, collaborate on threads, and view interactive workload analytics.
Zynero is a professional SaaS-grade project management application. It bridges the gap between high-level project roadmap metrics and granular task progress. Built with a responsive dark-mode dashboard shell and glassmorphic elements, it solves team productivity fragmentation by offering real-time task allocation, interactive discussion threads, and visual analytics charts.
- Workspace & Project Roadmaps: Create workspaces, structure projects, and define statuses, priority ranks, and timelines.
- Granular Task System: Break down projects into component tasks, assign them to team members, set due dates, and track completion states.
- Workload & Trend Analytics: Monitor team workload distribution, task type breakups, and weekly completion velocities using responsive Chart.js analytics.
- Interactive Comments: Communicate in real-time on task discussion threads to keep team logs clean and centralized.
- Secure Path Protection: Clerk-integrated middleware restricting access to private dashboard folders while allowing public landing page discovery.
- Public Contact Form: Seamless corporate contact support featuring sliding animations and automatic simulated validation logs.
| Component | Technology | Description |
|---|---|---|
| Framework | Next.js 15.1.0 (App Router) | React framework supporting server component rendering and optimized route loading. |
| Language | TypeScript 5.5.2 | Strongly typed code structure for frontend components, API endpoints, and controllers. |
| Styling | Tailwind CSS v4.0 | Modern utility framework with custom global CSS variables and responsive glassmorphic cards. |
| Authentication | Clerk | Secure login, registration, user profiles, and session management. |
| State Management | Redux Toolkit | Centralized client-side state machine caching workspace, project, and user selections. |
| Database & ORM | Prisma ORM + PostgreSQL | Relational modeling, migrations, and database operations using PostgreSQL (Neon). |
| Queue / Workers | Inngest | Asynchronous event pipelines syncing Clerk registration webhooks to database profiles. |
| Transitions | Framer Motion | Smooth slide-up page transitions across routes via a template wrapper. |
| Charts | Chart.js & react-chartjs-2 | Visual dashboard metrics mapping status, type, trend, and member workload distributions. |
project-management/
├── prisma/ # Database schema modeling and migration logs
│ └── schema.prisma # Prisma schema containing User, Workspace, Project, Task, and Comment models
├── public/ # Static assets (icons, images, logos)
└── src/
├── app/ # Next.js App Router folders (pages, templates, routing)
│ ├── api/ # API routes (Inngest webhook listener endpoints)
│ ├── contact/ # Public Contact Us page and Client components
│ ├── projects/ # Workspace Projects overview page
│ ├── projectsDetail/ # Dedicated project view (Analytics, Tasks list, Settings tabs)
│ ├── team/ # Workspace Team membership list page
│ ├── settings/ # Workspace configurations page
│ ├── taskDetails/ # Dedicated Task discussion and description detail pages
│ ├── globals.css # Core style definitions and Tailwind CSS directives
│ ├── layout.tsx # Root layout configuring Google fonts and providers
│ ├── middleware.ts # Clerk routing configuration protecting private routes
│ └── template.tsx # Framer Motion page transition wrapper
├── assets/ # SVG vectors and graphic icons
├── components/ # Reusable React components (Sidebar, LayoutShell, StatsGrid, Skeletons)
├── controllers/ # Backend database controller handlers verifying admin/assignee rules
├── features/ # Redux store state slices (user, workspace, project, task slices)
├── inngest/ # Inngest event definitions and user sync functions
└── lib/ # Shared database clients, utilities, and helper scripts- Node.js (v20+ recommended)
- npm or equivalent package manager
- A running PostgreSQL database (e.g. Neon, Supabase)
- A Clerk account for authentication keys
-
Clone the repository:
git clone https://github.com/Pranjal-Sahu21/project-management.git cd project-management -
Install dependencies:
npm install
-
Configure environment variables: Create a
.envfile in the root directory and define the values as listed in the Configuration section. -
Sync Database Schema & Generate Prisma Client: Push the schema model to your PostgreSQL database:
npx prisma db push
-
Run the development server:
npm run dev
Open http://localhost:3000 in your browser to view the application.
- Public Access: View the landing page and submit inquiries via the public Contact Us page.
- Authentication: Register or log in to create or join a workspace.
- Create Workspace: Set up a custom workspace profile.
- Project Management: Admins can create new projects and define timelines. Team members can view project analytics and settings.
- Task Allocation: Assign tasks, update statuses (To Do, In Progress, Done), and comment on tasks. Non-admin users are restricted to modifying status on tasks they are assigned to.
- Analytics Dashboard: Check status ratios, type counts, task trends, and member workload distributions in the Analytics tab.
The application requires the following environment variables to run. Create a .env file in the root folder with this structure:
| Name | Type | Description |
|---|---|---|
DATABASE_URL |
String | Connection string for your PostgreSQL database (include SSL mode if using Neon). |
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY |
String | Public key retrieved from the Clerk Developer Dashboard. |
CLERK_SECRET_KEY |
String | Secret key retrieved from the Clerk Developer Dashboard. |
CLERK_WEBHOOK_SECRET |
String | Webhook signing secret used to verify Clerk event payloads sent to /api/inngest. |
INNGEST_EVENT_KEY |
String | Event sending key obtained from the Inngest Cloud Console. |
INNGEST_SIGNING_KEY |
String | Inngest signing secret key used to verify job handshakes. |
NEXT_PUBLIC_CLERK_SIGN_IN_URL |
String | Path to redirects on login requests (e.g. /sign-in). |
NEXT_PUBLIC_CLERK_SIGN_UP_URL |
String | Path to redirects on registration requests (e.g. /sign-up). |
DATABASE_URL="postgresql://username:password@hostname:port/database?sslmode=require"
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY="pk_test_..."
CLERK_SECRET_KEY="sk_test_..."
CLERK_WEBHOOK_SECRET="whsec_..."
INNGEST_EVENT_KEY="..."
INNGEST_SIGNING_KEY="..."
NODE_ENV="development"
NEXT_PUBLIC_CLERK_SIGN_IN_URL="/sign-in"
NEXT_PUBLIC_CLERK_SIGN_UP_URL="/sign-up"| Script | Command | Description |
|---|---|---|
npm run dev |
next dev |
Starts the Next.js local development server with hot-reloading. |
npm run build |
prisma generate && next build |
Compiles the database Prisma client schema model and builds the Next.js production build package. |
npm run start |
next start |
Starts the compiled production server in your deployment environment. |
npm run lint |
next lint |
Executes ESLint to check for code formatting and rule violations. |
Zynero follows a robust architectural flow combining server-side database handlers, global client-side slices, and asynchronous worker queues:
- Authentication & Profile Sync: When a user registers via Clerk, Clerk emits a webhook which is processed by the Inngest worker queue. Inngest executes a sync handler, creating a matching profile inside the PostgreSQL database via Prisma.
- Clerk Middleware: Filters all incoming Next.js requests. Public paths (
/,/contact,/sitemap.xml,/robots.txt) bypass middleware checks, while private routes trigger a sign-in redirect. - State Sync (Redux): Global workspaces, selected projects, and active tasks are cached in Redux Toolkit on the client side, ensuring components render instantly during route switches.
- Controller Level: Standard operations (project/task details creation or modification) pass through backend controllers verify user identity and check workspace membership role status (
ADMINvsMEMBER) before issuing Prisma commits.
Zynero is optimized for deployment on the Vercel platform.
- Create a new project on Vercel and import your GitHub repository.
- In the project Environment Variables settings, add all the keys listed in the Configuration section.
- Configure the Vercel Build Command:
(This is configured to run
npm run build
prisma generate && next buildautomatically, ensuring Vercel compiles the schema client before generating static pages). - Click Deploy. Vercel will host your site and configure automatic SSL certificates.