Toy Wala

🔹 Project Overview

Toy Wala is a full-stack e-commerce–style web application designed for toy sellers and buyers. The platform allows users to browse toys publicly, while enforcing authentication and authorization for viewing full product details and managing listings.

The application focuses on user ownership, secure data access, and a modern, responsive UI, ensuring that each user can only create, update, or delete their own products. Firebase Authentication is combined with backend authorization middleware to provide secure route protection and data integrity.

The homepage is visually rich and marketing-oriented, featuring:

• Hero slider showcasing featured toys

• Category-based toy sections

• Customer reviews and brand trust sections

• Promotional banners and curated collections
  This layout enhances user engagement while maintaining performance and clarity.

---

🔹 Key Features

👤 Authentication & Authorization

• Firebase Authentication with:

  • Email & password login

  • Google social login

• Backend authorization middleware ensures:

  • Only authenticated users can access protected routes

  • Users can edit or delete only their own products

• Protected routes for:

  • Add Toy

  • My Toys

  • Product management pages

---

🧸 Product Management

• Logged-in users can:

  • Add new toy products

  • Update existing toy details

  • Delete their own toy listings

• Product ownership validation enforced at the backend

• All product data securely stored in MongoDB

---

🔍 Product Browsing & Discovery

• Public access to toy listings

• Full product details require login

• Advanced frontend features:

  • Search functionality on all products

  • Two filtering options for product discovery

  • Initial limited product view for performance

  • “Show All” button to load full product list dynamically (frontend-controlled)

---

🎨 User Interface & Experience

• Fully responsive UI built with Tailwind CSS and DaisyUI

• Interactive homepage sections including:

  • Hero sliders and carousels (Swiper, React Awesome Slider)

  • Category-based toy showcases

  • Customer reviews & brand trust area

  • Promotional and featured toy sections

• Smooth animations using AOS for enhanced UX

• User feedback via SweetAlert notifications

---

🛠️ Tech Stack

Frontend

• React.js

• React Router

• Tailwind CSS

• DaisyUI

• Swiper

• React Awesome Slider

• AOS

• SweetAlert

Backend

• Node.js

• Express.js

• MongoDB

• Firebase Authentication

• Custom authorization middleware

---

🔹 Challenges & Solutions

🔴 Challenge 1: Ensuring Product Ownership Security

Problem:
Preventing users from editing or deleting products that do not belong to them was critical to avoid data misuse.

Solution:

• Implemented backend authorization middleware

• Matched authenticated user credentials with product owner data in MongoDB

• Restricted update and delete operations strictly to product owners
  This ensured strong data integrity and security across the platform.

---

🔴 Challenge 2: Protecting Sensitive Routes

Problem:
Pages like “Add Toy” and “My Toys” needed to be inaccessible to unauthenticated users.

Solution:

• Implemented protected routes on the frontend

• Added backend route guards for additional security

• Redirected unauthenticated users to login before accessing restricted pages
  This dual-layer protection reduced unauthorized access risks.

---

🔴 Challenge 3: Balancing Performance with Product Listing Size

Problem:
Loading all products at once affected performance and user experience.

Solution:

• Displayed a limited number of products initially

• Implemented a frontend-controlled “Show All” button

• Added search and filter options to help users find items quickly
  This approach improved perceived performance and usability.

---

🔴 Challenge 4: Creating a Marketing-Friendly Homepage

Problem:
The homepage needed to feel like a real commercial product, not just a CRUD app.

Solution:

• Designed a visually rich landing page with:

  • Hero banners

  • Category sections

  • Reviews and trust badges

  • Promotional blocks

• Used animations and sliders without sacrificing responsiveness
  This resulted in a professional, production-ready look suitable for real businesses.

---

🔹 Learning Outcomes

• Deepened understanding of full-stack authentication and authorization

• Practical experience enforcing backend data ownership

• Improved frontend performance optimization techniques

• Built a visually engaging, scalable marketplace UI

• Strengthened knowledge of Firebase + Express integration