shanibider/mywishlist-react-ecommerce

React E-commerce Wish-List shopping website. 🖥

My WishList Frontend E-commerce React application

Dynamic E-commerce application developed with JavaScript, and React. follows a standard React application structure with routing, state management, and component-based architecture for building modular and maintainable user interfaces.

Languages and Tools used in this project:

Front-End Development Languages

• JavaScript
• React-bootstrap, React: Components, Props, Events, Hooks, Router
• CSS3
• HTML5

main architecture and methods used in the application:

• Single Page Application (SPA): The application uses react-router-dom for routing, which is a common approach in single-page applications (SPAs). SPAs load a single HTML page and dynamically update that page as the user interacts with the app.

• Context API: Manages the state of a shopping cart across the application using the Context API, providing shopping cart functionality to child components.

• Component-based Architecture: The application is built using React, a JavaScript library that follows a component-based architecture. This app is structured around reusable and modular components, with each page represented as a component (<Shop />, <Contact />, <Cart />), along with other components for consistent UI elements and product rendering.

• Context API for State Management: The application uses React's Context API for state management. The ShopContextProvider is a context provider that is used to manage the state of a shopping cart across the application. This allows state to be shared across multiple components without prop drilling.

• Functional Components and Hooks: The application uses functional components and React Hooks. Hooks are a feature introduced in React 16.8 that allow you to use state and other React features without writing a class.

• CSS Modules: Styling is done using CSS Modules, allowing for scoped and modular CSS stylesheets for each component.

• Data Management: Product data is imported from an external source (../../products) and rendered within the <Shop /> component by mapping over the data and rendering individual product components.

• React.StrictMode: The application is wrapped in a React.StrictMode component in the root file. React.StrictMode is a wrapper component that checks for potential problems in an application during development. It does not render any visible UI, but activates additional checks and warnings for its descendants.

Key Features

• Home - Lists products.
• Shopping Cart - Displaying and managing items in a shopping cart.
• Contact page.

Ecommerce Website Preview :

Demo Website

👉 Demo :

screen-capture.webm

The pages

Home:

Cart:

Contact:

To Run Locally-

open new terminal
$ npm i
$ npm start