🛒 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.

• • •
• •

Preview here

About Things Shop

Things Shop is a high-performance, minimalist ecommerce application built with Next.js 14 and Tailwind. Server-rendered Next.js App Router pages. With users, products and inventory managements systems powered by Prisma and integrates PayPal for secure payment processing. Product images are handled by Cloudinary, ensuring fast and efficient image delivery.

See the demo here.

🛠️ 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.
• 📦 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.
• 👥 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

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:

   git clone https://github.com/USpiri/things-shop.git

   Or just click here.

2. Go to the folder application.

   cd things-shop

3. Copy .env.template and rename it to .env.

4. Update the .env file with your environment variables.

5. Install dependencies:

   npm install

6. Set up the database using Docker:

   docker compose up -d

7. Apply Prisma migrations:

   npx prisma migrate dev

8. Seed the database with sample data:

   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:

   npm run dev

10. Open 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.

Back to top ⬆️

Special thanks to Fernando Herrera for his Nextjs course.