Petopia

Inspiration

The "Petopia" project (a suggested name for Pet's Store) was inspired by the rapid growth of the pet care market in Vietnam and the desire to apply modern web technologies to create a smooth and convenient online shopping experience. Noticing that many pet shops still rely on social media platforms, I wanted to build an independent, full-featured e-commerce solution. Referencing open-source projects on GitHub, especially MERN boilerplates, provided a solid foundation to get started.

What it does

Petopia is a complete e-commerce website for pet products, allowing users to:

Browse and search for products: View products by category, search by name, and filter by criteria such as brand and price.

Manage the shopping cart: Intuitively add, remove, and update the quantity of products in the cart.

Checkout process: Place orders through a simple checkout process, supporting popular payment methods like Cash on Delivery (COD) and QR code integration for Mobile Banking/Momo.

Account management: Users can register, log in, review their order history, and update their personal information.

Admin Dashboard: Administrators have a dedicated interface to manage products (add/edit/delete), orders, users, and blog content.

Blog and AI Chatbot: Provides useful articles on pet care and a planned chatbot for quick customer consultations.

How we built it

The project is built on the MERN (MongoDB, Express.js, React, Node.js) technology stack.

Backend: Built with Node.js and Express.js, creating a set of RESTful APIs to handle all business logic. User authentication is implemented using JSON Web Tokens (JWT), and passwords are securely hashed with bcrypt.js. In the initial phase, data was hardcoded in JavaScript files to focus on building the API and interface.

Frontend: The user interface was built with React. React Router is used for page navigation, and Redux Toolkit manages the global state of the application (such as user info, shopping cart, product lists), making data management consistent and predictable. Axios is used to communicate with the backend APIs.

Structure: The project is organized into two separate parts (client and server) to ensure a clear separation between the frontend and backend, making development and maintenance easier.

Challenges we ran into

Complex state management: Managing the state of the shopping cart, user login information, and data fetched from the API across the entire application was a challenge. Redux Toolkit helped solve this, but it required a well-planned structure of slices and reducers.

Designing the authentication flow: Building a secure authentication and authorization flow that clearly distinguishes between regular users and administrators (e.g., protecting admin-only APIs and routes) required close attention to detail.

Planning the data model: Although starting with hardcoded data, designing the data structure (schema) from the beginning to allow for an easy transition to MongoDB later was a problem that required careful consideration of the relationships between entities (Users, Products, Orders).

Accomplishments that we're proud of

Successfully building a complete MERN stack web application from start to finish.

Creating a well-structured, secure, and easily expandable backend API.

Developing a clean, responsive UI with a good user experience (UX) that simplifies the shopping process.

Completing a full e-commerce flow, from viewing products to successfully placing an order.

What we learned

The process of building this project provided many valuable lessons in full-stack web development:

A deep understanding of how the components of the MERN stack interact with each other.

Skills in managing React application state effectively with Redux Toolkit.

Best practices in designing and securing RESTful APIs.

The importance of planning and creating a Work Breakdown Structure before starting to code, even when working alone.

What's next for Petopia

Database Integration: Transition from hardcoded data to a real MongoDB database.

Finalize Payment Gateways: Fully integrate and test Momo and VNPAY QR payment gateways.

Develop AI Chatbot: Build and integrate a chatbot using AI services to provide 24/7 customer support.

Feature Expansion: Add advanced features such as product reviews, product recommendations based on purchase history, and a customer loyalty program.

Mobile Application: Explore the possibility of developing a mobile app for Petopia using React Native.

Built With

• cross-platform
• mern