EasyShop

Simple E-commerce frontend application built with React + TypeScript

About   |   Features   |   Technologies   |   Structure   |   Requirements   |   Starting   |   License

🎯 About

EasyShop is a simple E-commerce frontend application built as a learning/portfolio project. It uses the Platzi Fake Store API as a mock backend for products, categories, and authentication.

The design is inspired by a Cosmetic Store Figma Website Template from ui4free.com.

✨ Features

Implemented

• ✔️ Home page with hero section, categories, and product carousel
• ✔️ User authentication (login) with API integration
• ✔️ Cookie-based route protection
• ✔️ Responsive design (mobile & desktop)
• ✔️ Swiper.js product carousel with breakpoints
• ✔️ SweetAlert2 notifications

Placeholder (UI only)

• 🚧 Registration page
• 🚧 Password reset flow
• 🚧 Product list page
• 🚧 Product detail page
• 🚧 Shopping cart
• 🚧 Checkout flow (account info, delivery, payment)
• 🚧 Order management (list & detail)

🚀 Technologies

Layer	Technology
Language	TypeScript
Framework	React 18
Build Tool	Vite
State Management	Redux + Redux Thunk
Routing	React Router DOM v6
Styling	Tailwind CSS + DaisyUI
HTTP Client	Axios
Forms	React Hook Form
Carousel	Swiper.js
Alerts	SweetAlert2
Package Manager	Yarn

📁 Project Structure

src/
├── main.tsx                    # Entry point
├── App.tsx                     # Root component (Redux Provider + Router)
├── config/
│   └── index.ts                # API base URL
├── router/
│   └── index.tsx               # Route definitions
├── layouts/
│   ├── auth/index.tsx          # Auth layout (login, register)
│   └── main/index.tsx          # Main layout (with auth guard)
├── redux/
│   ├── types/                  # Action type constants
│   ├── reducers/               # Redux reducers
│   └── actions/                # Redux actions (API calls)
├── components/
│   ├── CardProduct.tsx         # Product card component
│   ├── CardCategory.tsx        # Category card component
│   └── CardCarousel.tsx        # Swiper carousel component
├── views/
│   ├── auth/                   # Auth pages (login, register, reset)
│   └── main/                   # Main pages (home, products, cart, checkout)
└── assets/                     # Images and SVGs

✅ Requirements

Before starting, you need to have Git and Node.js (v16+) installed.

🏁 Starting

# Clone this project
$ git clone https://github.com/wildanfadh/easyshop

# Access
$ cd easyshop

# Install dependencies
$ yarn

# Run development server
$ yarn dev

# The server will initialize at http://localhost:3000

Available Scripts

Command	Description
yarn dev	Start development server
yarn build	Build for production (TypeScript check + Vite build)
yarn preview	Preview production build

🌐 API

This project uses Platzi Fake Store API as the backend:

Endpoint	Method	Description
/auth/login	POST	User login
/products	GET	Get all products
/categories	GET	Get all categories
/users	GET/POST	User management

Base URL: https://api.escuelajs.co/api/v1

🎨 Color Palette

The project uses a custom DaisyUI theme with earthy/green tones:

Color	Hex	Usage
Primary	#2B463C	Dark green
Secondary	#688F4E	Medium green
Accent	#B1D182	Light green
Neutral	#F4F1E9	Cream/beige

📝 License

This project is under license from MIT. For more details, see the LICENSE file.

Made with ❤️ by Wildan Fadh

Back to top