A modern, responsive full-stack todo application with deadline management, dark mode, and session-based authentication.
Demo • Features • Installation • Tech Stack • Documentation
- ✅ Modern UI/UX - Clean, intuitive interface built with Tailwind CSS
- ✅ Dark/Light Theme - Toggle between themes with persistent storage
- ✅ Fully Responsive - Optimized for mobile, tablet, and desktop
- ✅ Real-time Updates - Instant UI feedback with optimistic updates
- ✅ Advanced Search - Search todos by title or description
- ✅ Smart Filtering - Filter by status (All, Pending, Completed, Overdue)
- ✅ Beautiful Animations - Smooth transitions and loading states
- ✅ Toast Notifications - React Hot Toast for user feedback
- ✅ SweetAlert2 Dialogs - Beautiful confirmation dialogs
- 🔴 Overdue - Red badge for past-deadline tasks
- 🟠 Urgent - Orange badge for tasks due within 24 hours
- 🟡 Soon - Yellow badge for tasks due within 7 days
- 🔵 Upcoming - Blue badge for tasks due later
- 🟢 Completed - Green badge with strike-through text
- ⚪ No Deadline - Gray badge for tasks without deadlines
- ✅ Session-based Authentication - Secure login with Passport.js
- ✅ Password Hashing - bcrypt with salt rounds
- ✅ RESTful API - Clean, organized endpoints
- ✅ PostgreSQL Database - Robust data persistence
- ✅ SQL Injection Protection - Parameterized queries
- ✅ User Isolation - Users can only access their own todos
- ✅ CORS Enabled - Secure cross-origin requests
- ✅ Session Persistence - 7-day session expiry
- 📈 Total Tasks - Count of all todos
- ✅ Completed - Number of finished tasks
- ⏳ Pending - Number of incomplete tasks
⚠️ Overdue - Number of past-deadline tasks
- lucide-react - Beautiful icons
- react-hot-toast - Toast notifications
- sweetalert2 - Beautiful alerts
- bcrypt - Password hashing
- connect-pg-simple - PostgreSQL session store
- aos - Animations on Scroll
- animate.css - Animation on appearances
Before you begin, ensure you have the following installed:
- Node.js (v16 or higher) - Download
- PostgreSQL (v12 or higher) - Download
- npm or yarn - Comes with Node.js
- Git - Download
git clone https://github.com/umerzafar4598/Full-Stack-Todo-App.git
cd todo-app# Create PostgreSQL database
createdb todo_db
# Run the schema
cd backend
psql -d db_schema -f todo_schema.sql# Navigate to backend directory
cd backend
# Install dependencies
npm install
# Create environment file
cp .env
Backend .env Configuration:
PORT=5000
DATABASE_URL=postgresql://YOUR_USERNAME:YOUR_PASSWORD@localhost:5432/todo_db
SESSION_SECRET=change-this-to-a-random-secret-key-in-production
NODE_ENV=development# Navigate to frontend directory (from project root)
cd frontend
# Install dependencies
npm install
# Create environment file (optional)
cp .envFrontend .env Configuration:
VITE_API_URL=http://localhost:5000/apiTerminal 1 - Backend:
cd backend
npm run dev✅ Backend running on http://localhost:5000
Terminal 2 - Frontend:
cd frontend
npm run dev✅ Frontend running on http://localhost:5173
Open your browser and navigate to:
http://localhost:5173
| Method | Endpoint | Description | Auth Required |
|---|---|---|---|
| POST | /api/auth/register |
Register new user | ❌ |
| POST | /api/auth/login |
Login user | ❌ |
| POST | /api/auth/logout |
Logout user | ✅ |
| GET | /api/auth/me |
Get current user | ✅ |
| GET | /api/auth/status |
Check auth status | ❌ |
| Method | Endpoint | Description | Auth Required |
|---|---|---|---|
| GET | /api/todos |
Get all todos | ✅ |
| GET | /api/todos/:id |
Get single todo | ✅ |
| POST | /api/todos |
Create new todo | ✅ |
| PUT | /api/todos/:id |
Update todo | ✅ |
| PATCH | /api/todos/:id/toggle |
Toggle completion | ✅ |
| DELETE | /api/todos/:id |
Delete todo | ✅ |
| GET | /api/todos/stats/overview |
Get statistics | ✅ |
- Click the "Add Todo" button
- Enter a title (required)
- Add a description (optional)
- Set a deadline (optional)
- Click "Create"
- Click the edit icon (✏️) on any todo
- Modify the fields
- Click "Update"
- Click the delete icon (🗑️) on any todo
- Confirm deletion in the SweetAlert2 dialog
- Todo is permanently removed
- Click the checkbox on any todo
- Todo is marked as complete/incomplete
- Type in the search box
- Results filter in real-time
- Use the dropdown menu
- Select: All, Pending, Completed, or Overdue
- Click the sun/moon icon in the header
- Theme switches and saves automatically
- ✅ Password Hashing - bcrypt with 10 salt rounds
- ✅ Session Security - HTTP-only cookies, secure flags
- ✅ SQL Injection Protection - Parameterized queries with whitelisted fields
- ✅ XSS Protection - React's built-in sanitization
- ✅ CORS Protection - Configured allowed origins
- ✅ User Isolation - Users can only access their data
- ✅ Input Validation - Client and server-side validation
Authentication:
- Register a new account
- Login with credentials
- Access protected routes
- Logout successfully
Todo Operations:
- Create a todo
- Create a todo with deadline
- Edit a todo
- Mark todo as complete
- Delete a todo
- Search todos
- Filter todos
UI/UX:
- Toggle theme (dark/light)
- Test on mobile device
- Test all responsive breakpoints
- Check all animations
Contributions are welcome! Please follow these steps:
- Fork the repository
- Create a feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
- None currently. Please open an issue if you find any bugs.
This project is licensed under the ISC License.
Author Information
- GitHub: @umerzafar4598
- LinkedIn: @umerzafar
- React - UI Framework
- Tailwind CSS - Styling
- Vite - Build Tool
- Express.js - Backend Framework
- PostgreSQL - Database
- Passport.js - Authentication
- SweetAlert2 - Beautiful Alerts
- Lucide React - Icons
- AOS - Animations on Scroll
- animate.css - Animations on Appearance
Made with ❤️ and ☕
⭐ Star this repo if you find it helpful!