Habits App Development
Evelina Satkauskė
Habits App
A modern, mobile-first habit tracking application built with Vue 3, TypeScript, and Vite. Track your daily habits, monitor progress, and build consistent routines.
Features
📱 Mobile-first responsive design
📅 Weekly habit tracking
📆 Calendar date picker for easy navigation
✅ Mark habits as complete/incomplete
⏹️ Stop/resume habits
🗑️ Delete habits with confirmation
📊 View past habits and progress
🚫 Prevention of future date entries
💾 Local storage persistence
Screenshots
Prerequisites
Before you begin, ensure you have installed:
Node.js (v14.0.0 or higher)
npm (usually comes with Node.js)
Installation
Clone the repository:
Install dependencies:
Development
To start the development server:
Testing
Run unit tests with Vitest:
End-to-End Testing with Playwright
To run Playwright end-to-end tests, use:
Make sure your development server is running before executing the tests.
Configuration
Create a
.env file in the root directory with the following content:This URL should match your development server address. The default is set to Vite's default port.
Building for Production
To create a production build:
To preview the production build:
Tech Stack
Vue 3 - Frontend framework
TypeScript - Type safety
Vite - Build tool
Pinia - State management
Vue Router - Routing
Tailwind CSS - Styling
Headless UI - UI components
Hero Icons - Icons
date-fns - Date utilities
Vitest - Unit testing
Playwright - End-to-end testing
Like this project
Posted Sep 17, 2025
Developed a mobile-first habit tracking app using Vue 3 and TypeScript.
Likes
0
Views
3
