/EcommerceShopifyStore-reactApp

A Shopify-integrated e-commerce website built with React. Product displays, product category browsing, registration, and store information are all available to users. The product showcase, shop page with filtering and pagination, and other utility components for an improved user experience are among the components.

Primary LanguageSCSS

React E-commerce Shopify App

Description

This is a React application that serves as the front end for a Shopify e-commerce store. It utilizes components to structure the user interface and interacts with the Shopify API (to be implemented) to retrieve and display product information, handle user actions like adding items to the cart, and potentially checkout flows. This is a basic structure for the React e-commerce application, with key functionalities to be implemented.

Installation

  1. Clone this repository. (git clone https://github.com/syedmaazsaeed/EcommerceShopifyStore-reactApp .git)

  2. Navigate to the project directory in your terminal.

  3. Run npm install to install the required dependencies.

Usage

  1. Start the development server by running npm start.
  2. The application will be accessible at http://localhost:3000/ in your web browser.

Components

  • footer.jsx: Renders the website footer containing contact information, social media links, and copyright information.
  • googlemap.jsx: Displays an embedded Google Map (requires an API key).
  • login.jsx: Handles user login functionality, including email and password input, error messages, and social login options (not yet functional).
  • navitems.jsx: Renders the website navigation bar with links to different sections of the website and login/signup functionalities.
  • pageheader.jsx: Displays a page header with a title and breadcrumbs.
  • rating.jsx: Displays a star rating element.
  • selectedcategory.jsx: Renders a dropdown menu for selecting product categories.
  • signup.jsx: Handles user signup functionality, including email, password, confirm password input, error messages, and social signup options (not yet functional).

Notes

  • This is a basic structure for the React e-commerce application.
  • Functionality like product display, cart management, and checkout need to be implemented.
  • Social login options and Google Maps integration require additional configuration.
  • Consider using a state management library like Redux or Context API to manage the application state effectively.

Further Development-Adding More Features

  • Implement API calls to fetch product data from Shopify.
  • Develop components to display product listings, product details, and shopping cart functionality.
  • Integrate payment processing for a complete checkout flow.
  • Implement user authentication and authorization functionalities.