23 Apr 2022
E-commerce App π§ π | Live Link
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 | getStatic Paths() ==> SSG ( statically pre-render all the paths ) |
16 | getStatic Props() ==> SSG ( pre-render fetching data at build time ) |
17 | getServerSide Props() ==> SSR ( fetching data at each user request ) |
yarn --legacy-peer-deps
run this short command for install packages...
that listed inside dependencies { object } based onpackage.json
file.
No | Package Installs | Use for... |
---|---|---|
1 | yarn add @babel/core |
slider |
2 | yarn add @sanity/cli |
managing Sanity installations, schemas & DB |
3 | yarn add @sanity/client |
Client for read, create & update data from Sanity.io |
4 | yarn add @sanity/image-url |
Tools to generate image urls from Sanity content |
5 | yarn add @stripe/stripe-js |
Stripe.js loading utility |
6 | yarn add stripe |
payment gateway |
7 | yarn add react-icons |
icons at UI |
8 | yarn add react-hot-toast |
short notification |
9 | yarn add canvas-confetti |
performant confetti animation in the browser |
10 | yarn add next-sanity-image |
Utility for using responsive image host in Sanity.io |
π¨
src
βββ 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
π¨
Learning by inspired from.