A modern collaborative project management platform built with Next.js, featuring real-time communication, Kanban-style task management, and team collaboration tools.
- Create, view, and delete projects
- Project dashboard with search and filtering
- Project member management (add/remove team members)
- Kanban board with drag-and-drop functionality
- Three columns: To Do, In Progress, Done
- Create, view, and update task status
- Task details view
- Real-time chat with Socket.io
- Instant message delivery
- File sharing and uploads
- Live updates across all connected clients
- JWT-based authentication
- Protected routes with middleware
- Session management with cookies
| Category | Technology |
|---|---|
| Framework | Next.js 16 (App Router) |
| Language | TypeScript |
| Styling | Tailwind CSS + DaisyUI |
| State Management | Zustand |
| Server State | TanStack React Query |
| Real-time | Socket.io Client |
| Forms | React Hook Form |
| Validation | Zod |
| Icons | Lucide React |
| Drag & Drop | @hello-pangea/dnd |
work_nest/
├── app/ # Next.js App Router
│ ├── (auth)/ # Auth routes (login, register)
│ │ ├── login/
│ │ └── register/
│ ├── dashboard/ # Protected dashboard routes
│ │ ├── project/
│ │ │ └── [projectId]/
│ │ └── settings/
│ ├── globals.css
│ ├── layout.tsx
│ └── page.tsx
├── components/ # React components
│ ├── auth/ # Auth guards
│ ├── file/ # File management
│ ├── project/ # Project-related components
│ ├── skeleton/ # Loading skeletons
│ ├── socketProvider/ # Socket context
│ └── task/ # Task management
├── hooks/ # Custom React hooks
│ ├── useAuth.ts
│ ├── useChatSocket.ts
│ ├── useProject.ts
│ ├── useProjectSocket.ts
│ └── useUser.ts
├── lib/ # Libraries & utilities
│ ├── api.ts
│ ├── auth.ts
│ ├── axiosInstance.ts
│ ├── env.ts
│ └── socket.ts
├── services/ # API services
│ ├── auth.service.ts
│ ├── file.service.ts
│ ├── message.service.ts
│ ├── project.service.ts
│ ├── task.service.ts
│ └── user.service.ts
├── store/ # Zustand stores
│ └── useAuthStore.ts
├── types/ # TypeScript types
│ └── index.ts
└── utils/ # Utility functions
├── fonts.ts
├── formatData.ts
└── helpers.ts
Create a .env.local file in the root directory:
NEXT_PUBLIC_API_URL=http://localhost:5050
NEXT_PUBLIC_SOCKET_URL=http://localhost:5050
NODE_ENV=development- Node.js 18.x or higher
- npm, yarn, pnpm, or bun
# Clone the repository
git clone <repository-url>
# Navigate to the project directory
cd work_nest
# Install dependencies
npm install
# or
yarn install
# or
pnpm install
# or
bun install# Start the development server
npm run dev
# Open http://localhost:3000 in your browser# Build for production
npm run build
# Start production server
npm run startThe frontend expects a backend API running at http://localhost:5050 (or your configured API URL). The API should provide the following endpoints:
POST /auth/login- User loginPOST /auth/register- User registrationGET /auth/me- Get current user
GET /project- Get user's projectsPOST /project- Create new projectGET /project/:id- Get project detailsDELETE /project/:id- Delete projectGET /project/:id/members- Get project membersPOST /project/add-member- Add member to projectPOST /project/remove-member- Remove member from project
GET /tasks/:projectId- Get project tasksPOST /tasks- Create new taskPATCH /tasks/:taskId- Update task statusDELETE /tasks/:taskId- Delete task
GET /message/:projectId- Get chat historyPOST /message- Send message
GET /file/:projectId- Get project filesPOST /file/upload- Upload fileDELETE /file/:fileId- Delete file
The primary color is configured in the Tailwind CSS. Update app/globals.css to customize the theme.
- Create API service in
services/ - Add types in
types/index.ts - Create components in
components/ - Add custom hooks in
hooks/if needed - Integrate with React Query in pages
This project is private and proprietary.
Built with ❤️ By Simon Adama using Next.js and modern web technologies.