Beer shop

Overview:

Software Engineering Immersive Course - Project-2 - Pair Coding Project - 2 days.

Brief:

It is a pair-coding hackaton-like training project. Aim of it - practice accessibility to public API, render information located there. It allows the user to access the APP and use API's information publicly. The project must have several components and a router that are used to render UI, according to instructions given.

Description:

This application was developed working with my classmate Joan Kalanzi. It is a 'hackaton"-like project, which was complete in 2 days time. This project uses a publicly accessible API of BrewDog Company, you can find more about it here. Using this project you can have a look at all sorts of beer produced and find out some more information about it, filter particular strength of beer of your choice and display a randomly selected one.

Functionality:

Browse through selection of beer, sort them, choose a random one.

Deployed project:

Beer shop

Tech used:

Insomnia - to access API structure.

CSS3 and Bulma framework - for styling.

JavsScript and React Library 17.0.2 - for rendering.

Sample screenshots:

Browse view with search dropdown bar

Single product view

Approach:

Build:

Create a router using "Browser router", "Switch" and "Route" from "react-router-dom". Create components, set up according paths to your switch routes.

Make sure, each component is imported correctly and has all desirable axios requests. Create state instances, to store particular data for rendering.

Work on front end implementation, using styling frameworks or/and CSS to layout data. Develop the idea of main image, display it, whilst handling errors.

Set particular ternary conditions, in order to display right information.

(for more detailed examples see "sample code")

Sample code:

Here we can see the structure of dropdown menu and its impact to render:

Firsl, "handleChange" uses the value of form options to take original data and converts it into a new array, which is then used in ternary conditions. If the new array is longer than 0 (has some information), that is what we use for rendering.

BeerCard here acts like a component here. It determines how every single white beer card will look like, and what interaction can be done with it.

Now let's take a look at BeerCard component:

It defines the structure of each white card used to display a beer.

* It uses props passed from the main core AllBeers component, without API request.
* Renders simple structure of BeerCard, which will be complemented by CSS.
* Each "card" is actually a link, which will lead you to a more broad description of each beer on a separate component page.

Short overview for styling:

This is my own example of SASS implementation. Completely custom CSS design, based on indentation leads me to deliver perfectly balanced UX when browsing.

* Hover gives it an inclusiveness and clickability, so as a transition of transformation.
* All layout is based on flex-box, essentially, allowing us to decide what is allocated where without heavy lifting.

Screen.Recording.2021-08-11.at.17.40.17.mov

Wins and challenges:

Wins

This project was a great practice using external API, using insomnia and accessing certain data from it and also learning how to use asynchronous functions.

Taking care of the biggest part of design, I learned SASS deeper. Great experience mixing styling framework with custom CSS also.

As this was a pair programming project, it was a sensational opportunity to be coding in a team, sometimes on one screen, oftenly keeping an eye on a partner's code. Wonderful experience!

Challenges

The most challenging part was applying certain ternary statements. Syntax errors were the milestone. Multiconditional approach was a quite complicated feature to implement, but at the end of the project it was done like expected to be.

Because of limited time, we had to restrain our MVP to a very few features delivered. Time management - an important challenge for this project, I believe, managed well.

Potential improvements:

Search by name or hops.

Ability to save some favourites (potential "basket").

Reorganising of code to have project rendering well on mobile devices.

Fixing bugs (when you click on random beer - it loads only once, you have to come back and do it again).

Fixing of layout (when you click on one beer - page does take just as much space as needed, leaving white field at the bottom).