Habitat - Habit Tracking App

Habitat is a modern habit tracking application built with Next.js, focusing on positive reinforcement through visually appealing animations and intuitive design. Track your daily activities, build consistent habits, and visualize your progress over time.

Features

• 🎯 Daily habit tracking with streaks
• ✨ Visually appealing animations and UI
• 🌓 Dark/Light theme support
• 📊 Progress visualization
• 🔐 GitHub authentication
• 🚀 Real-time updates
• 📱 Responsive design

Tech Stack

• Framework: Next.js 15.3
• Styling: Tailwind CSS, Framer Motion
• Database: PostgreSQL with Drizzle ORM
• Authentication: NextAuth.js
• UI Components: Radix UI, shadcn/ui
• Deployment: Vercel/Netlify ready

TODO

• Hobby: Choose and modify completions of previous days
• Hobby: View Hobby in detail giving information of past completions and helpful data
  • Best streaks Bar
  • Calendar heatmap of completions
  • Frequency map of days within months
  • Have tree/ui based feedback on growing a habitat - tree or anything as such
• Add optimizations
  • Faster rendering (Reduce overhead calculations and manipulations)
  • Faster response time (Use minimal amount of SQL to get data)

Getting Started

Prerequisites

• Node.js (18.18.0 or higher)
• PostgreSQL
• pnpm/npm/yarn/bun

Environment Setup

1. Clone the repository:

git clone https://github.com/redsteadz/habitat
cd hobbyist

2. Create a .env file in the root directory:

DATABASE_URL="postgresql://admin:root@localhost:5432/test_db"
GITHUB_ID=your_github_id
GITHUB_SECRET=your_github_secret

Development

1. Start the PostgreSQL database using Docker:

cd src/server/db
docker-compose up -d

2. Install dependencies:

pnpm install

3. Set up the database:

pnpm db:generate  # Generate migrations
pnpm db:push      # Push migrations to database
pnpm db:seed      # (Optional) Seed the database

4. Start the development server:

pnpm dev

The application will be available at http://localhost:3000.

Database Management

• pnpm db:migrate - Run database migrations
• pnpm db:generate - Generate new migrations
• pnpm db:push - Push schema changes
• pnpm db:studio - Open Drizzle Studio

Project Structure

src/
├── app/              # Next.js app router
├── components/       # Reusable components
├── lib/             # Utility functions
├── server/          # Server-side code
│   └── db/          # Database configuration
└── middleware.ts    # Next.js middleware

Contributing

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

License

LICENSE

Acknowledgments

• Built with Next.js
• UI components from shadcn/ui
• Animations powered by Framer Motion