https://github.com/jdmiguel/the_random_beer_app

Simple app developed with React Hooks and Material-UI
https://github.com/jdmiguel/the_random_beer_app

material-ui react react-hooks

Last synced: about 4 hours ago
JSON representation

Simple app developed with React Hooks and Material-UI

• Host: GitHub
• URL: https://github.com/jdmiguel/the_random_beer_app
• Owner: jdmiguel
• Created: 2020-02-07T19:00:35.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-01-05T06:42:33.000Z (almost 2 years ago)
• Last Synced: 2023-03-04T01:37:34.714Z (over 1 year ago)
• Topics: material-ui, react, react-hooks
• Language: JavaScript
• Homepage: http://jdmiguel.com/random_beer_app/
• Size: 4.08 MB
• Stars: 1
• Watchers: 1
• Forks: 1
• Open Issues: 21
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
## REACT APPLICATION TO DISPLAY RANDOM BEERS AND THEIR REGARDING BREWERIES

### TECHNOLOGIES

- **CREATE-REACT-APP**

- **YARN**

- **REACT HOOKS**

- **MATERIAL-UI**

- **AXIOS**

### DEVELOPMENT

First, I used CREATE-REACT-APP for the scaffolding of this project, YARN for installing packages and REACT as framework.

Regarding to development, I implemented three main components:

- APP: Parent component which is in charge of handling the logic related to using the services to get beer and brewery data

  and showing main or brewery detail screen.

- MAINSCREEN: Children component of App which shows random beer data.

- BREWERYSCREEN: Children component of App which shows specific brewery data.

On the other hand, I implemented small core components such as Button, Link, Description and Title. They are used in Main and Brewery screen.

To implement services, I used Axios library.

Regarding to styles I used MATERIAL-UI (as components library) and CSS.

### CORS

Using this database [BREWERYDB](https://www.brewerydb.com/developers/docs/endpoint/beer-index) I faced CORS issues. To solve it I used this chrome extension [Allow CORS](https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf)