# Table of Contents
1. [Developer Setup Guide](#developer-setup-guide)
2. [Modify the app](#modify-the-app)
3. [Test the PWA locally](#test-the-pwa-locally)
4. [Commit & Push](#commit--push)

## Developer Setup Guide

### Project Structure

The project follows a Vue.js 3 architecture with the following key directories:

```
src/
├── assets/          # Static assets
├── components/      # Reusable Vue components
├── services/        # Business logic and API services
├── store/           # Vuex 4 state management
├── utils/           # Utility functions
├── views/           # Page-level components
├── router/          # Vue Router configuration
└── App.vue          # Main application component
```

## Prerequisites

- Node.js (LTS version recommended)
- npm (comes with Node.js)

## Installation

```bash
npm install
```

## Development Server

```bash
npm run dev
```

This will start the development server with hot module replacement. The application is built using Vite, which provides:

- Fast cold start
- Instant HMR
- Optimized build process
- Modern ES module support

## Development Workflow

1. **State Management**: Use Vuex 4 for state management. All state should be handled through the store in `src/store/`.
2. **Components**: Create reusable components in `src/components/`. Use Vue 3 Composition API for component logic.
3. **Routing**: Define routes in `src/router/index.js` using Vue Router 4.
4. **Styling**: Use Tailwind CSS for styling. Additional styles can be added in `src/assets/styles/`.
5. **Services**: Place business logic and external API calls in `src/services/`.
6. **Utils**: Common utility functions should be placed in `src/utils/`.

### Modify the app
Make code changes...

### Test the PWA locally
Open it in your browser:
[http://localhost:8080/](http://localhost:8080/)

### Commit & Push
Stage changes, commit and push
```bash
git add .
git commit -m 'My cool feature'
git push
```