Overview of Project Structure 🏗

This project is structured as a modern, decoupled web application with a sensible service-based architecture.

Core Files

Physically, the codebase is structured in three main directories:

• src - Contains the core frontend files.
• server - Contains the core backend files.
• email - Contains all the relevant email template files.

Take a deeper dive into the project structure.

Project Tree

.
├── README.md
├── config.env
├── emails
│   ├── Ordered
│   │   ├── html.hbs
│   │   └── subject.hbs
│   ├── Processed
│   │   ├── html.hbs
│   │   └── subject.hbs
│   ├── Received
│   │   ├── html.hbs
│   │   └── subject.hbs
│   └── Shipped
│       ├── html.hbs
│       └── subject.hbs
├── public
│   ├── assets
│   │   └── // folders for images assets go here
│   ├── favicon.png
│   └── index.html
├── server
│   ├── admin.js
│   ├── config.js
│   ├── index.js
│   ├── orders.js
│   └── product.js
├── src
│   ├── App.js
│   ├── App.test.js
│   ├── assets
│   │   └── store_config.json
│   ├── components
│   │   ├── Landing.js
│   │   ├── AboutPage.js
│   │   ├── NotFound404.js
│   │   ├── admin
│   │   │   ├── Admin.js
│   │   │   ├── AdminTable.js
│   │   │   └── Login.js
│   │   ├── cart
│   │   │   ├── Cart.js
│   │   │   ├── CartSmall.js
│   │   │   └── CartTable.js
│   │   ├── checkout
│   │   │   ├── Checkout.js
│   │   │   ├── CheckoutFlow.js
│   │   │   ├── CheckoutHeader.js
│   │   │   ├── Confirm.js
│   │   │   ├── CreditCards.js
│   │   │   ├── Email.js
│   │   │   ├── Shipping.js
│   │   │   └── ShippingOptions.js
│   │   ├── config
│   │   │   ├── AboutPage.js
│   │   │   ├── ConfigPage.js
│   │   │   ├── InitialConfig.js
│   │   │   ├── Settings.js
│   │   │   ├── ShippingOptions.js
│   │   │   ├── Theme.js
│   │   │   ├── collection
│   │   │   │   ├── CollectionStep1.js
│   │   │   │   ├── CollectionStep2.js
│   │   │   │   ├── AddProductToCollection.js
│   │   │   │   └── EditableImageList.js
│   │   │   ├── product
│   │   │   │   ├── ProductStep1.js
│   │   │   │   ├── ProductStep2.js
│   │   │   │   ├── ProductStep3.js
│   │   │   │   ├── ProductStep4.js
│   │   │   │   ├── ProductAttribute.js
│   │   │   │   ├── ProductOptions.js
│   │   │   │   └── ProductVariants.js
│   │   │   ├── store-collections
│   │   │   │   ├── CollectionDisplay.js
│   │   │   │   ├── CollectionImageList.js
│   │   │   │   ├── CreateEditButtons.js
│   │   │   │   ├── CreateEditCollection.js
│   │   │   │   ├── CreateEditSteps.js
│   │   │   │   ├── DeleteCollectionModal.js
│   │   │   │   ├── FeaturedProducts.js
│   │   │   │   ├── ReorderCollectionsModal.js
│   │   │   │   └── StoreCollections.js
│   │   │   └── store-products
│   │   │       ├── CreateEditButtons.js
│   │   │       ├── CreateEditProduct.js
│   │   │       ├── CreateEditSteps.js
│   │   │       ├── DeleteProductModal.js
│   │   │       └── StoreProducts.js
│   │   ├── product
│   │   │   ├── Collection.js
│   │   │   ├── CollectionList.js
│   │   │   ├── Product.js
│   │   │   ├── ProductDetails.js
│   │   │   └── ProductList.js
│   │   └── ui
│   │       ├── Banner.js
│   │       ├── BannerHamburger.js
│   │       ├── Breadcrumb.js
│   │       ├── Carousel.js
│   │       ├── MobileCarousel.js
│   │       ├── PageWrapper.js
│   │       ├── ScrollToTop.js
│   │       └── TextFieldDecimal.js
│   ├── data
│   │   ├── reducers.js
│   │   └── store.js
│   ├── index.css
│   ├── index.js
│   ├── registerServiceWorker.js
│   ├── routes
│   │   └── Config.js
│   └── util.js
├── package.json

Favicon

The favicon placeholders are located in public and you can simply replace these files to use your own logos.