Aiyara

This website was developed at the request of one of my college teachers. It functions as an online platform for a local flower and decoration business. Its primary goal is to showcase floral products such as garlands, bouquets, and decorative items, while allowing customers to view products and place orders accordingly. This was a collaborative project, and unlike my other projects, I contributed to it as a full-stack developer.

Aiyara Cover Image

Requirements Analysis

The client’s requirements were straightforward: a website that showcased products, allowed sellers to update products and prices, and enabled customers to place orders.

Initially, the plan was to design the website with only static functionality, but this didn’t sit right with me. I suggested making the website more dynamic to improve the overall user experience and avoid limitations of static sites such as limited interactivity and the lack of server-side processing.

After discussion, the team agreed, and the following core sections were finalized:

• Home Page
• Categories
• Gallery
• Contact

Additionally, a page translation feature was included to display content in Tamil, making the website more accessible for non-English speakers.

With the requirements finalized and roles defined, the project was ready to move into development.

Getting started

As mentioned earlier, my role in this project was that of a full-stack developer. Since the UI was being designed by another person, it felt like uncharted territory for me.

After reviewing the requirements, I decided to use a widely adopted tech stack consisting of:

• Next.js
• Tailwind CSS
• MongoDB
• Node.js

I chose MongoDB for its flexibility and simple NoSQL structure, which made it easier to implement CRUD (Create, Read, Update, Delete) functionality for vendors.

I began by structuring the overall layout of the website, starting with the hero section that introduced the business and its products. On the homepage, I also added a section for best-selling products, along with a search feature and a navigation bar to improve usability.

Since I had advocated for building the platform as a dynamic website, I was determined to put in my best effort to ensure a successful outcome.

Aiyara Tech Stack

Aiyara Hero Section

Workflow

As someone whose primary area of expertise is UI/UX, I typically focus more on the design aspects of the projects I work on. However, in this case, my role was centered around improving the overall functionality of the website and making it flexible and user-friendly.

This experience felt quite new to me, understanding how each component worked, managing connections between different parts of the application, and working with APIs and backend logic.

Throughout the process, I gained a deeper understanding of the technologies in the stack and became more comfortable using them. Taking the time to understand the application flow and connect the different components made the entire development process a valuable learning experience.

Aiyara Product Page

Conclusion

The website was completed within the allotted time, and the client was satisfied with the final result. As one of my early ventures into full-stack development, I believe I did a fairly decent job.

This project was a great opportunity to become familiar with new concepts and tools. It also provided valuable experience collaborating with another developer who had a similar area of expertise.

Overall, this project helped improve my understanding of backend development, and I look forward to working on more projects like this in the future.

Aiyara Final Collage