{"componentChunkName":"component---src-templates-blog-template-js","path":"/docs/project-structure","result":{"data":{"markdownRemark":{"html":"

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

\n

Core Files

\n

Physically, the codebase is structured in three main directories:

\n\n

Take a deeper dive into the project structure.

\n

Project Tree

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

Favicon

\n

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

","frontmatter":{"path":"/docs/project-structure","date":"2020-01-01T17:12:33.962Z","header":"Introduction","title":"Overview of Project Structure 🏗"}}},"pageContext":{"pages":[{"path":"/docs/changelog","title":"Changelog & To Do's 📝","header":"Beluga Next Steps","date":"2020-01-11T17:12:33.962Z"},{"path":"/docs/seo-social","title":"SEO and Social Media 💻","header":"Launching Your Store","date":"2020-01-10T17:12:33.962Z"},{"path":"/docs/deploy-to-heroku","title":"Deploying To Heroku 🚀","header":"Launching Your Store","date":"2020-01-09T17:12:33.962Z"},{"path":"/docs/gmail-oauth","title":"Setting up Gmail Oauth2 📬","header":"Managing Orders","date":"2020-01-07T19:12:33.962Z"},{"path":"/docs/email-templates","title":"Email Templates 🧾","header":"Managing Orders","date":"2020-01-07T18:12:33.962Z"},{"path":"/docs/managing-orders","title":"Order Admin 📦","header":"Managing Orders","date":"2020-01-07T16:12:33.962Z"},{"path":"/docs/custom-products","title":"Advanced: Custom Product Data 💫","header":"Store Configuration","date":"2020-01-06T22:12:33.962Z"},{"path":"/docs/shipping","title":"Checkout & Shipping 🛒","header":"Store Configuration","date":"2020-01-06T21:12:33.962Z"},{"path":"/docs/additional-pages","title":"Adding Pages 📄","header":"Store Configuration","date":"2020-01-06T20:12:33.962Z"},{"path":"/docs/adding-collections","title":"Adding Collections 📂","header":"Store Configuration","date":"2020-01-06T19:12:33.962Z"},{"path":"/docs/adding-products","title":"Adding Products 🎁","header":"Store Configuration","date":"2020-01-06T18:12:33.962Z"},{"path":"/docs/theming-design","title":"Theming & Design 🎨","header":"Store Configuration","date":"2020-01-06T17:12:33.962Z"},{"path":"/docs/store-config","title":"Store Settings 🛠","header":"Store Configuration","date":"2020-01-05T16:12:33.962Z"},{"path":"/docs/stripe","title":"Setting up Stripe 💵","header":"Introduction","date":"2020-01-04T17:12:33.962Z"},{"path":"/docs/new-store","title":"Creating a New Store 🛍","header":"Introduction","date":"2020-01-03T17:12:33.962Z"},{"path":"/docs/dev-environment","title":"Setting up the Dev Environment 🧪","header":"Introduction","date":"2020-01-02T17:12:33.962Z"},{"path":"/docs/project-structure","title":"Overview of Project Structure 🏗","header":"Introduction","date":"2020-01-01T17:12:33.962Z"}]}},"staticQueryHashes":["45326706"]}