A modern, full-stack web application for managing deadlines and tasks with real-time tracking, priority management, and user authentication.
Link: https://track-the-deadline.vercel.app
- Secure User Registration & Login with JWT tokens
- Password Hashing using bcryptjs with salt rounds
- Protected Routes with middleware authentication
- CORS Protection configured for production domains
- Rate Limiting to prevent abuse (100 requests per 15 minutes)
- Security Headers (HSTS, XSS Protection, Clickjacking prevention)
- Create, Read, Update, Delete deadlines
- Priority Levels: High, Medium, Low
- Status Tracking: Pending, Completed
- Due Date Management with date validation
- Rich Descriptions for detailed task information
- Modern UI built with React 18 and TypeScript
- Responsive Design works on desktop and mobile
- Real-time Updates with React Query
- Form Validation using Zod schemas
- Toast Notifications for user feedback
- Dark/Light Theme support
- Full-stack TypeScript application
- Prisma ORM with PostgreSQL database
- Input Validation on both client and server
- Error Handling with proper HTTP status codes
- Environment-based Configuration
- Production-ready Deployment on Vercel & Railway
- React 18 with TypeScript
- Vite for fast development and building
- React Router for client-side routing
- TanStack Query for server state management
- React Hook Form for form handling
- Zod for client-side validation
- Tailwind CSS for styling
- Radix UI for accessible components
- Lucide React for icons
- Node.js with Express.js
- TypeScript for type safety
- Prisma ORM with PostgreSQL
- JWT for authentication
- bcryptjs for password hashing
- Zod for server-side validation
- Helmet for security headers
- CORS for cross-origin requests
- Express Rate Limit for API protection
- PostgreSQL for data persistence
- Prisma Migrations for schema management
- Database Indexing for optimized queries
- Vercel for frontend hosting
- Railway for backend hosting and database
- Environment Variables for configuration
- Node.js 18+
- npm or yarn
- PostgreSQL database (or use Railway's managed PostgreSQL)
git clone https://github.com/yourusername/deadline-tracker.git
cd deadline-trackercd server
npm install
# Copy environment template
cp ENV_TEMPLATE.txt .env
# Edit .env with your configuration
# Required variables:
# DATABASE_URL=postgresql://...
# JWT_SECRET=your-super-secret-jwt-key
# FRONTEND_URL=http://localhost:8081
# NODE_ENV=development
# PORT=3000
# Generate Prisma client and run migrations
npm run prisma:generate
npm run prisma:migrate
# Start development server
npm run dev# From project root
npm install
# Copy environment template
cp .env.example .env
# Edit .env with your backend URL
# VITE_API_URL=http://localhost:3000/api
# Start development server
npm run dev- Frontend: http://localhost:8081
- Backend API: http://localhost:3000
- API Documentation: http://localhost:3000/health
- Registration: Create a new account with email and password
- Login: Sign in with your credentials
- Create Deadlines: Add new tasks with title, description, due date, and priority
- Manage Tasks: Edit, mark as complete, or delete deadlines
- Filter & Sort: Organize tasks by priority, status, or due date
- Stay Organized: Use priority levels to focus on important tasks
Authentication
POST /api/auth/register - Register new user
POST /api/auth/login - User login
POST /api/auth/logout - User logout
GET /api/auth/me - Get current user
Deadlines
GET /api/deadlines - Get all user deadlines
POST /api/deadlines - Create new deadline
GET /api/deadlines/:id - Get specific deadline
PUT /api/deadlines/:id - Update deadline
DELETE /api/deadlines/:id - Delete deadline
Frontend (.env)
VITE_API_URL=https://your-backend-url.railway.app/apiBackend (.env)
DATABASE_URL=postgresql://user:pass@host:5432/dbname
JWT_SECRET=your-super-secret-jwt-key-min-32-chars
NODE_ENV=production
PORT=3000
FRONTEND_URL=https://your-frontend-url.vercel.app- JWT Authentication with secure secret keys
- Password Hashing using bcryptjs with salt rounds
- CORS Configuration for specific domains only
- Rate Limiting to prevent API abuse
- Security Headers (HSTS, XSS Protection, Clickjacking prevention)
- Input Validation using Zod schemas
- SQL Injection Protection via Prisma ORM
- Environment Variables for sensitive data
- HTTPS Enforcement in production
- Error Handling without information leakage
- All passwords are hashed before storage
- JWT tokens expire after 7 days
- API requests are rate-limited per IP
- CORS is configured for specific domains only
- Security headers prevent common attacks
- Input validation on both client and server
- Database queries are protected against SQL injection
- Connect your GitHub repository to Vercel
- Set environment variable:
VITE_API_URL=https://your-backend-url.railway.app/api - Deploy automatically on git push
- Connect your GitHub repository to Railway
- Set environment variables:
DATABASE_URL(auto-generated with PostgreSQL)JWT_SECRET(generate a secure random string)FRONTEND_URL(your Vercel frontend URL)NODE_ENV=production
- Railway auto-deploys on git push
Railway provides managed PostgreSQL with automatic backups and scaling.
# Test backend health
curl https://your-backend-url.railway.app/health
# Test user registration
curl -X POST https://your-backend-url.railway.app/api/auth/register \
-H "Content-Type: application/json" \
-d '{"email":"[email protected]","password":"password123","name":"Test User"}'Use tools like Postman or curl to test API endpoints. All endpoints require proper authentication except registration and login.
deadline-tracker/
├── src/ # Frontend React application
│ ├── components/ # Reusable UI components
│ ├── contexts/ # React contexts (Auth)
│ ├── hooks/ # Custom React hooks
│ ├── pages/ # Page components
│ ├── services/ # API service functions
│ ├── types/ # TypeScript type definitions
│ └── utils/ # Utility functions
├── server/ # Backend Node.js application
│ ├── src/
│ │ ├── middleware/ # Express middleware
│ │ ├── routes/ # API route handlers
│ │ └── utils/ # Backend utilities
│ └── prisma/ # Database schema and migrations
├── public/ # Static assets
└── docs/ # Documentation files
- Deadline Reminders: Automated emails when deadlines approach
- Customizable Timing: 1 day, 3 days, 1 week before due date
- Priority-based Alerts: Different notification levels for high/medium/low priority
- Email Templates: Professional HTML email templates
- Unsubscribe Options: User control over notification preferences
- Productivity Dashboard: Track completion rates and trends
- Time Tracking: Monitor time spent on tasks
- Performance Metrics: Success rates and deadline adherence
- Visual Reports: Charts and graphs for data visualization
- Live Updates: Real-time deadline updates across devices
- Collaborative Features: Share deadlines with team members
- Push Notifications: Browser notifications for urgent deadlines
- WebSocket Integration: Instant updates without page refresh
- Calendar View: Visual calendar for deadline management
- Drag & Drop: Intuitive task organization
- Keyboard Shortcuts: Power user features
- Mobile App: Native mobile application
- Offline Support: Work without internet connection
- Task Templates: Pre-defined task templates for common projects
- Recurring Deadlines: Automatically recurring tasks
- File Attachments: Attach documents to deadlines
- Comments System: Add notes and comments to tasks
- Export/Import: Backup and restore deadline data
- Unit Testing: Comprehensive test coverage
- E2E Testing: End-to-end testing with Playwright
- Performance Optimization: Code splitting and lazy loading
- Accessibility: WCAG 2.1 AA compliance
- Internationalization: Multi-language support
- PWA Features: Progressive Web App capabilities
We welcome contributions! Please follow these steps:
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
- Follow TypeScript best practices
- Write meaningful commit messages
- Add tests for new features
- Update documentation as needed
- Ensure all tests pass before submitting
This project is licensed under the MIT License - see the LICENSE file for details.
- Vercel for frontend hosting
- Railway for backend hosting and database
- Prisma for the excellent ORM
- React team for the amazing framework
- Tailwind CSS for the utility-first CSS framework
- Radix UI for accessible component primitives
If you encounter any issues or have questions:
- Check the Issues page
- Create a new issue with detailed description
⭐ If you found this project helpful, please give it a star on GitHub!
Built with ❤️ using React, Node.js, and PostgreSQL