A full-stack task management app with drag-and-drop workflows, secure authentication, and a clean, modular architecture.
Overview • Features • Tech Stack • Getting Started • Environment Variables • Project Structure
Sprintlyze is a task management application built to explore what a genuinely smooth drag-and-drop experience feels like — down to details like dragging a task straight to a trash zone to delete it, instead of clicking a button.
Alongside the interface, the project puts equal weight on the backend: secure authentication, OTP-based password recovery, rate-limited API routes, and a clean, feature-based modular Express architecture.
🚧 This project is not deployed. Instructions below cover running it locally.
- User registration and login
- Password recovery via OTP email verification
- JWT authentication paired with secure HTTP-only cookies
- Update profile details, email, and password
- Password visibility toggle on all password fields
- Drag-and-drop task board (
@dnd-kit) - Drag-to-trash deletion — drag a task to the trash zone instead of clicking delete
- Custom global scrollbar styling for a consistent look and feel
- Global toast notifications for real-time feedback on user actions
- Rate limiting on sensitive routes (login, OTP requests, etc.)
- Redis (Upstash) for caching and temporary OTP storage
- Centralized error handling across all API routes
- Request validation and sanitization on every endpoint
|
Frontend (Client)
|
Backend (Server)
|
Dev Tools: ESLint · Nodemon · tsx · ts-node
- Node.js (v18 or later recommended)
- A MongoDB instance (local or Atlas)
- A Redis instance (Upstash recommended)
- An SMTP provider for sending emails (e.g., Gmail app password, SendGrid, etc.)
# Clone the repository
git clone https://github.com/your-username/sprintlyze.git
cd sprintlyze
# Install client dependencies
cd client
npm install
# Install server dependencies
cd ../server
npm installCreate a .env file in the server directory (see Environment Variables below).
# Start the backend (from /server)
npm run dev
# Start the frontend (from /client, in a separate terminal)
npm run devThe client will run on http://localhost:3000 and the server on the port defined in your .env file.
| Variable | Description |
|---|---|
PORT |
Port the server runs on |
MONGO_URI |
MongoDB connection string |
JWT_SECRET |
Secret key for signing JWTs |
REDIS_URL |
Upstash Redis connection URL |
SMTP_HOST |
SMTP host for sending emails |
SMTP_USER |
SMTP username |
SMTP_PASS |
SMTP password / app password |
CLIENT_URL |
Frontend URL (for CORS config) |
⚠️ Never commit your.envfile. A.env.exampleis included as a template.
The backend utilizes a Feature-Based Modular Architecture, which scales better than traditional MVC by grouping routes, controllers, and models by feature (e.g., auth, tasks, users).
sprintlyze/
├── client/ # Next.js frontend
│ ├── app/ # App Router (Pages & Layouts)
│ ├── components/ # Reusable React components
│ └── ...
├── server/ # Express backend
│ ├── config/ # Environment variables and configurations
│ ├── database/ # MongoDB and Redis connection logic
│ ├── middlewares/ # Custom middlewares (auth, rate limiting)
│ ├── modules/ # Feature-based modular architecture
│ │ ├── auth/ # Auth routes, controller, validators
│ │ ├── tasks/ # Tasks routes, controller, model, validators
│ │ └── users/ # Users routes, controller, model, validators
│ ├── utils/ # Helper functions (e.g., email service)
│ └── index.ts # Entry point
└── README.md
The following features are intentionally excluded from the current scope of the project:
- Task filtering and search
- Team / multi-user workspaces
- Activity log per task
- Dark mode
Feedback and suggestions are welcome — especially around the auth flow and API structure. Feel free to open an issue or a pull request.
Built with a focus on clean architecture and smooth interactions.