TrackIt is a responsive web app for daily habit tracking, built with React, Vite, Styled Components, and Material UI. Users can register, log in, create and track habits, and mark them as completed—all with a mobile-first experience.
🔗 Production URL: track-it-brown-sigma.vercel.app/
TrackIt offers:
- User registration and login
- Habit creation and management
- Daily habit overview
- Marking habits as completed/uncompleted
- Mobile-optimized interface
- React 18 + Vite
- Styled Components
- Material UI (MUI)
- Axios for HTTP requests
- React Router DOM for SPA navigation
- Day.js for date manipulation
- React Loader Spinner for loading feedback
- ESLint for code quality
- ✅ User authentication (login/signup)
- ✅ Session persistence (token in localStorage)
- ✅ Habit CRUD
- ✅ Daily habit overview
- ✅ Mark/unmark habits as completed
- ✅ Visual loading feedback
- ✅ Responsive, mobile-first design
- ✅ Componentization and global state (React Context API)
projeto-modulo11/
├── public/
├── src/
│ ├── assets/
│ ├── components/
│ ├── contexts/
│ ├── pages/
│ ├── styles/
│ ├── App.jsx
│ ├── TrackIt.jsx
│ └── main.jsx
├── package.json
└── README.md
- Node.js 18+
- npm
git clone https://github.com/your-username/projeto-modulo11.git
cd projeto-modulo11npm installnpm run devVisit http://localhost:5173 to view it in the browser.
TrackIt consumes the Bootcamp Responde Aí public API.
POST /auth/login– User loginPOST /auth/sign-up– User registrationGET /habits– List habitsPOST /habits– Create habitGET /habits/today– Today's habitsPOST /habits/:id/check– Mark habit as donePOST /habits/:id/uncheck– Unmark habit
Pull requests are welcome!
For major changes, please open an issue first to discuss what you'd like to change.
To contribute:
- Fork the repository
- Create a feature branch
- Commit your changes with clear messages
- Ensure tests are included if applicable
- Open a pull request
MIT © Victor Rodrigues
Project developed for Driven – Module 11. Demonstrates proficiency in React, componentization, hooks, global context, REST API integration, and mobile UI/UX best practices.