Habit Tracker Demo App

A full-stack habit tracking application built with Flask backend, React frontend, and SQLite database.

Features

• Landing Page: Welcome and app introduction
• Tracker Page: Calendar view for tracking daily habits
• Add Habits: Create new habits with custom schedules
• Statistics: Visual analytics with charts and graphs
• User Authentication: Login and account management
• User Profile: Avatar, username, and contact details

Tech Stack

• Backend: Flask (Python)
• Frontend: React with TypeScript
• Database: SQLite
• Charts: Chart.js for statistics
• Styling: Tailwind CSS

Project Structure

coderslab-demo-1/
├── backend/           # Flask API, SQLite database
├── frontend/          # React app
└── README.md
└── QUICKSTART.md
└── PROJECT_OVERVIEW.md
└── setup.sh

Setup Instructions

Backend Setup

1. Navigate to backend/ directory
2. Install dependencies: pip install -r requirements.txt
3. Run the Flask app: python app.py

Frontend Setup

1. Navigate to frontend/ directory
2. Install dependencies: npm install
3. Start the development server: npm start

API Endpoints

• POST /api/auth/login - User login
• POST /api/auth/register - User registration
• GET /api/habits - Get user habits
• POST /api/habits - Create new habit
• PUT /api/habits/<id> - Update habit
• DELETE /api/habits/<id> - Delete habit
• POST /api/tracker/<date> - Track habit completion
• GET /api/statistics - Get habit statistics

Database Schema

• Users: id, username, email, password_hash, avatar_url
• Habits: id, user_id, name, schedule, created_at
• HabitLogs: id, habit_id, user_id, date, completed