- Notifications
You must be signed in to change notification settings - Fork0
Ecommerce shop built with Next.js and Sanity.io
Joshhortt/ecommerce-shop
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
23 October 2022
version: 23/10/2022
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
- JavaScript
- React.js
- Next.js
- CSS-3
- Sanity CMS
| 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 fromBackEnd |
| 8 | ConnectSanity BackEnd withNext-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, inSingleTon Pattern style |
| 14 | Image change at hover state by the help ofonMouseEnter attribute |
| 15 | getStaticPaths() ==>SSG ( staticallypre-render all the paths ) |
| 16 | getStaticProps() ==>SSG (pre-render fetching data atbuild time ) |
| 17 | getServerSideProps() ==>SSR ( fetching data ateach user request ) |
npm --legacy-peer-depsrun this short command for installing updated packages...
that listed inside dependencies { object } based onpackage.jsonfile.
| 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 istripe | payment gateway |
| 7 | npm ireact-icons | icons at UI |
| 8 | npm ireact-hot-toast | short notification |
| 9 | npm icanvas-confetti | performant confetti animation in the browser |
| 10 | npm inext-sanity-image | Utility for using responsive image host in Sanity.io |
🟨 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 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).
Clone repository in a shell using the command:git clone https://github.com/Joshhortt/ecommerce-shop
Due to time constraints the site may not scale perfectly on every device.
If you have any questions or find any issues with this web-application, get in touch.
My email is:joshhortt@yahoo.com
MIT License Copyright (c) 2022 Josh Hortt
