https://github.com/arnobt78/ebookstore--react
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/ebookstore--react
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: 6 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/ebookstore--react
- Owner: arnobt78
- Created: 2024-08-31T00:54:05.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-07-01T00:30:33.000Z (6 months ago)
- Last Synced: 2025-07-01T01:32:33.701Z (6 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.02 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# eBook Store - React
             
---
## Project Summary
**eBookStore--React** is a full-featured E-Commerce web application built with React. Designed for ordering codebooks, it demonstrates modern web development with a robust, global state-managed frontend and a mock backend. The project is ideal for learning full-stack concepts, React best practices, and real-world deployment (Netlify & Render). It showcases advanced routing, authentication, CRUD operations, and seamless integration between frontend and backend.
## Demo Links
- **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. [Demo Links](#demo-links)
4. [Project Structure](#project-structure)
5. [Technology Stack](#technology-stack)
6. [Installation & Setup](#installation--setup)
- [Prerequisites](#prerequisites)
- [Frontend Setup](#frontend-setup)
- [Backend Setup](#backend-setup)
- [Environment Variables](#environment-variables)
7. [Available Scripts](#available-scripts)
8. [Deployment](#deployment)
- [Netlify (Frontend)](#netlify-frontend)
- [Render (Backend)](#render-backend)
9. [API & Routing](#api--routing)
10. [Component & Feature Walkthrough](#component--feature-walkthrough)
11. [Learning Resources](#learning-resources)
12. [Example Usage](#example-usage)
13. [Keywords](#keywords)
14. [Conclusion](#conclusion)
---
## Project Overview
eBookStore--React is a demonstration of a scalable and modular React E-Commerce site. Users can browse, search, and order codebooks, register/login (with JWT-based authentication), and manage their cart—all with persistent state. The backend is a mock server (JSON Server + Auth), making the project easy to run locally without extra setup.
- **Frontend:** React (with global state)
- **Backend:** JSON Server + JSON Server Auth (mock REST API)
- **Deployment:** Netlify (Frontend), Render (Backend)
---
## 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**
- 🚀 **Deployed & Production-Ready Workflow**
- 🧪 **Testing Setup**
- ⚙️ **Environment Variables for Security**
- 📝 **Example Scripts & Learning Resources**
---
## Project Structure
```
eBookStore--React/
├── data/ # Mock database & routes config
│ ├── db.json
│ └── routes.json
├── 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
│ ├── styles/ # Tailwind / CSS styles
│ ├── utils/ # Utility functions (API, helpers)
│ ├── App.js # Root component & routing
│ ├── index.js # Entry point
│ └── ...other files
├── .env # Environment variables (not committed)
├── package.json # Project metadata & dependencies
├── tailwind.config.js # Tailwind CSS config
├── netlify.toml # Netlify deployment 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, Axios/Fetch
---
## Installation & Setup
### Prerequisites
- [Node.js](https://nodejs.org/en/) (v14+ recommended)
- npm (comes with Node.js)
---
### Frontend Setup
1. **Clone the repository:**
```bash
git clone https://github.com/arnobt78/eBookStore--React.git
cd eBookStore--React
```
2. **Install dependencies:**
```bash
npm install
```
3. **Install React Router:**
```bash
npm install react-router-dom
```
---
### Backend Setup
1. **Install JSON Server and Auth:**
```bash
npm install -D json-server json-server-auth
```
2. **Run JSON Server:**
```bash
npx json-server data/db.json
```
3. **Run Auth Server (in a second terminal):**
```bash
npx json-server data/db.json -m ./node_modules/json-server-auth -r data/routes.json --port 8000
```
> The React app runs on port 3000. The backend (mock server) runs on port 8000.
---
### Environment Variables
Create a `.env` file in your root project directory:
```
REACT_APP_HOST=http://localhost:8000
REACT_APP_GUEST_LOGIN=arnob@example.com
REACT_APP_GUEST_PASSWORD=learnreact
```
---
## Available Scripts
Within the project directory, you can run:
- **Start Development Server**
```bash
npm start
```
Open [http://localhost:3000](http://localhost:3000) in your browser.
- **Run Tests**
```bash
npm test
```
Launches the test runner in interactive mode.
- **Build for Production**
```bash
npm run build
```
- **Eject Configuration** (irreversible)
```bash
npm run eject
```
---
## Deployment
### Netlify (Frontend)
1. Login at [Netlify](https://app.netlify.com/).
2. Import project from GitHub.
3. Configure environment variables (`Site settings > Build & deploy > Environment > Environment variables`).
4. Deploy site.
5. For 404 issues, see:
- [Netlify React Router 404 Fix 1](https://stackoverflow.com/questions/58065603/netlify-renders-404-on-page-refresh-using-react-and-react-router)
- [Netlify Redirects Docs](https://www.netlify.com/blog/2019/01/16/redirect-rules-for-all-how-to-configure-redirects-for-your-static-site/)
---
### Render (Backend)
1. Login at [Render](https://render.com/).
2. Create a new Web Service, select your backend repo.
3. Deploy.
4. For deployment errors, check logs and push fixes to `main` branch.
---
## API & Routing
- **Backend REST API** (mocked with JSON Server + Auth)
- `/books` — Fetch all books
- `/cart` — Get/add/remove items in cart
- `/users` — User registration/login (JWT)
- **Custom routes** configured in `data/routes.json`
- **Frontend Routing** (React Router)
- `/` — Home
- `/login` — Login
- `/register` — Signup
- `/books` — Book listing
- `/cart` — Shopping cart
- `/profile` — User profile
- ...and more
---
## Component & Feature Walkthrough
- **Global State Management:** Uses React's Context API for cart and auth state.
- **Authentication:** JWT-based, login/register with protected routes.
- **Cart:** Add/remove books, persistent across sessions.
- **Book CRUD:** List, add, and remove books via API.
- **Responsive UI:** Tailwind CSS for modern design.
- **Custom Hooks:** For API calls and state logic.
- **API Layer:** Centralized utility for all server interactions.
- **Error Handling:** Graceful fallbacks for failed requests.
- **Testing:** Ready for expansion with React Testing Library.
---
## Learning Resources
- [Create React App Docs](https://facebook.github.io/create-react-app/docs/getting-started)
- [React Documentation](https://reactjs.org/)
- [React Router](https://reactrouter.com/en/main)
- [JSON Server](https://www.npmjs.com/package/json-server)
- [JSON Server Auth](https://www.npmjs.com/package/json-server-auth)
- [JWT Debugger](https://jwt.io/#debugger-io)
- [Netlify Docs](https://docs.netlify.com/)
- [Render Docs](https://render.com/docs)
---
## Example Usage
**Sample API Call:**
```js
// src/utils/api.js
export async function loginUser(email, password) {
const response = await fetch(`${process.env.REACT_APP_HOST}/login`, {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({ email, password })
});
return response.json();
}
```
**Sample Route:**
```jsx
// src/App.js
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import Login from './pages/Login';
function App() {
return (
} />
} />
{/* ...other routes */}
);
}
```
---
## 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`
---
## Conclusion
**eBookStore--React** is not just a project—it's a learning journey. This repository 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! 🚀
Thank you for using and learning from this project. If you have questions or suggestions, feel free to open an issue or pull request.
---