After about a week and a half, I’m happy to say I’m done with the Whinst front end. I’ve so far added enough structure and functionality on the frontend to move on to building the backend. Because Whinst is a simple web app, the same similar components are what make up all the pages in it. In this article, I’ll walk you through how I built the Whinst frontend🚣🏾.
How I built the Whinst frontend🔨
As mentioned above, all the pages in the Whinst frontend are made up of the same similar components, some of which I already wrote about in the 2 previous articles. To keep this blog short and sweet I’ll mention and summarize the main components that make up the pages in the frontend:
Images: Images are probably the most important component in this web app because it is a digital catalog app. To get the best looking images I used the NextJs inbuilt Image tag which optimizes images displayed in the app. I placed these image tags into an outer div with the “relative” property which is used to contain and fit the image nicely. The code snippet below is of how this is done
<div className="relative">
<Image fill alt='' src="https://Images.com" />
</div>
Grids: This is another component that plays a major part in all the pages. The design and structure of the Whinst web app features several grids. To create these grids I used Tailwinds grid properties. The code snippet below is of how to create a simple 4-column grid with a small gap in between. Objects within the div tags will be placed in a 4-column grid.
<div className="grid grid-cols-4 gap-1" >
</div>
Responsive designs: This is another major component in the pages in the Whinst web app. This allows all the pages in the web app to look good on all device screen sizes. Making these pages responsive was not easy because of the grids and images they contain🙄. To make the pages responsive I used Tailwindcss breaking points which are points that define where different screen sizes start and end. The code snippet below shows how small, medium and large breakpoints for a simple div width are defined.
<div className="sm:w-12 md:w-20 lg:w-28">
</div>
With the frontend now complete I’ve moved onto the next part of the development plan which is learning Express, NodeJs and Postgresql before building the backend. Thanks for reading and see you in the next one🙏.