1. Introduction
  2. Folder Structure
  3. Installation
    1. Node
    2. NPM
    3. React
    4. Adding New Component
    5. Redux
  4. Browser Support
  5. Change log
  6. Source & Credits

Folder Structure

This describes the file structure of CiyaShop React E-commerce application template.

Path Description
– src Entire source code of the application is available in this folder so it is the main folder.
     — actions This folder contains a file with all types of action methods used in shop page. Like fetch color, fetch category, etc.
     — api This folder contains all the JSON files used in application like display product list, display order history, invoice list, etc.
     — assets This folder contains CSS, JS, Images, and SCSS files of application.
          — css This contains CSS. CSS stands for Cascading Style Sheets. It’s used to define styles for web pages including the design, layout, and variations in display for different devices and screen sizes.
          — image This contains images used for the application.
          — js This contains third parties JavaScript files.
     — component All the application pages are available in this folder.
          — aboutUs This page contains information about the application.
          — account This component contains accounting related pages

  1. User Order History
    1. It’s shows history of all orders
  2. User Profile
    1. User can add or edit his details like First Name, Last Name, Gender, Date of Birth etc..
  3. User Billing and Shipping Address Details
    1. It’s show user’s billing and shipping address.
  4. User saved Credit or Debit Card Details
    1. User can store Credit or Debit Card details
          — admin This component contains admin pages.

  1. Reports
    1. In this admin user can see weekly, monthly , yearly sale details in graph.
    2. Admin user can see All transaction list, Transfer Report and expense category reports
  2. Invoices
    1. Admin user can see all the invoices list, show details of invoice and delete the invoice from list
  3. Products List
    1. Admin user can see all the products list which appears on front side to sell.
  4. Product Add Edit
    1. Admin user can add product or update existing
  5. Profile
    1. Admin user can edit his profile, add Collaboration User and update settings.
          — blog This contains the blogs of the site.
          —- contactUs: This contains information how to get in touch.
          — home We provide three types of home page for e-Commerce application. Home component covers default home page.
          — home2 This covers second home page that’s name is “Home New Fashion Home”.
          — home3 This covers third home page that’s name is “Modern Home Page”.
          — home4 This covers forth home page that’s name is “This is Classic Home Page”.
          — pages This Contains other pages like “Coming soon, Maintenance, Page Not Found”.
          — shop This Contains below pages

  1. Product Listing – Shows all the products with several types of filters.
  2. Product Details Page – Show whole information about one particular selected product.
  3. Cart and Check out pages – Show all items added in cart and checkout page with all the information while finally placed the order.
          — wishlist This contains your favorite products. This products can easily shifted to cart.
     — constant This folder contains constant strings used in this application.
     — layout This folder contains layout of the application.
        — header This contains header section of the application.
        — footer This contains footer section of the application.
     — widgets All sections used in four types of home pages are covered in this widget folder.
     — app.css This is the main application style sheet file.
     — app.js This is a main application java script  file.
     — index.html The index.html lives at the root of the front-end structure.
     — index.js Whenever an application is run, the First Index.js file is a load.
     — NavLinks.js This JSON file contains the number of pages list that is used in front side menu bar.
     — Vendor.js This contains reference of all CSS used in application.
–package.json A package.json file contains metadata about an app or module. It includes the list of dependencies so it’s most important for the application.
–config This folder is used for application configure settings.
    —webpackDevServer.config.js Web pack is a module bundle which takes modules with dependencies and generates static assets by bundling them together based on configuration.
    —webpack.config.dev.js This file is used for development purpose and will run when the modification is going to be done on localhost.
    —webpack.config.prod.js This file is used for production purpose when the build command is fired to run the file on a server.

 

« IntroductionInstallation »
Suggest Edit