tatianeaguirres / beer-lovers

🍺 Visual implementation of Brewdog's API made with Angular, TypeScript and Sass.

🍺 Beer Lovers

Don't forget to give this project a star. ⭐

About

Beer Lovers is a website where you can find information on great beers by type or food pairing. You may even be surprised by our beer expert, who will choose the ideal beer for you.

This project has no commercial or profitable purpose. It uses The Punk API, which is a free and open-source API with Brewdog's catalogue of beer.

This website was made by Tatiane Aguirres as a fan's work to improve her Angular skills. Tatiane is a Front-end Developer Specialized in Visual and Web Accessibility.

Tech Stack

• TypeScript as the programming language
• Angular 9 as the TypeScript-based framework
• Sass as the preprocessor scripting language
• Jasmine as the testing framework
• Karma as the testing runner
• Protractor as the end-to-end test framework
• TSLint as the static code analysis tool
• Wave as the accessibility tool
• GitHub Actions as the CI/CD tool
• Heroku as the cloud platform to publish the app
• Gitmoji as the emoji guide for GitHub commit messages

Requirements

• NodeJS 12+
• Angular CLI 9.1.7

Running the application

Development server

First, install all the dependencies with: $ npm install

Run $ npm run dev or $ ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Running the tests

Unit tests

Run $ npm run test or $ ng test to execute the unit tests via Karma.

End-to-end tests

Run $ npm run e2e or $ ng e2e to execute the end-to-end tests via Protractor.

Lint

Run $ npm run lint or $ ng lint to execute the lint via TSLint.

Troubleshooting

If you had any problem trying to run the application or the tests make sure that you have met the following requirements:

Node version: v12.8.0
Npm version: v6.14.5

Technical Decisions

• Mobile-first.
• Fully responsive app for all screen sizes.
• App accessible to all users, including keyboard users and screen reader users.
• CSS structure based on Matthias Ott's post.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.

License

The code is available under the MIT license.