NM Store

Time to talk about another cool project of mine! This is basically my internship project. Originally, I was asked to design an e-commerce website. It came out really well, and I was so proud of it.

I had the chance to meet a moderator from Namma Flutter, a well-known community for Flutter enthusiasts based in Chennai. I was showcasing my website to him, and he liked it so much that he requested it for advertising the community merch. I was more than happy to help him out.

NM Store Cover Image

Planning

For the e-commerce website, I first looked into some existing examples. I got inspiration from various websites and decided to add animations as a bonus. This not only improved the website but also helped me explore something new and become more confident working with animations. I also planned and sketched out a sample logo for the first iteration.

For the second iteration, which I presented to the client, I mainly focused on modifying the landing page. This included updating the logo and adjusting the color scheme.

In both iterations, the following core sections were included:

• New Arrivals
• Best Sellers
• Catalog

Getting Started

After deciding on the final layout, it was time to choose the tech stack. Since this project focused mainly on front-end development, I used a simple stack:

• React
• Vite
• Motion
• Tailwind CSS

NM Store Tech Stack

After finalizing the stack, I started development. Once the hero section was completed, I moved on to the New Arrivals section, which included three primary categories: Women’s Section, Men’s Collection, and Accessories. Each category displayed the latest arrivals dynamically when selected.

Since this was my internship project, I knew it would often represent my primary work, so I was determined to put in my best effort and make a strong impression.

NM Store Hero Iterations

NM Store New Arrivals Section

NM Store Product Details

NM Store Catalog Section

Key Features

• Animated UI using Motion for smoother user experience
• Dynamic category filtering in the catalog section
• Real-time UI updates based on user selection
• Responsive design using Tailwind CSS
• Structured product sections like New Arrivals and Best Sellers

Workflow

I then worked on the remaining sections step by step. A key new element I explored in this project was animation, implemented using Motion. This gave me valuable experience working with something new and unfamiliar.

The Catalog section is one of the highlights of the website. It displays available items and includes a filter feature, allowing users to browse efficiently based on their preferences. The interface updates dynamically in real-time as users change their selections.

Similarly, I completed the other sections, ensuring consistency and usability throughout the website. Overall, this project helped me improve my technical skills and set a benchmark for the quality I aim to achieve in future projects.

Conclusion

The first iteration was completed within a week, and I was extremely happy with the outcome. It was exciting to realize that I was capable of building something of this quality, and it significantly boosted my confidence to take on more challenging projects.

I was especially proud when a moderator from the Namma Flutter community requested to use the website for showcasing their community merch. It was truly an honor and an experience I continue to take pride in.

NM Store Project Collage