Case Study | Multivendor PithaMitha E-commerce Store

Introduction: The "Multivendor PithaMitha E-commerce Store" is a comprehensive e-commerce platform that enables users to buy and sell a variety of traditional pitha and sweet foods. This project is designed to support middle-class individuals in generating additional income amidst rising living costs. By providing a marketplace for homemade and artisanal sweet foods, this platform fosters a community-driven economy and preserves cultural culinary traditions. The project leverages modern web development technologies to offer a seamless and efficient user experience, ensuring that sellers can easily manage their products and buyers can find their favorite pithas effortlessly.

Technologies Used:

Frontend:

• React: For building the user interface.
• Next.js: For server-side rendering and static site generation.
• TypeScript: For type safety and enhanced development experience.
• Redux & Redux Toolkit: For efficient state management.
• Material-UI: For UI components and styling.
• SCSS: For custom styles and responsive design.
• Axios: For making HTTP requests to the backend.

Backend:

• Strapi: For content management and serving as the backend API.
• Node.js: For running the server-side code.
• PostgreSQL: For database management and storage.
• JWT: For secure user authentication and authorization.
• Vercel: For deploying the Next.js frontend.
• Render: For deploying the Strapi backend.

Design and Development Process:

Approach: The design and development of the Multivendor PithaMitha E-commerce Store focused on creating a scalable, user-friendly, and maintainable platform that caters to both buyers and sellers. The primary goal was to ensure a seamless user experience while incorporating features that enhance the overall functionality and performance of the application.

Design Patterns:

Atomic Design Pattern:

• Atoms: The smallest building blocks, such as buttons, inputs, and labels, were designed to be reusable and consistent across the application.
• Molecules: Combinations of atoms, such as input fields with labels, to form more complex components.
• Organisms: Assemblies of molecules and atoms to create distinct sections of the application, like product cards and navigation bars.
• Templates: Page-level components that define the overall structure and layout, incorporating organisms and molecules.
• Pages: Specific instances of templates with real content and data, forming the actual web pages users interact with.

Development Process:

1. Project Conceptualization:

• This project was initiated based on my personal decision to create a comprehensive portfolio project. I aimed to develop a multivendor e-commerce platform where users can buy and sell Pitha and Mitha food items.

2. UI/UX Design:

• After deciding on the project type, I conducted extensive research on UI/UX designs using platforms like Google, Figma, Behance, and Dribbble. Eventually, I chose a Figma design as the primary reference. Instead of following it exactly, I combined elements from the Figma design, my own ideas, and other inspirations to create a unique design.
• Used Material-UI for consistent and responsive UI components.

Challenges and Solutions:

Challenge 1: Learning New Technologies

Solution: Before starting this project, I had a solid understanding of React, but I was unfamiliar with Next.js, TypeScript, Redux, and Strapi. Learning these new technologies was a significant challenge. I tackled this by dedicating time to study each technology through research from google, youtube, documentation, chatgpt and practice projects. I gradually integrated these technologies into the project, starting with basic implementations and progressively enhancing them. This learning process was crucial for the project's success and significantly broadened my skill set.

Challenge 2: Creating and Managing Data Relationships

Solution: Managing relationships between different data models (Product, Cart, Orders, Address, User, Wishlist) was complex for me. With Strapi as the backend, I defined these relationships carefully, ensuring data integrity and efficient data retrieval. For example, linking users to their respective addresses and products to their orders required a deep understanding of relational data management. I took special care to establish these relationships correctly and tested them extensively to ensure they worked as expected. The guidance and support I received were invaluable in overcoming this challenge.

Challenge 3: Implementing the Project with TypeScript

Solution: Implementing the entire project using TypeScript was a significant challenge. TypeScript's strict type-checking and need for defining interfaces added complexity, but it also brought many benefits, such as enhanced code quality and reduced runtime errors. I focused on learning TypeScript fundamentals and gradually integrated it into the project. By defining clear interfaces and types, I ensured that the code was maintainable and less prone to bugs. This approach not only improved the robustness of the application but also enhanced my proficiency in TypeScript.

By overcoming these challenges, I was able to develop a robust, scalable, and user-friendly multivendor e-commerce platform. The experience significantly enhanced my technical skills and problem-solving abilities, preparing me for future projects and professional growth.

Source Code and Live Demo:

Explore the source code on GitHub: Source Code

Check out the live demo: Live Demo

Conclusion:

This project was a significant learning journey and a valuable experience in building a full-fledged multivendor e-commerce platform. Through the process, I gained proficiency in several new technologies and tools, including Next.js, TypeScript, Redux, and Strapi, which have broadened my development skills and knowledge.

Key takeaways from this project include:

• Technical Growth: Learning and implementing Next.js for server-side rendering and Strapi as a headless CMS significantly improved my backend and frontend integration skills.
• Data Relationships: Understanding and managing complex data relationships was a crucial challenge that enhanced my ability to structure and relate data effectively.
• TypeScript Mastery: Developing the entire application in TypeScript provided me with a deeper understanding of type safety and robust coding practices.
• API Integration: The experience with Strapi API integration enriched my ability to work with various APIs and improve the overall functionality of the application.
• JWT Authentication: Implementing JWT for secure user authentication strengthened my knowledge of secure authentication methods.

This project not only expanded my technical capabilities but also reinforced the importance of thorough planning, continuous learning, and problem-solving in software development. It provided a solid foundation for future projects and opened up new opportunities for professional growth.