Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lucasalvaresa/shadcn-ui-store
A store created with Next.js, Shadcn UI, TailwindCSS and Zustand
https://github.com/lucasalvaresa/shadcn-ui-store
nextjs shadcn-ui tailwind-css zustand
Last synced: 8 days ago
JSON representation
A store created with Next.js, Shadcn UI, TailwindCSS and Zustand
- Host: GitHub
- URL: https://github.com/lucasalvaresa/shadcn-ui-store
- Owner: LucasAlvaresA
- Created: 2024-11-19T02:21:13.000Z (3 months ago)
- Default Branch: master
- Last Pushed: 2024-11-25T21:05:00.000Z (2 months ago)
- Last Synced: 2024-12-01T14:37:32.192Z (2 months ago)
- Topics: nextjs, shadcn-ui, tailwind-css, zustand
- Language: TypeScript
- Homepage: https://shadcn-store-lucas.vercel.app/
- Size: 6.68 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
#
Shadcn-UI Store
## Project Overview
**Shadcn-UI Store** is a **Frontend-only** virtual store project built with **Next.js**, **TypeScript**, **Shadcn-UI**, **Zustand**, and **TailwindCSS**. This project features a shopping cart where users can add products, view the total, and at the end of the checkout process, the application generates a summary message containing all customer details and selected products. This message is sent to the store via **WhatsApp**.
This project is purely client-side, meaning there is **no backend** or **API integration** involved. It serves as an example of modern UI development with interactive components, state management, and dynamic content rendering.
## Features
- Interactive shopping cart functionality.
- Automatic generation of a WhatsApp message with the order summary.
- Fully responsive design with TailwindCSS.
- Modular and reusable components using Shadcn-UI.
- State management handled by Zustand.
## Getting Started
To get a local copy of this project up and running, follow these steps.
### Installation
1. Clone the repository:
```bash
git clone [email protected]:LucasAlvaresA/shadcn-ui-store.git
```
2. Install the NPM packages:
**Note:** Due to compatibility issues between **Shadcn-UI** and **Next.js 15**, you may encounter dependency errors during installation. In this case, use the following command to force the installation of the required packages:
```bash
npm install --force
```
3. Create a `.env` file at the root of the project. Use the provided `.env.example` as a template.
**Example `.env` file:**
```env
# Your WhatsApp number
NEXT_PUBLIC_WHATSAPP="123456789101112131415"
```
4. Run the project:
```bash
npm run dev
```
## Conclusion
This project demonstrates various frontend features and UI components, including a shopping cart and WhatsApp integration, while focusing solely on client-side functionality. Feel free to explore, modify, and expand upon this project as you wish.
---