Jay

Heres the link to the live version of the website hosted on Netlify, currently its using static content with 3 pages - home, product listing and product detailed page. In this post, I will cover only the front-end part. There are 3 key elements that I have used for creating this website:

• React
• Tailwind CSS
• Ant Design

React

React was an obvious choice for me since I have been working on it for quite a whlile now. Apart from that, React has a strong and supportive community, it has a wide variety of compatible libraries and tools. Finally, the dev-exp is also very good in terms of learning and performance.

Tailwind CSS

Tailwind CSS(TWC) is a utility-first CSS framework TWC gives us pre-build CSS classes that can be used and combined to achieve the design that is required. There is a learning curve for TWC but once you get a hang of it it becomes really easy. For example: If you want to create an element that has background-color of gray, has rounded edges, and padding of 2rem on the right and left, in using TWC we'd write something like this in React -

1className="bg-gray-100 rounded-xl px-8"

Ant Design

Using AntD was a personal choice since I was bored looking at the same old material design themes. Don't get me wrong Material Design(and Material UI) is fantastic and since it is so good most of the websites that we come across use it, and that makes it boring(in my opinon). This is where AntD comes in, it has a wide variety of components library to choose from and the documentation is also quite thorough.

Final thoughts

Even though this is not a complete website I learned a lot, right from using a new technology to timely delivery of commitments. Few screens are missing like the 'compare with' which I will work on if time permits. Thanks for reading this post, cheers!