23 October 2022

E-commerce shop

By Josh Hortt

version: 23/10/2022

Description

This application is about an E-commerce Hardware store for small businesses
It was built for a local business client
It uses the portuguese language
It is Developed in React.js
This E-commerce application includes modern design and animations,the
ability to add and edit products on the go using a Sanity CMS, all advanced cart,
and checkout functionalities, and most importantly, the complete integration
with Stripe so that the user can cover real payments. It can be used for any kind of E-commerce store (Fashion, Jewellry, etc..).

E-commerce shop 🎧 🔊 | Live Link

Technologies Used

JavaScript
React.js
Next.js
CSS-3
Sanity CMS

Learning Context:

No	Context learn by doing this project...
1	Dynamic Routing
2	File Base Routing
3	Folder Structure
4	Layout Architecture
5	Global Vanilla CSS
6	`Stripe` for Payment Gateway
7	Data fetching from `BackEnd`
8	Connect `Sanity` BackEnd with `Next-Js`
9	`Context API` for globally data sharing...
10	Project data flow functional Architecture...
11	`react-hot-toast` for displaying notification
12	`canvas-confetti` firework animation for success sms
13	`getStripe` function call, in `SingleTon Pattern` style
14	Image change at hover state by the help of `onMouseEnter` attribute
15	get`Static`Paths() ==> `SSG` ( statically `pre-render all the paths` )
16	get`Static`Props() ==> `SSG` ( `pre-render` fetching data at `build time` )
17	get`ServerSide`Props() ==> `SSR` ( fetching data at `each user request` )

npm --legacy-peer-deps

run this short command for installing updated packages...
that listed inside dependencies { object } based on package.json file.

NPM | Dependencies...

No	Package Installs	Use for...
1	npm i `@babel/core`	slider
2	npm i `@sanity/cli`	managing Sanity installations, schemas & DB
3	npm i `@sanity/client`	Client for read, create & update data from Sanity.io
4	npm i `@sanity/image-url`	Tools to generate image urls from Sanity content
5	npm i `@stripe/stripe-js`	Stripe.js loading utility
6	npm i `stripe`	payment gateway
7	npm i `react-icons`	icons at UI
8	npm i `react-hot-toast`	short notification
9	npm i `canvas-confetti`	performant confetti animation in the browser
10	npm i `next-sanity-image`	Utility for using responsive image host in Sanity.io

File Structure...

🟨
    ecommerce-shop
    |
    ├── components
    |   ├── Cart.jsx
    |   ├── Footer.jsx
    |   ├── FooterBanner.jsx
    |   ├── HeroBanner.jsx
    |   ├── index.js
    |   ├── Layout.jsx
    |   ├── Navbar.jsx
    |   └── Product.jsx
    |
    ├── context
    |   └── StateContext.js     |🌐| Global Data Sharing |🌐|
    |
    ├── lib
    |   ├── client.js           |🟠| Sanity Connection Configuration  |🟠|
    |   ├── getStripe.js        |🟠| getStrip key- SingleTon Pattern  |🟠|
    |   └── utils.js            |🟠| Success animation after purchase |🟠|
    |
    ├── pages
    |   ├── api                 |🟨| BackEnd |🟨|
    |   |   └── stripe.js       |🟨| BackEnd |🟨|
    |   |
    |   ├──product
    |   |  └── [slug].js
    |   |
    |   ├── _app.js
    |   ├── index.js
    |   └── success.jsx
    |
    ├── sanity_ecommerce        |🔶| Headless CMS |🔶|
    |   └── schemas             |🔶| Headless CMS |🔶|
    |       ├── banner.js       |🔶| Headless CMS |🔶|
    |       ├── product.js      |🔶| Headless CMS |🔶|
    |       └── schema.js       |🔶| Headless CMS |🔶|
    |
    └── styles
        └── globals.css
🟨

User Specifications

User searches for products which the user wants to purchase.
by clicking on the image the user is able to see the choosen product details.
User adds (adicionar) one or more products to the shopping cart.
User checks the shopping cart (carrinho de compras) to confirm if all products are showing up.
User can add (+) or remove (-) the quantity of choosen products.
User can see and confirm the total price of purchase inside the shopping cart.
User can pay with Stripe by clicking the Pay with stripe (Finalizar compra).

Setup/Installation Requirements

Clone repository in a shell using the command:
git clone https://github.com/Joshhortt/ecommerce-shop

Known Bugs

Due to time constraints the site may not scale perfectly on every device.

Support and contact details

If you have any questions or find any issues with this web-application, get in touch.
My email is: joshhortt@yahoo.com

Joshhortt/ecommerce-shop