Let’s build a full stack UK weather app using Node + React Part 3: UI

Code example in this article can be found in my Github page.

In part 1 we scaffolded the weather app with Node as back end and React as front end. In part 2 invalid input errors were handled using try… catch. In part 3, we are going to make the application prettier and a truly reusable component. In order to do this, we are going to take the following steps:

1. install Bulma package in the application, modify HTML elements to use Bulma classes,
2. include free SVG icons from Font Awesome,
3. include some other free icons,
4. add custom styles,
5. responsive design

Include Bulma in the application

Bulma is a free, open source CSS framework based on Flexbox. A few key points for choosing Bulma are: 1. it is lightweight, 2. CSS (SCSS) only, no JS, 3. Flexbox grid, 4. Modular components. Check their official website to have a deeper look.

Now I assume you are in the root folder: full-stack-weather-app, let’s run the following commands in terminal:

cd frontend
npm install bulma
npm install node-sass