E-commerce platform built entirely in TypeScript, leveraging NextJS, shadcn/ui components, TailwindCSS for styling, Sanity.io for CMS, and Stripe for payment integration.
- Framework: NextJS 14
- Component Library: shadcn/ui
- Styling: TailwindCSS
- Content Management: Sanity.io
- Payment Integration: Stripe
- Deployment: Hosted on Vercel
Note: This project is predominantly focused on frontend development with minimal backend setup. Take note of the file /config/inventory.ts, which serves as a database. Additionally, the file /lib/seed.ts functions as a backend process for updating the list of products within the CMS.
While the platform is already functional, there are a few areas that needs to be improved such as:-
- Improving the user flow in terms of adding product variants.
- Improve the way to handle pre-rendered client components - currently using a hacky Suspense boundary with a loader icon
- Implementing a backend with database for storing products.
- Implementing logic for keeping track of stocks.
- Explore other common features within an e-commerce web application.
- Improve the overall performance of the application by looking at ways to minify CSS and JS
- Clone the repo:
git clone git@github.com:mrarvind90/drip.git - Navigate to the repository:
Change <repository_directory> to the name of the cloned directory.
cd <repository_directory>
- Install Dependencies:
This command will install all the necessary dependencies for the application.
pnpm install
- Configure Environment Variables: Rename the
.env.samplefile in your project directory to.envand update it with the relevant credentials:cp .env.sample .env
- Run the application:
pnpm dev
- Launch the application on http://localhost:3000/
This project is licensed under the MIT License.
Built with inspiration from the comprehensive tutorial by @code.bootcamp. Check out the full tutorial: Full Stack E-Commerce App with Next 13, React, Sanity, Stripe, & TailwindCSS.