MNA Computer Manufacturer

Live Site: https://mna-computer-manufacturer.web.app
Server Repository: GitHub - mna-computer-manufacturer-server

---

🚀 Project Overview

MNA Computer Manufacturer is a robust, full-stack web application designed for a computer parts manufacturing and distribution business. The platform streamlines the process of selling, purchasing, and managing computer parts for both end-users and administrators. It features a modern, responsive UI, secure authentication, real-time order management, and a comprehensive admin dashboard.

---

🏆 Key Features

User Experience

• Authentication & Authorization:
  Secure login and registration using Google, GitHub, and email/password. Role-based access for Users and Admins.
• Profile Management:
  Users can update their profile information and view their order history.
• Product Catalog & Purchase:
  Browse a wide range of computer parts, view detailed product information, and place orders with minimum and available quantity validation.
• Order Management:
  Users can view, pay for, and cancel their orders. Payment is securely handled via Stripe integration.
• Reviews & Ratings:
  Users can submit reviews for products, enhancing trust and transparency.
• Responsive Design:
  Fully responsive UI built with Tailwind CSS and DaisyUI for seamless experience across devices.

Admin Experience

• Admin Dashboard:
  Powerful dashboard for managing products, orders, and users.
• Product Management:
  Add, update, and delete products with real-time updates.
• Order Management:
  View all orders, update shipment status, and delete orders if necessary.
• User Management:
  Promote users to admin, remove users, and monitor user activity.
• Analytics & Reporting:
  Visualize sales and user data with integrated charts and statistics.

Routing & Security

• Protected Routes:
  Dashboard, My Profile, and Purchase routes are secured and accessible only to authenticated users.
• JWT Authentication:
  Backend APIs are protected using JSON Web Tokens for secure data transactions.

Additional Features

• Blog Section:
  Dedicated blog route for FAQs and technical articles.
• My Portfolio:
  Personal portfolio section for showcasing developer information.
• Modern UI Components:
  Utilizes Swiper for carousels, React ChartJs-2 for analytics, and more.

---

🛠️ Technology Stack

Front-End

• React.js (SPA Framework)
• React Router Dom (Routing)
• Tailwind CSS & DaisyUI (Styling & Components)
• React FontAwesome, React Icons (Icons)
• Firebase (Authentication)
• React Firebase Hooks (Auth hooks)
• React Hook Form (Form management)
• React Toastify (Notifications)
• Stripe.js (Payment processing)
• Google Maps React, React Day Picker, React ChartJs-2, Swiper, React Query, Date FNS, React Helmet Async, react-countup, react-scroll-trigger (UI/UX enhancements)

Back-End

• Node.js & Express.js (Server & API)
• MongoDB (Database)
• JWT (Json Web Token) (Authentication)
• Stripe (Payment gateway)
• CORS, Dotenv (Security & Environment)

---

🔐 Demo Credentials

• Admin:
  Email: [email protected]
  Password: Admin92

• User:
  Email: [email protected]
  Password: Web123

---

📂 Project Structure

• Home: Landing page with featured products and company info.
• Blogs: Q&A and technical articles.
• Dashboard:
  • User: My Orders, My Profile, Add Review
  • Admin: Manage Products, Manage Orders, Manage Users, Add Product
• My Portfolio: Developer's portfolio and contact info.
• Purchase: Secure product purchase flow.
• Authentication: Login, Register, and Social Auth.

---

📢 Contribution & Feedback

Feel free to fork, contribute, or open issues for suggestions and improvements.
For any queries, contact via the portfolio section or raise an issue on GitHub.

---

Thank you for visiting MNA Computer Manufacturer!