The Whinst home page is the first thing users see once they log into the web app. It features functionality for users to create a new catalog and lists the previous catalogs users have created. This list of previous catalogs also features preview images that display the images from the respective catalogs. In this article, I’ll walk you through how I’m setting up this functionality on the homepage. Let’s dive in🚣🏾
How I’m building the home page🛠
As stated in the intro the home page has 3 main components. These are catalog creation, listing previously made catalogs and previews for the previously made catalogs. So far I’ve only worked on catalog creation and listing the catalogs. Part 2 of this article will be about the previews.
- Catalog creation: This was the simplest piece of functionality I added to the homepage. All I did was use Next.js link tags to create a link to the catalog creation page. I also added a plus icon from Tailwind icons to make the UI look a little pretty.
- Listing previously made catalogs: To add this functionality I first had to create some mock data because the backend and API aren’t yet set up, I did this by creating a simple array with the data I wanted to display. Once I created the array I used the map function to render the list of data objects.The code below is an example of how I did this.
const data = [{name: 'test1'color: 'blue'},{name: 'test2'color: 'red'}]
{
data.map(info =>
<>
<p>{info.name}</p>
</>
}
With these two pieces of functionality now set up, I’ve moved on to adding the catalog previews. I decided to write about this in a different article because it’s a little complicated and I haven’t yet completed it. Thanks for reading and see you in the next one🙏.