Skip to content

mitraarka27/habify

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

1 Commit
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Habify

Habify is a modern habit tracking Progressive Web App (PWA) that helps you build and maintain positive habits. With a sleek dark theme interface, intuitive controls, and powerful tracking features, Habify makes it easy to stay on top of your daily routines.

Features

  • Habit Tracking: Create and track your daily habits with ease
  • Progress Visualization: View your progress with beautiful charts and statistics
  • Streak Tracking: Build momentum with streak counting and rewards
  • Weekly Summary: Get insights into your habit performance over time
  • Dark Theme: Easy on the eyes with a modern dark interface
  • Responsive Design: Works on desktop, tablet, and mobile devices
  • Offline Support: Use the app even without an internet connection
  • Backup & Restore: Export and import your habit data
  • PWA Support: Install on your device for a native app-like experience

Getting Started

Prerequisites

  • A modern web browser (Chrome, Firefox, Safari, Edge)

Installation

  1. Visit the live app at [your-deployment-url]
  2. For the best experience, install the PWA:
    • On Chrome/Edge: Click the install icon in the address bar
    • On iOS: Tap the share button and select "Add to Home Screen"
    • On Android: Tap the menu button and select "Add to Home Screen"

Development Setup

If you want to run the app locally or contribute to development:

  1. Clone this repository
git clone https://github.com/yourusername/habify.git
cd habify
  1. Install dependencies
npm install
  1. Start the development server
python -m http.server 8000
  1. Open your browser and navigate to http://localhost:8000

Building for Production

To build the app for production:

npm run build

This will create a dist directory with optimized files ready for deployment.

Technologies Used

  • HTML5, CSS3, JavaScript (ES6+)
  • Chart.js for data visualization
  • Local Storage for data persistence
  • Service Workers for offline functionality

License

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

Acknowledgments

  • Icons from Font Awesome
  • Color palette inspired by modern dark UI trends

Deployment

Habify can be deployed to various static hosting platforms:

Firebase Hosting

  1. Install Firebase CLI: npm install -g firebase-tools
  2. Login to Firebase: firebase login
  3. Initialize Firebase: firebase init (select Hosting)
  4. Deploy: npm run deploy:firebase

Netlify

  1. Install Netlify CLI: npm install -g netlify-cli
  2. Login to Netlify: netlify login
  3. Deploy: netlify deploy --prod

GitHub Pages

  1. Push your code to GitHub
  2. Enable GitHub Actions in your repository
  3. The workflow in .github/workflows/deploy.yml will automatically deploy to GitHub Pages

PWA Features

Habify is a Progressive Web App (PWA) that can be installed on your device:

  • Offline Support: Works without an internet connection
  • Installable: Can be added to your home screen
  • Responsive: Works on all devices and screen sizes
  • Fast: Optimized for performance

To install Habify on your device:

  1. Open the app in Chrome, Edge, or Safari
  2. Look for the "Add to Home Screen" or "Install" option in your browser menu
  3. Follow the prompts to install

How It Works

  • Add a habit: Enter a name and how many times per week you want to do it
  • Track progress: The progress bar shows how close you are to your weekly goal
  • Build streaks: Each time you complete a habit, your streak increases
  • Earn points: Gain points for consistency and maintaining streaks
  • View insights: Check the Weekly Summary dashboard for charts and metrics

Project Structure

  • index.html - Main HTML structure
  • styles.css - CSS styling
  • app.js - Main application logic
  • habitModel.js - Data model for habits
  • weeklySummary.js - Weekly dashboard functionality
  • historyView.js - 30-day history view
  • settings.js - User settings
  • notifications.js - Notification system
  • backupRestore.js - Data backup and restore functionality
  • serviceWorker.js - PWA offline functionality
  • manifest.json - PWA configuration

Created with ❤️ as a modern habit tracking solution.

About

A gamified habit tracking app

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors