.. | ||
public | ||
src | ||
.browserslistrc | ||
.editorconfig | ||
.eslintrc.js | ||
.gitignore | ||
index.html | ||
package-lock.json | ||
package.json | ||
README.md | ||
tsconfig.json | ||
tsconfig.node.json | ||
vite.config.ts |
YPM Beer (frontend)
A super-simple frontend for viewing and searching Beers from the PunkAPI.
Setup
Requirements
To run in development mode, you will need:
- node (v20>=)
Installing dependencies
To install the node dependencies required, run:
npm i
Running locally
To run in development mode, run:
npm run dev
The application should be accessable at:
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.