Habit Tracker

Track, visualize, and improve your daily habits with a sleek, accessible, and responsive web app built using SvelteKit, TypeScript, and Tailwind CSS.

Features

• Add, edit, and delete daily habits
• Mark habits as completed for each day
• Visual progress chart
• Responsive, mobile-first design
• Light and dark mode
• Local storage for persistent data
• Modern UI with Tailwind CSS
• Social links in the footer
• Accessibility:
  • Keyboard navigation for all interactive elements
  • ARIA labels for tabs and navigation
  • High-contrast color modes

Screenshots

Tech Stack

• SvelteKit
• TypeScript
• Tailwind CSS
• Lucide Icons
• Chart.js

Getting Started

1. Clone the repository:

   git clone https://github.com/yourusername/habit-tracker-svkit.git
   cd habit-tracker-svkit
   

2. Install dependencies:

   npm install
   

3. Run the development server:

   npm run dev
   

4. Open http://localhost:5173 in your browser.

Project Structure

├── src/
│   ├── lib/
│   │   ├── components/         # Svelte components (HabitForm, HabitList, etc.)
│   │   └── stores/             # Svelte stores for state management
│   ├── routes/                 # SvelteKit routes (+page.svelte, etc.)
│   └── app.css                 # Global styles
├── static/                     # Static assets (favicon, etc.)
├── package.json
├── tailwind.config.ts
├── svelte.config.js
└── vite.config.ts

Get In Touch

     


_{Made by Cornelius Ardhani Yoga Pratama}