Trackify

Build Habits That Last

---

Overview

Trackify is a full-stack web application designed to help users build and maintain habits through consistent daily tracking. The application provides a beautiful, intuitive interface for tracking habits, building streaks, and visualizing progress over time.

Features

• User Authentication: Secure authentication via Clerk
• Habit Tracking: Create and track daily habits
• Defined Period Tracking: Set specific timeframes for goal-based habits
• Streak Monitoring: Automatically track and display current and longest streaks
• Progress Visualization: Visual calendar displays of marked days
• Responsive Design: Beautiful UI that works on mobile and desktop
• Dark/Light Mode: Toggle between color schemes for comfortable viewing
• Multiple Views: Grid and list views for different preferences
• Statistics Dashboard: Overview of tracking metrics and achievements

Feature Details

Streak System	Track consecutive days of habit completion with visual indicators that change color based on streak length
Calendar Visualization	See your progress with an intuitive calendar display that highlights marked days
Analytics	View statistics including total days tracked, active streaks, and personal records

Technologies

Frontend	Backend
React.js Tailwind CSS Clerk Authentication Vite (build tool)	Node.js Express.js MongoDB with Mongoose Clerk SDK for Node

Prerequisites

• Node.js (v14 or higher)
• MongoDB
• npm or yarn
• Clerk account for authentication

Installation

Clone the Repository

git clone https://github.com/Himanshu-Saraswat-01122004/trackify.git
cd trackify

Backend Setup

cd trackify-backend
npm install

Create a .env file in the trackify-backend directory with the following variables:

PORT=5000
MONGO_URI=your_mongodb_connection_string
CLERK_SECRET_KEY=your_clerk_secret_key

Frontend Setup

cd ../trackify-frontend
npm install

Create a .env file in the trackify-frontend directory with the following variables:

VITE_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key
VITE_API_URL=http://localhost:5000/api

Running the Application

Backend cd trackify-backend npm run dev Server will start on port 5000

Frontend cd trackify-frontend npm run dev Available at http://localhost:5173

Usage

1. Sign Up/Login: Use Clerk authentication to create an account or log in
2. Create Trackers: Add new habits to track with optional defined periods
3. Mark Days: Click "Mark Today" each day you complete your habit
4. Track Progress: View your streaks and calendar to see your consistency
5. Toggle Views: Switch between grid and list views as needed

Screenshots

Dashboard View	Login Page
Tracker Creation	Statistics View

Full Application Overview

Environment Variables

Backend (.env)	Frontend (.env)
PORT Port on which the server will run MONGO_URI MongoDB connection string CLERK_SECRET_KEY Secret key from Clerk dashboard	VITE_CLERK_PUBLISHABLE_KEY Publishable key from Clerk dashboard VITE_API_URL URL of the backend API

Project Structure

trackify/
├── trackify-backend/    # Backend Express application
│   ├── controllers/      # Route controllers
│   ├── models/           # Mongoose models
│   ├── routes/           # API routes
│   └── server.js         # Entry point
│
└── trackify-frontend/   # React frontend application
    ├── public/           # Static assets
    └── src/              # Source files
        ├── components/   # Reusable components
        ├── pages/        # Page components
        ├── api/          # API integration
        └── main.jsx      # Entry point

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Author

Himanshu Saraswat

---

Build better habits, one day at a time.