BoHo Ecommerce

Description:

Boho Bag is an ecommerce site that allows users to purchase Bohemian Styles: dresses, scarves, purses with different filtering options. The option to subscribe via email is provided for patrons of the site:

• Utilizes REACT.js
• Redux is used
• Stripe (payment) & contact information.
• Sendgrid Twilio Email Updates
• Strapi for backend function, content management system.

Technology Stack

• Front-End: React.js, MUI, Redux, Formik, Yup
• API: tbd?
• Back-End: Strapi, Node.js, tbd?

Run Code (Environment)

Front-End Helpful Hints

• confirm that config is appropriate:

> node -v
> npm -v
> git --version

• Initial package.json & install dependencies:
  • MUI, react-router-dom, redux, formik, etc... (see resources)

> npx create-react-app <project name>
> cd <project name>
> npm install @mui/icons-material @mui/material @emotion/styled @emotion/react
> npm install --save react-router-dom
> npm install react-redux @reduxjs/toolkit
> npm install formik yup dotenv react-responsive-carousel
> npm install [email protected]

• Test front-end once pages are generated (ctrl-c to exit):

> npm run start

Back-End Helpful Hints (Node.js/Strapi)

• Initial package.json & install dependencies:

> npx create-strapi-app@latest <project name>
> cd <project name>

• Add to Strapi Database generated (ctrl-c to exit):

> npm run develop

• Avoid npm run start and use the npm run develop. Allow server to restart with each edit (see resources)
• Content-Type Builder: Item entry
• Media Library: upload photos
• Permissions: Settings > Roles > Public
• In frontend fetch item from backend (localhost:1337):

const grouping = "items"
const items = await fetch(
`http://localhost:1337/api/${grouping}`
)

Resources & Helpful Hints:

• Strapi Backend Applications
  • Quick Start here
  • Admin Panel of Strapi http://localhost:1337/admin
  • Rest API info here & filter info here
  • helpful hint: returns null if not defined, check image sizes in formats (avoid thumbnails)
• Stripe for Financial payment infrastructure.
• Formik for Pre-built React Forms.
  • Installation & docs with video
  • Yup Object schema validation here
• React components
  • React responsive Carousel
• Material UI CORE React UI LIBRARY great for standardizing projects
  • MUI Core installation here & here
  • MUI template pages here
  • MUI Theme here
  • React Box here & Grid here
  • Material Icon Info & Import links here

  npm install @mui/icons-material @mui/material @emotion/styled @emotion/react
  

  • MUI Palette here
  • MUI with CSS Modules style library here
  • Additional fun in grid-template-columns here
  • MUI react-tab here (avoid scrolling option)
  • Bootstraps Designs here
• Filler Text typographic
  • Lorem Ipsum

helpful hint:

• console log testing with ctr-alt-l
• CSS styles: clamp here

TODO stx:

Future Structure:

• Clothing Page, Accessories: Scarves, Jewelry, etc...
• ItemDetails: Reviews to be Iterated through, Carousel for Related Products(set cap to higher than 4 items), Description Justify Text(formate may be better that way?), previous next buttons based on current params (home at end or infinite loop?), WishList has size/color options to differentiation between items.
• Item Component: image changes slightly on hover to new image? do i want to find new image?
• Cart: tax by state?
• Sendgrid Twilio server for subscription for Ecommerce site & Serial Newsletters
• MUI sign-up/login page based on the template from here w/Firebase
• ACTUALLY LIST BAGS On shopping site
• Primary Colors: Green/Blue Bohemian themes.
• Add Validation to FORM requirements.