Habitrix is a full-stack MERN (MongoDB, Express.js, React.js, Node.js) habit-tracking web app built as part of my On-the-Job Training (OJT) project.
It helps users build habits, track consistency, log moods, and visualize progress through clean UI and interactive analytics.
This project represents what I learned during my MERN journey — from designing the frontend in React, setting up backend APIs, integrating MongoDB, handling authentication, and building a user-friendly dashboard.
- Secure signup & login
- JWT-based authentication
- Separate data for each user
- Add, edit, delete habits
- Mark habits daily
- Track streaks & consistency
- Organized "My Habits" page
- Built using Recharts
- Weekly / monthly analytics
- Line charts, bar charts, streak data
- Understand consistency visually
- Daily mood logging
- View mood patterns
- Simple & intuitive UI
- Shows all today's habits
- Quick progress overview
- Placeholder page for future community features
- Profile settings (basic UI)
- Logout
- Works smoothly on all screen sizes
- React.js
- React Router
- Recharts
- CSS / Tailwind (depending on your folder setup)
- Node.js
- Express.js
- MongoDB + Mongoose
- JWT Authentication
- Dotenv
- VS Code
- Git & GitHub
- Postman
- Vite
Based on your actual project:
Habit_tracker_OJT/
│
├── Backend/
│ ├── models/
│ │ ├── Challenge.js
│ │ ├── CommunityPost.js
│ │ └── User.js
│ │
│ ├── node_modules/
│ ├── server.js
│ ├── package.json
│ └── .env (you must manually create)
│
│
├── src/
│ ├── components/
│ │ ├── CTA.jsx
│ │ ├── Features.jsx
│ │ ├── Footer.jsx
│ │ ├── Hero.jsx
│ │ ├── Logo.jsx
│ │ ├── Navbar.jsx
│ │ └── Testimonials.jsx
│ │
│ ├── pages/
│ │ ├── Dashboard/
│ │ │ ├── Analytics.jsx
│ │ │ ├── Community.jsx
│ │ │ ├── Dashboard.jsx
│ │ │ ├── HabitCard.jsx
│ │ │ ├── MoodTracker.jsx
│ │ │ ├── MyHabits.jsx
│ │ │ ├── QuickNote.jsx
│ │ │ ├── Settings.jsx
│ │ │ ├── Sidebar.jsx
│ │ │ ├── StreakCard.jsx
│ │ │ ├── Topbar.jsx
│ │ │ ├── WeeklyChart.jsx
│ │ │ └── Landing.jsx
│ │ ├── Login.jsx
│ │ └── Signup.jsx
│ │
│ ├── utils/
│ │ ├── apiClient.js
│ │ └── moodStorage.js
│ │
│ ├── App.jsx
│ ├── main.jsx
│ └── index.css
│
├── package.json
├── vite.config.js
└── README.md
Habitrix has two separate environments:
- 📌 one for the backend
- 📌 one for the frontend
Follow the steps below 👇
git clone https://github.com/Adii-45/Habit_tracker_OJT
cd Habit_tracker_OJTNavigate to the backend folder:
cd Backend
npm installYour .env file should contain:
MONGO_URL=your_mongodb_connection_string
PORT=5000
npm run devYour backend runs on:
👉 http://localhost:5000
Go back to the main project folder and run:
cd ..
npm install
npm run devYour frontend runs on:
👉 http://localhost:5173
| Method | Endpoint | Description |
|---|---|---|
| POST | /auth/signup |
Register user |
| POST | /auth/login |
Login user |
| POST | /habits |
Create new habit |
| GET | /habits |
Get all habits |
| PUT | /habits/:id |
Update habit |
| DELETE | /habits/:id |
Delete habit |
| POST | /moods |
Log daily mood |
| GET | /moods |
Mood history |
- Mobile app version (Flutter / React Native)
- Pomodoro timer
- Calendar-based analytics
- AI habit suggestions
- Community leaderboard
Aditya Kumar Nayak & Yatin Jamwal
Polaris School of Technology
OJT Project - Backend Developer Associate
GitHub: https://github.com/Adii-45 & https://github.com/YATIN072007/