Shoppy is a modern e-commerce frontend built with React, TypeScript, and Redux Toolkit. It features user and admin dashboards, authentication, product management, and more. The app is designed to work with mock data (for local development) or a backend API (for production).
- Browse products, filter by category/price, and search by name
- Add/remove products from cart
- User authentication (register, login, protected routes)
- Admin dashboard for managing products, categories, users, and orders
- Form validation and user profile editing
- Loading, success, and error messages
- Pagination (bonus)
The app uses mock data from public/mock/e-commerce/ for local development. In production, it connects to a backend API (see .env.example).
- Node.js (v18 or newer recommended)
- npm or yarn
-
Clone the repository:
git clone https://github.com/abdullahriad-alghamdi/Shoppy-FrontEnd.git cd Shoppy-FrontEnd -
Install dependencies:
npm install # or yarn install -
Set up environment variables:
- Copy
.env.exampleto.envand fill in your backend URL and other variables as needed.
cp .env.example .env # Edit .env to set VITE_BACKEND_URL, etc. - Copy
-
Run the development server:
npm run dev # or yarn devThe app will be available at
http://localhost:3003. -
Build for production:
npm run build # or yarn build
- Mock data is available in
public/mock/e-commerce/. You can send HTTP requests to these resources for local development. - For production, configure your backend API URL in
.envusingVITE_BACKEND_URL. - Asset files in
public/assets/are served from the root path. Use/assets/filename.extin your code.
src/— Main source code (components, pages, redux slices, routes, styles)public/— Static assets and mock data.env.example— Example environment variables
Pull requests and feedback are welcome! Please review code and provide constructive suggestions.
MIT