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	getStaticPaths() ==> SSG ( statically pre-render all the paths )
16	getStaticProps() ==> SSG ( pre-render fetching data at build time )
17	getServerSideProps() ==> 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

License

MIT License Copyright (c) 2022 Josh Hortt

Project Demo