BoHo Ecommerce

Description:

Boho Bag is an Ecommerce React.js app that allows users to purchase Bohemian Styles: dresses, scarves, purses with different filtering options. The option to subscribe to a Newletter is provided on the front page for interested patrons.

Client side (frontend) utilizes React.js & react-router-dom in combination with Material MUI create themes to provide cohesive structure.
Server side (backend) uses Strapi.js (CMS) in combination with SQLite to provide database structure that React Redux uses on the frontend when interfacing between client and server side.
Stripe payment used in combination with Matieral UI stepper checkout form. Material UI in combination with traditional CSS is used for a cohesive design aesthetic.

Screen Shots:

Please reference the screenshot folder for more available images

Homepage with react-carousal, MUI tabs, Strapi/SQLite database for loaded items:

Stripe Payment Checkout with Material UI stepper:

Technology Stack

Frontend/Client: React.js, MUI, Redux, Formik, Yup, HTML5, CSS
API: Stripe, Strapi.js
Backend/Server: Strapi.js, SQLite, Node.js,

Run Code (Environment)

Front-End Helpful Hints

confirm that config is appropriate:

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

Initial package.json & install dependenies(localhost:3000):
- Must be cd'd into frontend/client for install
- 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 --save @stripe/react-stripe-js @stripe/stripe-js

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:
- Must be cd'd into backend/server for install

> npx create-strapi-app@latest <project name>
> cd <project name>
> npm install --save stripe

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}`
)

Deployment

Resources & Helpful Hints:

Strapi Backend Applications
- Quick Start here
- Admin Panel of Strapi http://localhost:1337/admin
- Video Help found here
- Rest API info/populate here & filter info
- MUI form information here
- helpful hint: returns null if not defined, check image sizes in formats (avoid thumbnails) & ?. help with unknown. http://localhost:1337/ must be used, http required for strapi.
Stripe for Financial payment System:
- Prebuilt Checkout Page (also works w/ Next.js)
  - Test Payment Pocessing with psuedo-cards on Prebuilt Checkout here
- Install here:
```
npm install --save @stripe/react-stripe-js @stripe/stripe-js
```
- API Session info
Formik for Pre-built React Forms.
- Installation & docs with video
- Yup Object schema validation here
PostMan for API Tests here
- jsonwebtoken / jwt for Authentification & install here
- jwt Debugger here
bcrypt.js part of password hasing for user Authentification.

style:

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 Alert here
- MUI with CSS Modules style library here
- Additional fun in grid-template-columns here
- MUI react-tab here (avoid scrolling option)
React components
- React responsive Carousel
Filler Text typographic
- Lorem Ipsum
Google Fonts here

helpful hint:

console log testing with ctr-alt-l
when a Promise is returned as 'fufilled' use await to get actual item.
CSS styles: clamp here
Always Stay Positive & Triple Check Permissions :)

Nelson00011/boho