# YPM Beer (frontend)

A super-simple frontend for viewing and searching Beers from the [PunkAPI](https://punkapi.com/).

## Setup

### Requirements

To run in development mode, you will need:
* [node](https://nodejs.org/en) (v20>=)

### Installing dependencies
To install the node dependencies required, run:
```sh
npm i
```

### Running locally
To run in development mode, run:
```sh
npm run dev
```

The application should be accessable at:
```sh
http://localhost:3000
```

### Configuring
The app should already be configured to connect to the backend once it is running, but the URL can be modified at `src/utils/configuration.ts`.

### Testing
To run the unit tests, run:
```sh
npm run test
```

## Technology
To create this project, the following was used:
* Node 20
* Vite & Vitest
* Vue3 (with composition API & TypeScript & VueRouter)
* Vuetify for the UI framework
* Vue-Query (Tanstack Query) for communicating with the backend.

## To improve:
### UI
The UI isn't the best at all, it's somewhat responsive but data display should be a lot better.

## Testing
If I had more time, I would have loved to use `Testing-Library` to add some tests for the frontend.

## Auth Handling
Right now, it uses very simple cookie auth - which can be a little hard to manage.