MangoMart

Overview

MangoMart is an e-commerce web application for ordering fresh mangoes online. Customers browse the mango catalogue, order and pay online, and admins manage users and review payments.

Problem

Mango production in Bangladesh is concentrated in the northern regions, while demand exists across the rest of the country, including the south and the cities, where locally grown mangoes are less available. Getting fresh mangoes from the producing regions to those buyers depends on whatever local markets happen to stock.

Solution

MangoMart is an online mango store built around that gap. A customer browses the mangoes on offer, sees the price and available quantity, orders, and pays online. Admins manage users and have a payment-history page.

Key features

• Browse the mango catalogue with prices and available quantity, and open a detail page for each mango
• Register and log in with Firebase authentication; the dashboard sits behind private routes
• Order mangoes and pay either by card (Stripe) or with SSLCommerz
• Customers see their own payment history
• Admin dashboard: promote or delete users, and a payment-history page
• Responsive design

Tech stack

• React
• Daisy UI
• Firebase
• Javascript
• MongoDB
• Tailwind CSS

Architecture & technical details

My role & contribution

Role: Team member: product idea, frontend and parts of the backend, working with a teammate

• Product idea: the initial idea and the regional mango-distribution problem it addresses came from me; I then worked with teammates to turn it into the project
• Frontend: the overall frontend implementation, including the home page, navigation bar, footer, mango product cards (price and attribute presentation) and product details pages
• Frontend: the visual design of the login and registration pages, including their background treatment, and UI/UX improvements across pages
• Frontend design approach: I kept the interface simple and based on familiar e-commerce patterns so the target audience could understand it without extra explanation
• Frontend maintenance: fixed several existing UI/UX bugs and improved consistency and usability across pages
• Authentication: worked on it jointly with a teammate, on both the frontend and the backend; it was not my work alone
• Backend: authentication-related work, storing and managing payment records, admin-side user management, some database management, and the API integration the frontend workflows needed
• Payments: a teammate built the main payment implementation (Stripe and SSLCommerz); my part was the related backend data management