BeerBuddy is a website where you can find, vote on, and review beers. The website displays craft beers from the US, and uses a dataset from Kaggle. The website is made with a frontend in React and a backend in GraphQL. The backend uses a MySQL database, and is set up to use SQLite as well.
If you are using NTNU network or are connected to its VPN you can access the website here. If not, you can run the project locally.
To be able to use the website you must first register to the website. The first time you visit the website you will be prompted to the login page. You only need to register your name, and then a unique ID is generated automatically. Your user will be saved in the database, as well as the localstorage. The userdata is put in localstorage as to ensure that the user is logged in when navigating the page. This will then be used to identify you and your actions.
When you have logged in you will be able to see the main page. Here you will see a list of beers. You can vote on a beer by clicking the arrow up or down.
Here you can search for beers, alter filters to be able to find just the type of beer you're after and sort the beers by popularity or name.
When you click on a beer you are able to see more information about it. Here you may find information about the brewery, and some detailed information about it's alcohol percentage and IBU. You are also to be able to vote it up or down, and you're able to comment. You can also see other people's comments and delete your own comments.
To set up the backend and database, please go to the backend documentation.
To set up the frontend, please go to the frontend documentation.
- React with Typescript - Framework and library for building the user interface, using Typescript for type safety
- Eslint - A linter for identifying and reporting on patterns in Typescript
- Material UI - A React UI framework for building responsive and accessible websites
- Antd - A React UI library for building responsive and accessible websites
- Vitest - A test runner for React applications
- Playwright - A library for testing web applications
- React infinite scroll A library for infinite scrolling
- UUID A library for generating unique IDs
- React router dom - A library for routing in React
- Vite - A build tool for React
- Express - A server framework for node js.
- Typescript - A typed superset of JavaScript that compiles to plain JavaScript.
- Graphql & express-graphql - A query language for APIs and a server for running queries.
- SQLite - A relational database for storing data
- MySQL - A relational database for storing data, suitable for larger datasets
- Sequelize - A promise-based Node.js ORM for Postgres, MySQL, MariaDB, SQLite and Microsoft SQL Server.
- Node-cache & Crypto - A library for caching data and hashing data
We used Vitest together with React, Typescript and ESlint as it was a requirement for the course. But it is also a good choice for testing React applications. It is easy to set up and use, and it is fast. It also has a good documentation.
We used Antd and Material UI for styling. We used Antd for most of the components, and used MUI where the components from Antd were not accessible enough.
Playwright was used for testing the end to end functionality of the website. It is a good choice for testing web applications, and it is easy to use. It is also fast and has a good documentation.
And lastly React infinite scroll and UUID was used for infinite scrolling and generating unique IDs.
We used express and typescript as a server framework for Node JS. It is a good choice for building a server and many of us had experience with it from before. It is also easy to use and has a good documentation.
We used Express instead of Apollo Server as it is more lightweight and therefore more sustainable. Apollo includes a lot of features that we did not need such as subscriptions, tracing, cloud integration and so on. This means a lot of additional NPM packages we dont need, which is unsustainable. You can read more about this here
The other libraries we have we explained more on why we used in sustainability documentation.
To test the frontend, please go to the frontend documentation. The backend and API are implicitly tested through the frontend tests.
If you want to learn about the measures taken to ensure a sustainable application, please go to the sustainability documentation.
If you want to learn about how we have ensured that our website is accessible to as many as possible, please go to the accessibility documentation.
If you want to learn about how we have fulfilled the requirements for the project, please go to the requirements documentation.
This project was developed as a part of the course IT2810 - Web Development at NTNU during the autumn of 2023.
The project is developed by a group of four students and we have used the following conventions for contribution: Contribution
The contributors are:
- Sondre Alfnes
- Erik Menkin Lysfjord
- Frederik Andreas Brunvoll Farstad
- Markus Aleksander Råkil Johansen