Skip to content

gitlep1/Habbitly

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

159 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

Habbitly ๐Ÿง โœจ

Habbitly is a personalized habit-building coach powered by AI. It helps users develop and maintain positive habits through custom goal-setting, adaptive reminders, motivational insights, and progress tracking โ€” all within a fun and interactive interface.


๐Ÿš€ Live Demo

๐Ÿ‘‰ Habbitly Live App


๐Ÿ›  Tech Stack

Frontend: React + JavaScript
Backend: Node.js, Express
Database: PostgreSQL, NeonDB
Styling: SCSS + Tailwind CSS
Authentication: JWT(jsonwebtokens) (Jose library)
State Management: React Context
Deployment: Vercel and Netlify
AI/Logic: Custom logic (AI planning integration in-progress)


Features

โœ… Core Features

  • ๐Ÿ“‹ Habit Creation & Customization Users can set and personalize habits aligned to their own goals like fitness, mindfulness, or productivity.

  • โฐ AI-Driven Reminders & Nudges (Work In Progress) Adaptive reminders based on user consistency and behavior.

  • ๐Ÿ“Š Progress Tracking & Analytics (Work In Progress) Visual feedback for streaks, completions, and goal trends.

  • ๐Ÿ’ฌ Positive Reinforcement (Work In Progress) Custom motivational insights based on performance data.

  • ๐Ÿ”ง Dynamic Habit Adjustment Suggestions (Work In Progress) Personalized recommendations for habit changes or additions.

  • ๐ŸŒˆ Animated 3D Background (WebGL) Users can toggle immersive 3D animated backgrounds when WebGL is supported.

โœจ Bonus Features

  • ๐Ÿ“ฑ Responsive mobile/desktop experience

  • ๐Ÿง  Smart checkboxes and streak logic (Work In Progress)

  • ๐Ÿ” Protected routes with JWT authentication

  • ๐Ÿ“ฆ Modular and reusable components

  • โŒ Graceful WebGL fallback with detection and UI adjustment

๐Ÿ”ฎ Future Features

  • ๐Ÿ“ฑ Build mobile app for iOS and Android using React Native or Flutter

  • ๐ŸŽ™๏ธ Add voice-controlled habit entry

  • โŒš Develop smartwatch companion app

  • ๐Ÿง  AI-powered habit suggestions based on time, location, and behavior


๐Ÿ“ฆ Getting Started

1. Installation

# Clone the repository
git clone https://github.com/gitlep1/Habbitly.git
cd Habbitly
cd front-end
cd back-end

# Install dependencies
npm install

2. Set up your back-end .env file

PORT=<your port>
PG_HOST=<your pg host>
PG_DATABASE=<your database name>
PG_USER=<your pg user>
PG_PASSWORD=<your pg password>
PG_PORT=<your pg port>

JWT_SECRET="<your jwt secret>"

GMAIL_HOST="<your gmail host>"
GMAIL_EMAIL="<your gmail>"
CLIENT_ID="<your google client id>"
CLIENT_SECRET="<your google client secret>"
REFRESH_TOKEN="<your google refresh token>"

REDIRECT_URI="<your redirect uri>"

ALLOW_OAUTH_SETUP="<true if on localhost otherwise false>"

IMGUR_CLIENT_ID="<your imgur client id>"
IMGUR_CLIENT_SECRET="<your imgur secret>"

CLOUDINARY_CLOUD_NAME="<your cloudinary cloud name>"
CLOUDINARY_API_KEY="<your cloudinary api key>"
CLOUDINARY_API_SECRET="<your cloudinary api secret>"
CLOUDINARY_URL="<your cloudinary url>"

3. Set up your front-end .env file

VITE_API_BASE_URL=<your backend URL>

4. Run the back-end development server

cd back-end
npm start

5. Run the front-end development server

cd front-end
npm run dev

๐Ÿ“ Project Structure

Frontend (/front-end)

src/
  โ”œโ”€โ”€ assets/ # Static files
  โ”œโ”€โ”€ components/
  โ”‚ โ”œโ”€โ”€ 3D-Backgrounds/ # WebGL-based animated backgrounds
  โ”‚ โ”œโ”€โ”€ AccountSettings/ # User profile and preference settings
  โ”‚ โ”œโ”€โ”€ HabitTracker/ # Core habit tracking routes
  โ”‚ โ”œโ”€โ”€ Homepage/ # Main dashboard routes
  โ”‚ โ”œโ”€โ”€ Landing/ # Landing page
  โ”‚ โ”œโ”€โ”€ Navbar/ # Navigation component
  โ”‚ โ””โ”€โ”€ Notfound/ # 404 page
  โ”œโ”€โ”€ CustomContexts/ # React context providers
  โ”œโ”€โ”€ CustomFunctions/ # Utility functions (cookies, AI, WebGL checks)
  โ”œโ”€โ”€ Desktop/ # Desktop-specific UI logic
  โ”œโ”€โ”€ Mobile/ # Mobile-specific UI logic
  App.jsx # Main app component and router
  main.jsx # React entry point
  app.scss # Global styles
  main.css # Tailwind/SCSS base styles

Backend (/back-end)

โ”œโ”€โ”€ **TESTS**/ # Test suite
โ”œโ”€โ”€ controllers/ # Route controllers
โ”œโ”€โ”€ db/ # DB config & seeders
โ”œโ”€โ”€ queries/ # SQL logic
โ”œโ”€โ”€ Utils/ # Helper functions
โ”œโ”€โ”€ validation/
โ”œโ”€โ”€ entryValidation.js # Checks extra query entries
โ”‚ โ”œโ”€โ”€ requireAuth.js # Old jsonwebtoken library
โ”‚ โ””โ”€โ”€ requireAuthv2.js # New Jose JWT library
index.js # Express server entry

๐Ÿš€ Deployment

  • You can deploy this app using:

    • Frontend โ†’ Vercel / Netlify

    • Backend โ†’ Vercel

npm run build # frontend
vercel deploy # or netlify deploy

๐Ÿงช Future Improvements

  • AI-augmented goal suggestions based on personality typing

  • Multi-language support

  • Voice-command-based habit logging

  • Gamified accountability partners

  • Real-time updates and offline-friendly habit tracking

  • Enhanced synchronization logic (ex: WebSocket updates)


๐Ÿ’ก Inspiration

Habbitly was built to help people build better habits without relying on gamified, competitive rewards that can backfire. Itโ€™s designed for users who want self-guided, introspective growth through behavioral insights and subtle motivation.


๐Ÿ“„ License

This project is licensed under the Creative Commons Attribution-NonCommercial 4.0 International License (CC BY-NC 4.0).

You may:

  • Use and modify the code for personal/non-commercial use.

  • Share the project with credit.

You may not:

  • Use it commercially without permission.

โžก๏ธ Read Full License

About

Use Habbitly for all your habit and goal tracking needs.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors