49 lines
1.2 KiB
Markdown
49 lines
1.2 KiB
Markdown
|
# 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`.
|
||
|
|
|
||
|
|
## 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.
|