Client
The database is created, the API is functional… All that remains is to create a Client that will display the data retrieved from the database via the API. To achieve this, the Client will be developed in React, and will use Bootstrap v5 for the design.
Conception
A user accessing the web Client must be able to:
- See the full list of products, sorted from most popular to least popular;
- Search for one or multiple products based on keywords or product ranking using a search bar;
- Sort the list of products according to several criteria (rank, name, rating…);
- If possible, have access to a button that redirects to the product page on Product Hunt.
Components
React uses Components, which are independent and reusable bits of code. This makes building UIs way easier, since the UI is broken down into multiple individual pieces merged in a parent component, forming the final UI.
Each functionality of the site is divided into components: the pagination, the search bar, the list of posts contained in a table etc… 📃 See the Components →
Design
For the design, Bootstrap v5 will be used since it allows to quickly and simply integrate designs on a website. In addition to Bootstrap, a free Boostrap theme Bootswatch and a list of free icons react-icons are used as well.
Final version
Feel free to take a look at the final version of the Web Client:
Dockerize it
All that’s left to do is to install the Client build inside an Nginx server. 📃 See Dockerfile →
The Nginx configuration is modified to enable HTTP to HTTPS redirection, so that users have access to a secure website. 📃 See Nginx configuration file →