Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/zyx-0314/sample-ecommerce-store

Last synced: 2 days ago
JSON representation

Host: GitHub
URL: https://github.com/zyx-0314/sample-ecommerce-store
Owner: zyx-0314
Created: 2023-08-18T04:28:35.000Z (over 1 year ago)
Default Branch: main
Last Pushed: 2023-11-11T14:38:58.000Z (about 1 year ago)
Last Synced: 2024-11-24T05:08:27.154Z (2 months ago)
Language: TypeScript
Homepage: https://store-1-ecommerce-sample-project.vercel.app
Size: 4.2 MB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 3
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

ECommerce Store Project

with 5 versions

Seamless E-Commerce Solution: Robust template with essential features for smooth browsing, cart management, and secure checkout. Scalable for diverse businesses.

---

Table of Contents

About The Project
- Built With
- Other Components

Getting Started
- Prerequisites
- Installation

Usage

Versions

Road Map

Problems & Solutions

Other Commands

---

## About The Project
### Revolutionizing E-Commerce with Seamless Functionality

Welcome to our groundbreaking E-Commerce website project that aims to redefine online shopping experiences. Our team has meticulously crafted a user-centric platform with a focus on providing essential functionalities that streamline the entire shopping journey.

🔑 Key Functionalities:

Effortless Checkout:
Our E-Commerce website is designed to ensure a hassle-free checkout process. Customers can easily add products to their cart, review their selections, and securely complete their transactions.

Intuitive Cart Management:
We understand the importance of a user-friendly cart management system. Our platform enables customers to add, edit, or remove items from their cart with ease, promoting a seamless shopping experience.

Browsing Made Simple:
Navigating through a plethora of products has never been easier. Our intuitive interface empowers users to explore various categories, filter options, and find their desired products quickly.

Smart Sorting Options:
To enhance user convenience, we've implemented smart sorting features. Customers can sort products based on relevance, price, popularity, and more, making their shopping journey efficient and tailored.

🥅 The Goal:

At the heart of this project lies our goal to create an E-Commerce platform that transcends conventional boundaries. We aspire to offer a website that seamlessly accommodates different businesses without any interruption, serving as a versatile foundation for a multitude of online ventures.

Our vision extends beyond providing a mere shopping platform. We aim to deliver an immersive digital marketplace where customers can effortlessly discover, compare, and purchase products while relishing a smooth and engaging experience. By focusing on the core functionalities, we ensure that users can complete transactions with confidence, knowing their data is secure and their choices are well-informed.

In an ever-evolving digital landscape, our project's essence is adaptability. As businesses diversify and expand, our E-Commerce website stands ready to evolve alongside them, fostering growth and success. This adaptability ensures that our platform serves as a valuable asset to businesses of all scales, from startups to established enterprises.

In conclusion, our E-Commerce website project is more than just a digital storefront; it's a comprehensive solution designed to redefine how customers interact with products and services online. With intuitive functionalities and a scalable framework, we're excited to bring this vision to life and contribute to the future of E-Commerce.

(back to top)

### Built With

Technologies Used.

TechStack
[![ReactJS][ReactJS.com]][ReactJS-url], [![NextJS][NextJS.com]][NextJS-url]
[![TailwindCSS][TailwindCSS.com]][TailwindCSS-url], [![Shadcn][Shadcn]][Shadcn-url]

Database:
[![PlanetScale][PlanetScale.com]][PlanetScale-url], [![MySQL][MySQL.com]][MySQL-url]

Database Management:
[![Prisma][Prisma.com]][Prisma-url]

Autherntication:
[![Clerk][Clerk.com]][Clerk-url]

Payment Method:
[![Stripe][Stripe.com]][Stripe-url]

Deployed:
[![Vercel][Vercel.com]][Vercel-url]

[Stripe.com]: https://img.shields.io/badge/-Stripe-6772E5?logo=stripe&style=for-the-badge&logoColor=white
[Stripe-url]: https://stripe.com/
[PlanetScale.com]: https://img.shields.io/badge/-PlanetScale-gray?logo=planetscale&style=for-the-badge&logoColor=white
[PlanetScale-url]: https://planetscale.com
[MySQL.com]: https://img.shields.io/badge/-MySQL-blue?logo=mysql&style=for-the-badge&logoColor=white
[MySQL-url]: https://www.mysql.com/
[Clerk.com]: https://img.shields.io/badge/-Clerk-darkgray?logo=clerk&style=for-the-badge&logoColor=white
[Clerk-url]: https://clerk.com/
[NextJS.com]: https://img.shields.io/badge/-NextJS-black?logo=next.js&style=for-the-badge&logoColor=white
[NextJS-url]: https://nextjs.org/
[TailwindCSS.com]: https://img.shields.io/badge/-TailwindCSS-38B2AC?logo=tailwind-css&style=for-the-badge&logoColor=white
[TailwindCSS-url]: https://tailwindcss.com/
[Shadcn]: https://img.shields.io/badge/-Shadcn-3b3b3b?logo=shadcn&style=for-the-badge&logoColor=white
[Shadcn-url]: https://shadcn.com/
[ReactJS.com]: https://img.shields.io/badge/-ReactJS-61A9CB?logo=react&style=for-the-badge&logoColor=white
[ReactJS-url]: https://reactjs.org/
[Vercel.com]: https://img.shields.io/badge/-Vercel-000000?logo=vercel&style=for-the-badge&logoColor=white
[Vercel-url]: https://vercel.com/
[Prisma.com]: https://img.shields.io/badge/-Prisma-2D3748?logo=prisma&style=for-the-badge&logoColor=white
[Prisma-url]: https://www.prisma.io/

(back to top)

---

## Getting Started

To begin developing with our E-Commerce website source code, follow these straightforward installation steps. Before you start, ensure you have Node.js and NPM (Node Package Manager) installed on your system.

**System Requirements:**
- Node.js (Download and install from https://nodejs.org/)
- NPM (Comes with Node.js installation)

[![NodeJS][NodeJS.com]][NodeJS-url] [![NPM][NPM.com]][NPM-url]

[NodeJS.com]: https://img.shields.io/badge/-NodeJS-339933?logo=node.js&style=for-the-badge&logoColor=white
[NodeJS-url]: https://nodejs.org/
[NPM.com]: https://img.shields.io/badge/-NPM-CB3837?logo=npm&style=for-the-badge&logoColor=white
[NPM-url]: https://www.npmjs.com/

**Installation Process:**

1. **Clone the Repository:** Start by cloning the main E-Commerce website repository to your local machine using the following command:
```
git clone https://github.com/zyx-0314/sample-ecommerce-store
```

2. **Navigate to Project Directory:** Move into the cloned project directory:
```
cd sample-ecommerce-store
```

3. **Install Dependencies:** Install the project dependencies using NPM:
```
npm install
```

4. **Running the Admin Page:** Before proceeding, you need to run the admin page. The admin page source code can be found at: [https://github.com/zyx-0314/sample-ecommerce-admin](https://github.com/zyx-0314/sample-ecommerce-admin)

Follow the installation instructions for the admin page, and ensure it's up and running.

5. **Setup Local Environments:**

- Create a `.env` file in the root directory of the main project.
- Inside the `.env` file, set the following environment variable:

```
NEXT_PUBLIC_API_URL=
```

Replace `` with the actual API URL of the admin page. You can find this URL in the admin settings under the API section.

**Running the E-Commerce Website:**

1. With the admin page and local environment set up, you're ready to start the E-Commerce website. Run the following command in the project directory:

```
npm run dev
```

2. Your E-Commerce website should now be accessible locally at `http://localhost:3132`.

Congratulations! You've successfully installed the source code for development. You can now explore and enhance the E-Commerce website to meet your requirements. If you encounter any issues, refer to the documentation or seek assistance from our development community.

(back to top)

---

## Usage

**Usage Steps: Installing Source Code for Development**

- Clone the main E-Commerce website repository to your local machine.
- Command: `git clone https://github.com/zyx-0314/sample-ecommerce-store`

- Navigate to the project directory.
- Command: `cd sample-ecommerce-main`

- Install project dependencies using NPM.
- Command: `npm install`

- Run the admin page before proceeding.
- Admin page source code: [https://github.com/zyx-0314/sample-ecommerce-admin](https://github.com/zyx-0314/sample-ecommerce-admin)

- Set up local environments for the main E-Commerce website.
- Create a `.env` file in the project root directory.
- Inside the `.env` file, set the following environment variable:
```
NEXT_PUBLIC_API_URL=
```
Replace `` with the actual API URL of the admin page.

- Start the E-Commerce website locally.
- Command: `npm run dev`

- Access the E-Commerce website in your browser.
- Local URL: `http://localhost:3132`

By following these steps, you'll be able to successfully install and run the E-Commerce website source code for development. Remember that proper setup of the admin page and correct configuration of environment variables are crucial for a seamless development experience.

(back to top)

---

## Versions

Version List:
- **v.1.0.0** August 21, 2023
- Initial Release of the E-Commerce Website

**Version 1.0.0 Release Notes**

Description:
- The 1.0.0 release encompasses the core functionalities of the website, ensuring smooth product browsing, cart management, and secure checkout.
- Users can explore various product categories, apply smart sorting options, and effortlessly add items to their cart.

(back to top)

---

## Preview

**Mobile Version**
Filter
Logo