https://github.com/mrarvind90/drip
E-commerce platform built entirely in TypeScript, leveraging NextJS, shadcn/ui components, TailwindCSS for styling, Sanity.io for CMS, and Stripe for payment integration.
https://github.com/mrarvind90/drip
eslint nextjs prettier sanity-io shadcn-ui stripe stripe-checkout tailwindcss typescript use-shopping-cart vercel
Last synced: 3 months ago
JSON representation
E-commerce platform built entirely in TypeScript, leveraging NextJS, shadcn/ui components, TailwindCSS for styling, Sanity.io for CMS, and Stripe for payment integration.
- Host: GitHub
- URL: https://github.com/mrarvind90/drip
- Owner: mrarvind90
- License: mit
- Created: 2024-03-10T14:18:33.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-03-11T09:58:12.000Z (over 2 years ago)
- Last Synced: 2025-01-06T10:25:18.624Z (over 1 year ago)
- Topics: eslint, nextjs, prettier, sanity-io, shadcn-ui, stripe, stripe-checkout, tailwindcss, typescript, use-shopping-cart, vercel
- Language: TypeScript
- Homepage: https://drip-rust.vercel.app
- Size: 209 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Drip
E-commerce platform built entirely in TypeScript, leveraging NextJS, shadcn/ui
components, TailwindCSS for styling, Sanity.io for CMS, and Stripe for payment
integration.
## Project Overview
- **Framework:** [NextJS 14](https://nextjs.org)
- **Component Library:** [shadcn/ui](https://ui.shadcn.com)
- **Styling:** [TailwindCSS](https://tailwindcss.com)
- **Content Management:** [Sanity.io](https://sanity.io)
- **Payment Integration:** [Stripe](https://stripe.com/)
- **Deployment:** Hosted on [Vercel](http://vercel.com)
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.
## Project Status
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
## Getting Started
1. Clone the repo:
```git
git clone git@github.com:mrarvind90/drip.git
```
2. Navigate to the repository:
```shell
cd
```
Change to the name of the cloned directory.
3. Install Dependencies:
```shell
pnpm install
```
This command will install all the necessary dependencies for the
application.
4. Configure Environment Variables: Rename the `.env.sample` file in your
project directory to `.env` and update it with the relevant credentials:
```shell
cp .env.sample .env
```
5. Run the application:
```shell
pnpm dev
```
6. Launch the application on http://localhost:3000/
## License
This project is licensed under the [MIT License](./LICENSE).
## Acknowledgments
Built with inspiration from the comprehensive tutorial by
[@code.bootcamp](https://www.youtube.com/@code.bootcamp). Check out the full
tutorial:
[Full Stack E-Commerce App with Next 13, React, Sanity, Stripe, & TailwindCSS](https://www.youtube.com/watch?v=g2sE034SGjw&list=PLQ0mXHAlMS_XMQ8ng9jjO-JUeP_Z6rDpa&index=33&t=1019s).