shanibider/anastacia-ecommerce

Full-Stack E-commerce website.

Comprehensive MERN E-commerce React Website 🖥👜

Live Demo: Explore the live website.🖥

A comprehensive feature-rich e-commerce website developed as a server-client React application, powered by the:

MERN (MongoDB, Express.js, React.js, Node.js) stack. 💼

My server-client React application leverages a comprehensive stack of JavaScript, HTML, and CSS technologies
to deliver a seamless user experience. Following established React application structures, including routing, state management, and component-based architecture, ensures scalability and maintainability. Emphasizing responsive design, the application guarantees optimal display across diverse devices.

With Firebase powering our secure user authentication mechanism, data confidentiality is maintained through HTTP/S protocols. Moreover, our robust backend comprises a blend of Firebase database🔐 and MongoDB , ensuring efficient data storage and management. Integration with the API facilitates secure transactions, providing users with a seamless shopping experience.

Technologies Used 🏆

MERN Stack:

• MongoDB for efficient data storage.
• Express.js for robust server-side development.
• React.js for interactive and dynamic user interfaces.
• Node.js for scalable and efficient server-side execution.

Firebase:

• Utilized for secure user authentication and real-time database functionalities.

HTTP/S protocols:

• Axios
• AJAX
• Fetch API

PayPal API:

• Integrated for secure and reliable payment processing.

HTML, CSS, JavaScript:

• Fundamentals of frontend development, ensuring a polished user experience.

Responsive Design Principles:

• Implemented to ensure seamless viewing experiences across various devices.

Integration between frontend and backend 📤📥 -

Frontend (React) and backend (Node.js) integration in a MERN stack application involves the frontend making HTTP requests to specific API endpoints defined in the backend routes. These endpoints are implemented in the backend to handle incoming requests, interact with the database, and return appropriate responses to the frontend. This allows for seamless communication between the frontend and backend components, enabling the development of dynamic and interactive web applications.

Full-stack development 🏅

This project demonstrates proficiency in full-stack development, including frontend UI/UX design, backend API development, database management, and integration with external services. It showcases the ability to work with a diverse set of technologies and libraries to build a scalable and robust web application.

Key Features 🎯

• Home Page:

  • Lists products to browse and explore.

• Detailed Product View:

  • Provides in-depth information about a selected product.

• Product Categories:

  • Categorizes products for easy navigation.

• Shopping Cart:

  • Allows users to add and manage items in their cart.

• Order Processing with PayPal:

  • Securely handles payment processing using the PayPal API for demo purposes.

• Secure User Registration and Login:

  • Ensures a safe and secure user authentication system.

• Admin Functionalities:

  • Manages 'Products' and 'Orders' lists
  • Features a dashboard displaying real-time metrics: registered users, order count, and financial performance through total money orders.
  • Enables the creation, editing, and deletion of products.

• User Functionalities:

  • Accesses order history.
  • Edits user profile.

• About The Team Page:

  • Provides information about the development team.

The application follows these key patterns 🏆 -

THe architecture focuses on structured state management, components, and effective handling of side effects and navigation in a React app.

1. 🚀State Management:

   • Uses useReducer for organized state management.

2. 🚀Global State:

   • Manages global state for properties like cart, userInfo, loading, and error.

3. 🚀Side Effects:

   • Handles side effects, such as data fetching, with useEffect.

4. 🚀Component Structure:

   • Organizes the app into modular components, promoting a component-based architecture.

5. 🚀React Router:

   • Implements React Router for navigation.

6. 🚀Conditional Rendering:

   • Conditionally displays UI elements based on the application's state.

7. 🚀Authentication Handling:

   • Manages user authentication through global state.

8. 🚀Middleware (logger):

   • Uses a middleware function (logger) for state change logging.

9. 🚀RESTful API Calls:

   • Utilizes Axios for making API calls to a backend server.

Ecommerce Website Preview :

Demo Website

👉 Demo :

React.demo.mp4

Home Page

Product out of stock alert

Detailed Product View

Shopping Cart

Preview order

Place an order via PayPal API:

Place order

Checkout steps - shipping

Checkout steps - payment method

Place an order with demo user via PayPal

Paid order

User functionality:

User order history

User edit profile

Admin functionality:

Admin dashboard displaying real-time metrics: registered users, order count, and financial performance through total money orders

Products list

Edit product

All users orders list

Search bar

about us page

Spinner Component showing the loading state

Setup Instructions

1. Clone the repository: git clone [repository_url]
2. Set up the MongoDB database and Firebase authentication.
3. Configure environment variables.
4. Run Backend-

$ cd our-website
$ cd backend
$ npm i
$ npm start

5. Run Frontend-

open new terminal

$ cd our-website
$ cd frontend
$ npm i
$ npm start

Seed Users and Products (backend)- Run this on browser: http://localhost:5000/api/seed (Will returns admin email, password and sample products).

Admin Login- Run http://localhost:3000/signin

🔗 Connect with me 👩‍💻😊

Copyright © Shani Bider, 2023

License

This project is licensed under the MIT License.