🎯 Habit Tracker

Master Your Habits, Transform Your Life

A powerful, modern full-stack habit tracking application that helps you build consistency and track your daily progress with an elegant, responsive interface.

Features • Tech Stack • Installation • API Reference • Contributing

---

✨ Features

🔐 Authentication JWT-based secure authentication User registration & login Protected routes & API endpoints Token-based authorization	📊 Dashboard Real-time habit statistics Completion percentage tracking Visual progress indicators Responsive card layouts
🎨 Modern UI Dark/Light theme toggle Smooth animations & transitions Mobile-responsive design Glassmorphism effects	⚡ Habit Management Create, edit, delete habits Mark daily completions Habit descriptions & metadata Persistent data storage

🛠️ Tech Stack

Backend

• FastAPI - Modern, fast web framework for building APIs
• SQLAlchemy - SQL toolkit and ORM
• Alembic - Database migration tool
• Pydantic - Data validation using Python type hints
• Python-Jose - JWT implementation

Frontend

• Next.js 15 - React framework with App Router
• React 19 - UI library
• TypeScript - Type-safe JavaScript
• Tailwind CSS v4 - Utility-first CSS framework
• shadcn/ui - Re-usable component library
• Lucide Icons - Beautiful icon set

Database

• SQLite - Lightweight, serverless database

Testing

• Playwright MCP - End-to-end testing framework

📁 Project Structure

AIProjects/
├── 📂 backend/
│   ├── 📂 src/
│   │   ├── 📂 api/
│   │   │   ├── auth.py          # Authentication endpoints
│   │   │   └── habits.py        # Habit CRUD endpoints
│   │   ├── 📂 models/
│   │   │   ├── usuario.py       # User model
│   │   │   ├── habito.py        # Habit model
│   │   │   └── tarefa.py        # Task model
│   │   ├── database.py          # Database configuration
│   │   └── main.py             # FastAPI application
│   ├── 📂 alembic/              # Database migrations
│   ├── requirements.txt
│   └── alembic.ini
│
├── 📂 frontend/
│   └── 📂 my-app/
│       ├── 📂 app/
│       │   ├── 📂 dashboard/    # Dashboard page
│       │   ├── 📂 login/        # Login page
│       │   ├── layout.tsx
│       │   └── page.tsx
│       ├── 📂 components/
│       │   ├── 📂 dashboard/    # Dashboard components
│       │   └── 📂 ui/           # shadcn/ui components
│       ├── 📂 lib/
│       │   ├── api.ts           # API client with JWT auth
│       │   └── utils.ts
│       ├── 📂 tests/            # Test files
│       ├── package.json
│       └── next.config.ts
│
└── README.md

🚀 Installation

Prerequisites

• Python 3.14+
• Node.js 18+
• npm or yarn

1️⃣ Clone the Repository

git clone https://github.com/Ansbach-0/AIProjects.git
cd AIProjects

2️⃣ Backend Setup

# Navigate to backend directory
cd backend

# Install Python dependencies
pip install -r requirements.txt

# Run database migrations
alembic upgrade head

# Start the FastAPI server
uvicorn src.main:app --reload --host 0.0.0.0 --port 8000

The backend API will be available at http://localhost:8000

FastAPI Docs: Visit http://localhost:8000/docs for interactive API documentation

3️⃣ Frontend Setup

# Navigate to frontend directory
cd frontend/my-app

# Install dependencies
npm install

# Start the development server
npm run dev

The frontend will be available at http://localhost:3000

4️⃣ Environment Variables

Create a .env file in the frontend directory:

NEXT_PUBLIC_API_URL=http://localhost:8000

📚 API Reference

Authentication

Method	Endpoint	Description
POST	/auth/register	Register a new user
POST	/auth/login	Login and receive JWT token
GET	/auth/me	Get current user info (requires auth)

Request Body (Login):

{
  "email": "user@example.com",
  "password": "securepassword"
}

Response:

{
  "access_token": "eyJhbGciOiJIUzI1NiIs...",
  "token_type": "bearer"
}

Habits

Method	Endpoint	Description	Auth Required
GET	/habits/	List all user habits	✅
POST	/habits/	Create a new habit	✅
GET	/habits/{id}	Get habit by ID	✅
PUT	/habits/{id}	Update habit	✅
DELETE	/habits/{id}	Delete habit	✅

Request Body (Create Habit):

{
  "name": "Morning Exercise",
  "description": "30 minutes of cardio every morning"
}

Response:

{
  "id": 1,
  "name": "Morning Exercise",
  "description": "30 minutes of cardio every morning",
  "usuario_id": 1
}

🎯 Usage

1. Register/Login - Create an account or login with existing credentials
2. Dashboard - View your habits dashboard with completion stats
3. Create Habits - Click "New Habit" to add habits you want to track
4. Mark Complete - Click "Mark Complete" when you finish a habit for the day
5. Track Progress - View stats: Total habits, Completed today, Remaining
6. Delete Habits - Remove habits you no longer want to track

🧪 Testing

End-to-End Tests

The project uses Playwright MCP for comprehensive E2E testing:

# Run tests
npm test

# Run tests in watch mode
npm test -- --watch

Test Coverage

• ✅ Authentication flow (login/register)
• ✅ Habit creation
• ✅ Habit completion marking
• ✅ Habit deletion
• ✅ Dashboard stats updates

🤝 Contributing

Contributions are welcome! Please follow these steps:

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

📝 License

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

👨‍💻 Author

Ansbach-0 & AndreRachid-rgb

• GitHub: @Ansbach-0
• GitHub: @AndreRachid-rgb

🙏 Acknowledgments

• FastAPI for the amazing Python web framework
• Next.js for the powerful React framework
• shadcn/ui for the beautiful component library
• Tailwind CSS for the utility-first CSS framework

---

⭐ Star this repository if you find it helpful!

Made with ❤️ by Ansbach-0 & AndreRachid-rgb