Habitude

habitude is a habit 🔁 tracking 📝 application that helps people stick to new daily habits, such as working out, reading, meditating and more.

Table of Contents

• Overview
  • Features
  • Technologies and Tools
  • Screenshots
• Setup the Development Environment
  • Install the required dependencies
  • Compile and Hot-Reload for Development
  • Lint and format

Overview

Features

• Navigation: users are able to navigate between days to view the habits they completed on any specific day.
• Habit List: displays all daily habits. Users are able to mark or unmark them as completed in the specific day's view.
• Habit Management: users are able to edit, stop, and delete habits. Editing a habit changes the habit's name. Stopping a habit removes it from the habit list from that point forward. Deleting a habit removes it from the habit list and deletes all of its daily records.
• Dynamic Routing: users are able to navigate between days by entering specific date in the URL (e.g. /day/2025-05-10).
• Dark Mode: users are able to switch between light/dark theme modes.
• Responsive Design: ensuring a seamless user experience across all devices.

Technologies and Tools

• 🖼️ Framework: Vue
• 😎 Styling: Tailwind CSS
• 🗺️ Routing: Vue Router
• 🍍 State Management: Pinia, VueUse
• ✨ Code Quality: ESLint, Stylelint, Prettier
• 🏗️ Build Tool: Vite

Screenshots

Setup the Development Environment

Install the required dependencies

npm install

Compile and Hot-Reload for Development

npm run dev

Lint and format

npm run lint

npm run lint:style

npm run format