A full-stack task management application built with Next.js, Express.js, and MongoDB.
- Frontend: https://commu-sync-assessment.vercel.app/
- Backend API: https://commusync-api.onrender.com
- Frontend: Next.js 14 (App Router), React, TypeScript, TailwindCSS
- Backend: Node.js, Express.js, TypeScript
- Database: MongoDB with Mongoose ODM
The requirement specified both Next.js and Node.js + Express as separate technologies. Rather than using Next.js API routes, I chose a monorepo structure with separate client and server applications. This clearly demonstrates:
- RESTful API design with Express
- Frontend-backend separation of concerns
- CORS configuration between services
- Independent deployment capability
Mongoose provides:
- Schema validation at the database level
- TypeScript integration via interfaces
- Middleware hooks for timestamps
- Query building convenience
Validation happens at three levels:
- Frontend: Immediate user feedback via form validation
- API Middleware: Request validation before reaching controllers
- Mongoose Schema: Database-level constraints as safety net
├── client/ # Next.js frontend
│ ├── app/ # App Router pages
│ │ ├── layout.tsx # Root layout with fonts
│ │ ├── page.tsx # Home page with state management
│ │ └── globals.css # Tailwind imports
│ ├── components/ # React components
│ │ ├── TaskForm.tsx # Task creation form
│ │ ├── TaskList.tsx # Task list container
│ │ └── TaskItem.tsx # Individual task card
│ ├── lib/ # Utility functions
│ │ └── api.ts # API client functions
│ └── types/ # TypeScript interfaces
│ └── task.ts # Task-related types
│
├── server/ # Express.js backend
│ └── src/
│ ├── config/ # Configuration
│ │ └── db.ts # MongoDB connection
│ ├── controllers/ # Route handlers
│ │ └── taskController.ts
│ ├── middleware/ # Middleware
│ │ ├── errorHandler.ts # Centralized error handling
│ │ └── validate.ts # Input validation
│ ├── models/ # Mongoose schemas
│ │ └── Task.ts # Task model
│ ├── routes/ # API routes
│ │ └── taskRoutes.ts
│ └── app.ts # Express server setup
- Add Task: Create tasks with title (required) and description (optional)
- View Tasks: See all tasks sorted by newest first
- Complete Task: Toggle task completion status with checkbox
- Delete Task: Remove tasks with confirmation prompt
| Field | Rules |
|---|---|
| title | Required, 1-100 characters, trimmed |
| description | Optional, max 500 characters |
| task id | Must be valid MongoDB ObjectId |
- Frontend displays user-friendly error messages
- API returns consistent
{ success, data?, error? }format - Backend handles MongoDB errors (duplicates, validation, cast errors)
- 404 handler for undefined routes
| Component | Platform | URL |
|---|---|---|
| Frontend | Vercel | commu-sync-assessment.vercel.app |
| Backend | Render | commusync-api.onrender.com |
| Database | MongoDB Atlas | Cloud-hosted |
- Render: Backend spins down after 15min inactivity. First request may take 30-60 seconds to wake up.
- Vercel: No limitations for personal use.
- MongoDB Atlas: Free tier with 512MB storage.
- Node.js (v18 or higher)
- MongoDB (local installation or Atlas cluster)
-
Clone the repository:
git clone https://github.com/Rexskth/CommuSync_Assessment.git cd CommuSync_Assessment -
Install server dependencies:
cd server npm install -
Install client dependencies:
cd ../client npm install
-
Create server environment file:
cp server/.env.example server/.env
-
(Optional) Create client environment file:
cp client/.env.local.example client/.env.local
-
Start MongoDB (if running locally)
-
Start the backend server:
cd server npm run dev -
Start the frontend (in a new terminal):
cd client npm run dev -
Open http://localhost:3000 in your browser
| Method | Endpoint | Body | Description |
|---|---|---|---|
| GET | /api/tasks | - | Get all tasks |
| POST | /api/tasks | { title, description? } |
Create a task |
| PATCH | /api/tasks/:id | - | Toggle completion status |
| DELETE | /api/tasks/:id | - | Delete a task |
{
"success": true,
"data": { ... }
}{
"success": false,
"error": "Error message"
}