# Todo Manager - Web App
A production-grade, real-time Todo List web application built with Next.js 15, Zustand, TypeScript, Tailwind CSS, and dnd-kit for drag-and-drop reordering. Built to work seamlessly with both web and mobile via a shared backend.
## 🚀 Features
- Realtime data sync with backend using Socket.io
- Fully-featured todo CRUD (create, read, update, delete)
- Drag-and-drop reordering of todos (dnd-kit)
- Monkeytype-inspired dark/light theme with toggle
- Instant search, sorting, and filtering
- Responsive, accessible, and fast
- Cross-platform shared data (web + mobile)
## 🥇 Tech Stack
- Next.js 15 (App Router, Server Actions)
- TypeScript everywhere
- Tailwind CSS (custom design system)
- Zustand (state management)
- Socket.io-client (real-time sync)
- dnd-kit (drag and drop)
- Axios (API calls)
## 📦 Project Structure
web/ ├── app/ │ ├── components/ # All UI components (modular) │ ├── hooks/ # Custom React hooks │ ├── lib/ # Stores, services, types, utils │ ├── layout.tsx │ ├── page.tsx │ └── globals.css ├── server.js # Custom Next.js + Socket.io dev server ├── tailwind.config.ts ├── package.json └── ...
## 🔧 Setup & Install
1. **Install dependencies**
npm install
2. **Create `.env.local`**
NEXT_PUBLIC_API_URL=http://localhost:4000 PORT=3000
3. **Start the development server**
npm run dev
4. Open [http://localhost:3000](http://localhost:3000) in your browser.
> ℹ️ Backend (API) must be running on `http://localhost:4000` or update `NEXT_PUBLIC_API_URL` accordingly.
## 🕹 Usage
- Click "+ New Todo" to add todos.
- Search, filter, and sort as needed.
- Drag an item up/down to reorder (in manual sort mode).
- Toggle dark/light theme using the moon/sun icon.
- All changes are synced in real time with other devices.
## ⚡️ Production Build
npm run build npm run start
## 📲 Mobile Integration
This frontend is built to work with a React Native app using the same backend, API, and real-time events for cross-platform syncing.
## 🛡 Best Practices
- Follows modern modular code structure
- Type-safe API and data handling
- Accessibility and responsive design
- Error handling for API and network states
# Todo Manager - Backend API
A Node.js backend API serving a collaborative Todo app, supporting both web and mobile clients with production-level practices.
## 🚀 Features
- RESTful CRUD API with strict validation (Zod)
- PostgreSQL database (Prisma ORM)
- Real-time updates via Socket.io (web & mobile)
- Modern TypeScript clean architecture
- Cross-origin resource sharing (CORS) for development
- Graceful startup, shutdown, and error handling
## 🥇 Tech Stack
- Node.js (Express)
- TypeScript
- Prisma ORM (PostgreSQL)
- Socket.io (real-time events)
- Zod (runtime request validation)
- Docker/Local Postgres support
## 📦 Project Structure
backend/ ├── src/ │ ├── controllers/ # Route handlers (business logic) │ ├── routes/ # Express routes │ ├── services/ # Data/service layer │ ├── validators/ # Zod schemas │ ├── socket/ # Socket.io event handlers │ ├── config/ # Server, DB, and CORS configs │ ├── types/ # TypeScript interfaces │ ├── app.ts # Express app entry │ └── server.ts # Socket.io + HTTP server entry ├── prisma/ │ └── schema.prisma # DB model/schema ├── package.json ├── .env └── ...
## 🔧 Setup & Install
1. **Install dependencies**
npm install
2. **Configure PostgreSQL in `.env`**
DATABASE_URL="postgresql://username:password@localhost:5432/todo_db?schema=public" PORT=4000 ALLOWED_ORIGINS=http://localhost:3000,http://localhost:8081
3. **Run migrations & generate Prisma client**
npx prisma migrate dev --name init npx prisma generate
4. **Start the server**
npm run dev
By default, API will be available at [http://localhost:4000](http://localhost:4000).
## 🚦 API Endpoints
- `GET /api/todos` → Get all todos
- `POST /api/todos` → Create new todo
- `PUT /api/todos/:id` → Update todo
- `DELETE /api/todos/:id` → Delete todo
- `PATCH /api/todos/:id/toggle` → Toggle completion
All responses are standardized; inputs are validated by Zod.
## 🔌 Real-time Events (Socket.io)
- `todo:created`
- `todo:updated`
- `todo:deleted`
- `todo:toggled`
Clients receive and apply these events to update their UI live.
## ⚡️ Production
- Setup a managed Postgres (e.g. Railway, Supabase, Neon).
- Use a process manager (PM2) or Docker for deployment.
- Run `npm run build` and `npm start` for production mode.
- Always secure `.env` and environment variables.
## 🛡 Best Practices
- Modular, testable architecture (controllers/services/types)
- Follows Prisma, Express, and Socket.io 2025 standards
- CORS, error handling, lifecycle management built in
- Ready for CI/CD, Docker, and scalable infra
## 📝 License
MIT