Modern Full Stack eCommerce Application with Stripe & Sanity.

Check it out: Ecommerce Website Demo

Build and Deploy a fully responsive Modern Full Stack Ecommerce application with Payments functionality. With Modern design, animations, the ability to add and edit products on the go using a CMS, all advanced cart functionalities, and most importantly the complete integration with Stripe so that you can cover REAL payments.

In the Project, it is used:

• Advanced React Best Practices such as

  • Folder and file structure, hooks and refs
  • Advanced State Management of the entire application using React Context API

• Next.js Best Practices such as

  • File-based routing, Data fetching that allows server-side rendering and static generation which makes the websites incredibly optimized (show getServerSideProps, getStaticPaths, getStaticProps), and Next.js as a backend endpoint.

• Stripe integration to manage payments, products, shipping rates, and the entire checkout process

• And most importantly Sanity to manage the entire content of the website. Sanity is the unified content platform that’ll make the building of the entire project possible.

• Through Sanity, you or your clients will be able to change the store’s homepage and more importantly, the details of all the products in the store, instantly and on the go!

• Sanity allows us to focus on developing the application without having to worry about the content, file storage, and databases. They’ll cover the dirty work for us and allow us to build scalable and modern e-commerce web applications extremely easily.

This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.tsx. The page auto-updates as you edit the file.

API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.ts.

The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.