https://github.com/arnobt78/ecommerce-shop-1-bookstore--react-fullstack
eBookStore is a full-fledged React E-Commerce Web Application (Global Level State Application) where you can place an order for codebooks. Frontend (deployed on Netlify) and Backend (deployed on Render) are separately developed here. Filter Properties, Search Option, JSON-Server, JSON-Server-Auth, JSON Web Tokens (JWT), Protect Routes are used.
https://github.com/arnobt78/ecommerce-shop-1-bookstore--react-fullstack
ecommerce ecommerce-website html javascript json-api json-auth-server json-server json-web-tokens jwt-authentication netlify-deployment react react-components react-hooks react-router react-router-dom reactjs render-deployment session-storage tailwindcss
Last synced: 8 months ago
JSON representation
eBookStore is a full-fledged React E-Commerce Web Application (Global Level State Application) where you can place an order for codebooks. Frontend (deployed on Netlify) and Backend (deployed on Render) are separately developed here. Filter Properties, Search Option, JSON-Server, JSON-Server-Auth, JSON Web Tokens (JWT), Protect Routes are used.
- Host: GitHub
- URL: https://github.com/arnobt78/ecommerce-shop-1-bookstore--react-fullstack
- Owner: arnobt78
- Created: 2024-08-31T00:54:05.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2025-08-23T22:13:29.000Z (10 months ago)
- Last Synced: 2025-08-24T09:17:39.065Z (10 months ago)
- Topics: ecommerce, ecommerce-website, html, javascript, json-api, json-auth-server, json-server, json-web-tokens, jwt-authentication, netlify-deployment, react, react-components, react-hooks, react-router, react-router-dom, reactjs, render-deployment, session-storage, tailwindcss
- Language: JavaScript
- Homepage: https://ebookstore-arnob.netlify.app
- Size: 1.04 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# CodeBook – Modern Computer Science eBook Store - React, Express E-Commerce Website
            
---
CodeBook is a full-featured, modern eBook store built with React, designed for computer science learners and developers. It demonstrates best practices in React, global state management, authentication, RESTful API integration, and responsive UI with Tailwind CSS. The project is ideal for learning, teaching, and real-world deployment (Netlify & Render). Users can browse, search, and order the latest codebooks and e-books, with a seamless frontend and a mock backend.
- **Frontend-Live:** [https://ebookstore-arnob.netlify.app](https://ebookstore-arnob.netlify.app)
- **Backend-Live:** [https://codebook-mock-server-j8n3.onrender.com](https://codebook-mock-server-j8n3.onrender.com)
- **Backend-Source:** [eBookStore-Mock-Server Repo](https://github.com/arnobt78/eBookStore-Mock-Server)
---
## Table of Contents
1. [Project Overview](#project-overview)
2. [Key Features](#key-features)
3. [Live Demo](#live-demo)
4. [Project Structure](#project-structure)
5. [Technology Stack](#technology-stack)
6. [Installation & Setup](#installation--setup)
7. [Usage & Walkthrough](#usage--walkthrough)
8. [Component & API Reference](#component--api-reference)
9. [Routing & Navigation](#routing--navigation)
10. [Customization & Reuse](#customization--reuse)
11. [Keywords](#keywords)
12. [Conclusion](#conclusion)
---
## Project Overview
CodeBook is a scalable, modular React e-commerce site for codebooks and eBooks. It features JWT-based authentication, protected routes, persistent cart, and a robust API layer. The backend is a mock server (JSON Server + Auth), making it easy to run locally or deploy.
---
## Key Features
- Modern React with Hooks & Context API
- Shopping Cart Functionality
- User Authentication (JWT)
- RESTful API Integration
- React Router v6 for Navigation
- Responsive UI with Tailwind CSS
- Global Loading Spinner (UX)
- Error Handling & Toast Notifications
- Modular Components & Custom Hooks
- Ready for Netlify (Frontend) & Render (Backend) Deployment
---
## Live Demo
- **Frontend:**
- **Backend:**
- **Author Portfolio:**
---
## Project Structure
```bash
codebook/
├── data/ # Mock database & routes config
├── public/ # Static assets and index.html
├── src/ # Main React source code
│ ├── components/ # Reusable and page components
│ ├── context/ # Global state (Context API, Providers)
│ ├── hooks/ # Custom React hooks
│ ├── pages/ # Page-level components
│ ├── reducers/ # Reducers for state management
│ ├── routes/ # Routing components
│ ├── services/ # API and data services
│ ├── App.js # Root component & routing
│ ├── index.js # Entry point
│ └── ...other files
├── package.json # Project metadata & dependencies
├── tailwind.config.js # Tailwind CSS config
└── README.md # Documentation (this file)
```
---
## Technology Stack
- **Frontend:** React, React Router, Context API, Tailwind CSS
- **Backend:** JSON Server, JSON Server Auth (Mock REST API)
- **Testing:** React Testing Library, Jest
- **Deployment:** Netlify (Frontend), Render (Backend)
- **Utilities:** dotenv, JWT, Fetch API, React Toastify
---
## Installation & Setup
### Prerequisites
- Node.js (v14+ recommended)
- npm (comes with Node.js)
### Frontend Setup
```bash
# Clone the repository
git clone https://github.com/arnobt78/eBookStore--React.git
cd eBookStore--React
# Install dependencies
npm install
# Start the development server
npm start
# Visit http://localhost:3000
```
### Backend Setup (Mock Server)
```bash
# Install JSON Server and Auth
npm install -D json-server json-server-auth
# Run JSON Server
npx json-server data/db.json
# Run Auth Server (in a second terminal)
npx json-server data/db.json -m ./node_modules/json-server-auth -r data/routes.json --port 8000
```
### Environment Variables
Create a `.env` file in your root project directory:
```env
REACT_APP_HOST=http://localhost:8000
REACT_APP_GUEST_LOGIN=arnob@example.com
REACT_APP_GUEST_PASSWORD=learnreact
```
---
## Usage & Walkthrough
### Main Functionalities
- **Browse & Search:** Explore eBooks, filter by best seller, in stock, price, etc.
- **Product Detail:** View detailed info, add/remove from cart.
- **Cart:** Persistent cart, checkout, and order summary.
- **Authentication:** Register, login, JWT-protected routes.
- **Dashboard:** View your orders (protected route).
- **Global Loading Spinner:** Shows while fetching data.
- **Error Handling:** Toast notifications for errors.
### Example: Using a Component
```jsx
import { ProductCard } from "./components";
;
```
### Example: Fetching Products
```js
import { getProductList } from "./services";
const products = await getProductList("searchTerm");
```
---
## Component & API Reference
### Main Components
- `Header`, `Footer`, `ProductCard`, `Rating`, `DropdownLoggedIn`, `DropdownLoggedOut`, `ScrollToTop`, `LoadingSpinner`
- **Pages:** Home, Products, Product Detail, Cart, Order, Dashboard, Login, Register, PageNotFound
### Context & State
- `CartContext`, `FilterContext`, `LoadingContext` for global state
- Reducers for cart and filter logic
### API Services
- `getProductList`, `getProduct`, `getFeaturedList`, `getUser`, `getUserOrders`, `createOrder`, `login`, `register`, `logout`
---
## Routing & Navigation
Routes are defined in `src/routes/AllRoutes.js`:
- `/` — Home
- `/products` — Product listing
- `/products/:id` — Product detail
- `/cart` — Cart (protected)
- `/order-summary` — Order summary (protected)
- `/dashboard` — User dashboard (protected)
- `/login` — Login
- `/register` — Register
- `*` — 404 Page Not Found
Protected routes use the `ProtectedRoute` component and require authentication.
---
## Customization & Reuse
- **Component Reuse:** All UI components are modular and can be imported into other projects.
- **API Layer:** Easily adapt the API services for your own backend.
- **Styling:** Tailwind CSS makes it easy to customize the look and feel.
- **State Management:** Context and reducers are reusable for other React apps.
---
## Keywords
`React`, `E-Commerce`, `Mock Server`, `JWT Auth`, `React Router`, `Tailwind CSS`, `Full Stack`, `Netlify`, `Render`, `Learning Project`, `REST API`, `Codebooks`, `Global State`, `Context API`, `Shopping Cart`, `Modern Web`, `Reusable Components`, `Teaching`, `Open Source`
---
## Conclusion
CodeBook is not just a project—it's a learning journey. It combines real-world tech stacks, best practices, and deployment workflows, making it perfect for both beginners and intermediate developers keen to master modern React and full-stack development. Fork, clone, and start coding!
---
## Happy Coding! 🎉
Feel free to use this project repository and extend this project further!
If you have any questions or want to share your work, reach out via GitHub or my portfolio at [https://arnob-mahmud.vercel.app/](https://arnob-mahmud.vercel.app/).
**Enjoy building and learning!** 🚀
Thank you! 😊
---