Storetail

Storetail is an e-commerce website built with .Net 8 and React. It uses a variety of libraries and packages to provide a robust and user-friendly shopping experience. visit the live site here.

Demo

Storetail.Demo.mp4

Tech Stack

Back-end

.NET 8 Core - Backend framework
Entity Framework Core - Object-Relational Mapping (ORM) framework
PostgreSQL - Open-source SQL database to store data
Stripe - For payment processing

Front-end

React - Frontend framework
Vite - Build tool and development server
MUI - A comprehensive set of React components for building user interfaces
React Hook Form - Library for flexible & extensible forms
Redux - A Predictable State Container for JS Apps
React Router Dom - Declarative routing for React
React Toastify - Allows you to add notifications to your app with ease
Yup - Dead simple Object schema validation

Features

User authentication with JWT (login/register)
CRUD operations for products
Shopping cart functionality
Payment processing with Stripe
Product search and filter
User profile and order history
Responsive design for all screens

Usage

Configuration

Before running the application locally, you need to set up the environment variables for both the frontend and the backend.

Frontend

Create a .env.local file in the root of the frontend directory and add the following:

VITE_APP_API_URL=http://localhost:5000/api/

Replace VITE_APP_URL with your actual backend URL.

Run client development server assuming you have Node.js installed and npm or yarn or pnpm installed:

I Reccomend using pnpm as it is the manager I used to build this project.

cd client
npm install
npm run dev

Backend

Update the appsettings.Development.json or appsettings.json depending where you running it file in the root of the backend directory with the following:

{
  "ConnectionStrings": {
    "DefaultConnection": "Server=localhost;Port=5432;Database=storetail;User Id=your_postgres_user_id;Password=your_postgres_password;"
  },
  "StripeSettings": {
    "PublicKey": "your_stripe_public_key",
    "SecretKey": "your_stripe_secret_key",
    "WhSecret": "your_stripe_webhook_secret"
  }
}

Run backend development server assuming you have .NET 6 installed:

cd API
dotnet restore
dotnet watch run

Replace your_postgres_user_id, your_postgres_password, your_stripe_public_key, your_stripe_secret_key, and your_stripe_webhook_secret with your actual values.

Happy coding! 🚀

mzbali / Storetail