Shop.co Ecommerce

🦾 Tech Stack

Here's a quick overview of the tech stack we use in our project:

Frontend

Next.js - The React framework for production.
Typescript - Strongly typed programming language that builds on JavaScript.
Tailwind CSS - A utility-first CSS framework for rapid UI development.
Swiper - Powerful and modern touch slider.
React PDF - Display PDFs in your React application.
Zustand - A simple, fast and scalable bearbones state-management solution.

Backend

Node.js - JavaScript runtime for building fast server applications.
Prisma - Next-generation ORM for Node.js and TypeScript.
PostgreSQL - The World's Most Advanced Open Source Relational Database.
NodeMailer - Module for Node.js applications to allow easy email sending.

DevOps and Deployment

Docker - Platform for developing, shipping, and running applications.
Vercel - Hosting and serverless backend services for web applications.

Testing

Jest - Delightful JavaScript Testing Framework.
Playwright - Browser automation library to enable cross-browser web testing.

Design

Figma - Online UI design and prototyping tool.

Payment Processing

Paypal - Online payment system.
MercadoPago - Latin American payment platform.

Media Management

Cloudinary - Cloud service that offers a solution to a web application's entire image management pipeline.

Miscellaneous

Clerk - User management and authentication for modern applications.
ShadCn - (If ShadCn is a custom tool or library, you might want to provide more information or remove it if it's not publicly known or relevant to the project).

📘 Documentation

Setting up the project

To get started with the project, follow these steps:

Clone the project repository:

git clone https://github.com/DeusloVult/shop.co-ecommerce.git

Copy the contents from env.example into a new file named .env.local.
If you are using a local database, start the Docker container:
```
docker compose up -d
```
Alternatively, if you're connecting to an external database, specify the database connection string in your .env.local file:
```
DATABASE_URL="your-database-connection-string"
```
Install the project dependencies using pnpm:
```
pnpm install
```
Apply database migrations to set up the database schema:
```
pnpm dlx prisma migrate dev --name init
```
Start the development server:
```
pnpm dev
```

🚀 Folder Structure

Use English for naming folders and files.
For creating files, use the format feature-name.ts or feature-name.tsx (e.g., data-products.ts).
Create folders to group related files within a category (e.g., components, utils).
Manage imports using the Autobarrel extension for better organization and easier access from the main folder.

📝 Contributing

If you wish to contribute to the project, please follow these guidelines:

Clone the repository.
Fetch the latest updates from the main branch:
```
git pull
```
Switch to the development branch:
```
git switch dev
```
Create a new branch for your changes, using a descriptive name:
```
git checkout -b feature/your-feature-name
```
Always pull the latest changes from the dev branch before starting to work on a new feature:
```
git pull origin dev
```
Contribute by opening a Pull Request (PR).
If you encounter any bugs or would like to suggest new features, create an issue and assign the appropriate labels.

👨‍💻 Dummy Data

The data folder is responsible for creating mock data for testing.
Each data file should be generated using data-generator.ts to ensure consistency.
Eventually, this dummy data will be replaced with actual data from the database.

🦉 Seed Data

pnpm prisma:seed

🐛 Bug Report

If you encounter any bugs or would like to suggest new features, create an issue and assign the appropriate labels.

Lostovayne/shop.co-ecommerce