https://github.com/uspiri/things-shop
📦Minimalist ecommerce built with Nextjs, Tailwind and Zustand.
https://github.com/uspiri/things-shop
e-commerce minimal nextjs payments taiwindcss zustand
Last synced: 3 months ago
JSON representation
📦Minimalist ecommerce built with Nextjs, Tailwind and Zustand.
- Host: GitHub
- URL: https://github.com/uspiri/things-shop
- Owner: USpiri
- Created: 2024-11-05T21:31:19.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2024-12-02T18:50:43.000Z (10 months ago)
- Last Synced: 2025-01-29T11:15:51.643Z (8 months ago)
- Topics: e-commerce, minimal, nextjs, payments, taiwindcss, zustand
- Language: TypeScript
- Homepage: https://thingsshop.vercel.app/
- Size: 17 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🛒 Things Shop - ecommerce
Minimalist ecommerce built with Nextjs, Tailwind and Zustand. Server components, server actions, integrated with PayPal for payments, and Cloudinary for product image storage.
•
•
•
•
•
## About Things Shop
Things Shop is a high-performance, minimalist ecommerce application built with [Next.js](https://nextjs.org) 14 and [Tailwind](https://tailwindcss.com/). Server-rendered Next.js App Router pages. With users, products and inventory managements systems powered by [Prisma](https://www.prisma.io/) and integrates PayPal for secure payment processing. Product images are handled by Cloudinary, ensuring fast and efficient image delivery.
See the [demo here](https://thingsshop.vercel.app/).
## 🛠️ Tech Stack
- **Framework**: Next.js 14 (App Router)
- **Styling**: Tailwind CSS
- **Database**: PostgreSQL with Prisma ORM
- **State Management**: Zustand
- **Payments**: PayPal Integration
- **Image Hosting**: Cloudinary
- **Language**: TypeScript
- **Authentication**: Custom implementation
## 🚀 Features
- 🛍️ **Ecommerce Essentials**: Add products to a cart, manage inventory, and process payments securely with [PayPal](https://www.paypal.com/).
- 📦 **Dynamic Product Management**: Easily manage products and stock with the Prisma ORM.
- 🌐 **Server Actions**: Optimized with server components for fast rendering.
- 🖼️ **Efficient Image Handling**: Product images stored and delivered via Cloudinary.
- 🔐 **Authentication**: Custom auth implementation for login with [Auth.js](https://authjs.dev/).
- 👥 **Role based route protection**: Allows certain users to get specific pages based on the user's role.
- 📱 **Responsive Design**: Ensure accesibility from all devices.
- 🔎 **Search page**: Quickly find products, user-friendly search interface, using search params.
## 🖼️ Screenshoots
## 🗃️ Folder structure
```bash
prisma/ # Prisma ORM Configs
public/
└── images/ # Seed products images
└── ...
src/
├── actions/ # Server actions
├── app/ # App routing folder
├── components/ # Components
├── config/ # Configuration files
├── lib/ # Prisma utilities
├── models/ # Interfaces and types
├── seed/ # Development seed script
├── store/ # Zustand global state
├── utils/ # Utility functions
├── auth.ts
└── middleware.ts
```
## Getting Started
### Development:
1. Clone the project:
```bash
git clone https://github.com/USpiri/things-shop.git
```
Or just [click here](https://github.com/USpiri/things-shop/fork).
2. Go to the folder application.
```bash
cd things-shop
```
3. Copy `.env.template` and rename it to `.env`.
4. Update the `.env` file with your environment variables.
5. Install dependencies:
```bash
npm install
```
6. Set up the database using Docker:
```bash
docker compose up -d
```
7. Apply Prisma migrations:
```bash
npx prisma migrate dev
```
8. Seed the database with sample data:
```bash
npm run seed
```
> **Note:** After running the seed script, clear your browser's local storage and cookies to avoid data conflicts.
9. Start the development server:
```bash
npm run dev
```
10. Open [http://localhost:3000](http://localhost:3000) in your browser.
11. Clear Local Storage and Cookies.
### Build:
```
npm run build
```
# 🤝 Contribution Guidelines
Contributions are welcome! Please fork the repository and submit a pull request with your changes.
Special thanks to [Fernando Herrera](https://github.com/klerith) for his Nextjs course.