A modern web application for tracking daily habits and building consistent routines. Monitor your progress, set goals, and develop positive habits with an intuitive and responsive interface.
- Habit Management: Create, edit, and delete custom habits with categories and priorities
- Progress Tracking: Visual progress indicators, streak counters, and completion percentages
- Daily Check-ins: Mark habits as complete with simple interactions and notes
- Analytics Dashboard: View habit completion statistics, trends, and historical data
- Goal Setting: Set weekly, monthly, and yearly habit goals with progress tracking
- Habit Categories: Organize habits by categories (Health, Productivity, Learning, etc.)
- User Authentication: Secure JWT-based registration and login system
- Responsive Design: Optimized for desktop, tablet, and mobile devices
- Dark/Light Mode: Toggle between themes for comfortable viewing
- Notifications: Reminder notifications for habit check-ins
- Data Export: Export habit data to CSV for external analysis
- Habit Templates: Pre-built habit templates for quick setup
- MongoDB - NoSQL database for storing user profiles, events, and application data
- Express.js - Backend framework for building RESTful APIs and server-side logic
- React - Frontend library for building interactive user interfaces
- Vite - Modern build tool for fast development and optimized production builds
- Node.js - JavaScript runtime environment for server-side development
Note: This project uses modern versions of React, Express, and Mongoose, avoiding deprecated libraries and outdated methods for enhanced stability and security.
Habit_Tracker/
├── client/ # React frontend
│ ├── src/
│ │ ├── components/ # Reusable UI components
│ │ ├── pages/ # Page components
│ │ ├── hooks/ # Custom React hooks
│ │ ├── context/ # React context providers
│ │ ├── utils/ # Utility functions
│ │ └── styles/ # CSS and styling files
│ ├── public/ # Static assets
│ └── package.json # Frontend dependencies
├── server/ # Express.js backend
│ ├── models/ # MongoDB schemas
│ ├── routes/ # API route handlers
│ ├── middleware/ # Custom middleware
│ ├── controllers/ # Business logic
│ ├── config/ # Configuration files
│ └── utils/ # Server utilities
├── .env.example # Environment variables template
├── package.json # Backend dependencies
└── README.md # Project documentation
- Node.js (v16 or higher) - Download
- MongoDB (v4.4 or higher) - Local installation or MongoDB Atlas
- npm (v7 or higher) or yarn (v1.22 or higher)
- Git for version control
- Clone the repository:
git clone <repository-url>
cd Habit_Tracker- Install dependencies for both frontend and backend:
# Install backend dependencies
npm install
# Install frontend dependencies
cd client
npm install
cd ..- Set up environment variables:
cp .env.example .envUpdate the .env file with the following configuration:
# Database
MONGO_URI=mongodb://localhost:27017/habit_tracker
# For MongoDB Atlas: mongodb+srv://username:[email protected]/habit_tracker
# Server Configuration
PORT=5000
NODE_ENV=development
# JWT Authentication
JWT_SECRET=your_super_secure_jwt_secret_key_here
JWT_EXPIRE=30d
# Email Configuration (Optional)
EMAIL_SERVICE=gmail
EMAIL_USER=[email protected]
EMAIL_PASS=your_app_password
# Client URL
CLIENT_URL=http://localhost:3000- Initialize the database (optional):
# Seed the database with sample data
npm run seed- Start the development servers:
# Start both frontend and backend concurrently
npm run dev
# Or start them separately:
# Backend server (runs on http://localhost:5000)
npm run server
# Frontend development server (runs on http://localhost:3000)
npm run clientnpm run dev # Start both client and server concurrently
npm run server # Start Express.js backend server
npm run client # Start React development server
npm run build # Build production version
npm run test # Run test suites
npm run seed # Seed database with sample data
npm run lint # Run ESLint for code quality
npm run format # Format code with Prettier- Register a new account or login with existing credentials
- Create your first habit by clicking "Add Habit"
- Set habit details including name, frequency, and goals
- Mark habits as complete each day to build streaks
- View your progress in the analytics dashboard
POST /api/auth/register- Register new userPOST /api/auth/login- User loginPOST /api/auth/logout- User logoutGET /api/auth/me- Get current user profilePUT /api/auth/profile- Update user profilePOST /api/auth/forgot-password- Request password resetPOST /api/auth/reset-password- Reset password
GET /api/habits- Get all user habitsGET /api/habits/:id- Get specific habitPOST /api/habits- Create new habitPUT /api/habits/:id- Update habitDELETE /api/habits/:id- Delete habitPOST /api/habits/:id/complete- Mark habit as completeGET /api/habits/:id/stats- Get habit statistics
GET /api/analytics/dashboard- Get dashboard dataGET /api/analytics/streaks- Get streak informationGET /api/analytics/progress- Get progress reportsPOST /api/analytics/export- Export habit data
GET /api/categories- Get all categoriesPOST /api/categories- Create new categoryPUT /api/categories/:id- Update categoryDELETE /api/categories/:id- Delete category
# Build the client for production
cd client
npm run build
cd ..
# Start production server
npm start# Build and run with Docker Compose
docker-compose up --build- Set
NODE_ENV=production - Use MongoDB Atlas for database
- Configure proper JWT secrets
- Set up SSL certificates
- Configure reverse proxy (Nginx)
# Run all tests
npm test
# Run tests with coverage
npm run test:coverage
# Run specific test suites
npm run test:unit # Unit tests
npm run test:integration # Integration tests
npm run test:e2e # End-to-end testsMongoDB Connection Error
- Ensure MongoDB is running locally or check Atlas connection string
- Verify network access and firewall settings
Port Already in Use
# Kill process using port 5000
lsof -ti:5000 | xargs kill -9Module Not Found Errors
# Clear npm cache and reinstall
npm cache clean --force
rm -rf node_modules package-lock.json
npm installBuild Failures
- Check Node.js version compatibility
- Ensure all environment variables are set
- Clear build cache:
npm run clean
- Database Indexing: Proper indexes on frequently queried fields
- Caching: Redis integration for session management
- Code Splitting: Lazy loading of React components
- Image Optimization: WebP format and responsive images
- Bundle Analysis: Use
npm run analyzeto check bundle size
- JWT token authentication with refresh tokens
- Password hashing with bcrypt
- Rate limiting on API endpoints
- Input validation and sanitization
- CORS configuration
- Helmet.js for security headers
- Fork the repository
- Create a feature branch (
git checkout -b feature/new-feature) - Follow coding standards (ESLint + Prettier)
- Write tests for new features
- Commit changes (
git commit -am 'Add new feature') - Push to branch (
git push origin feature/new-feature) - Create a Pull Request
- Use ESLint and Prettier for consistent formatting
- Follow React best practices and hooks patterns
- Write meaningful commit messages
- Add JSDoc comments for functions
- Maintain test coverage above 80%
- Mobile app (React Native)
- Social features and habit sharing
- Advanced analytics and insights
- Integration with fitness trackers
- Habit recommendation system
- Team challenges and competitions
For support and questions:
- Create an issue on GitHub
- Check the Wiki for detailed guides
- Join our Discord community
This project is licensed under the MIT License - see the LICENSE file for details.
- React team for the amazing framework
- MongoDB team for the flexible database
- All contributors who helped improve this project