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
• Backend Live: https://codebook-mock-server-j8n3.onrender.com
• Backend Source: eBookStore-Mock-Server Repo

---

Table of Contents

1. Project Overview
2. Key Features
3. Demo Links
4. Project Structure
5. Technology Stack
6. Installation & Setup
   • Prerequisites
   • Frontend Setup
   • Backend Setup
   • Environment Variables
7. Available Scripts
8. Deployment
   • Netlify (Frontend)
   • Render (Backend)
9. API & Routing
10. Component & Feature Walkthrough
11. Learning Resources
12. Example Usage
13. Keywords
14. 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 (v14+ recommended)
• npm (comes with Node.js)

---

Frontend Setup

1. Clone the repository:

   git clone https://github.com/arnobt78/eBookStore--React.git
   cd eBookStore--React

2. Install dependencies:

   npm install

3. Install React Router:

   npm install react-router-dom

---

Backend Setup

1. Install JSON Server and Auth:

   npm install -D json-server json-server-auth

2. Run JSON Server:

   npx json-server data/db.json

3. 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

   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
[email protected]
REACT_APP_GUEST_PASSWORD=learnreact

---

Available Scripts

Within the project directory, you can run:

• Start Development Server

  npm start

  Open http://localhost:3000 in your browser.

• Run Tests

  npm test

  Launches the test runner in interactive mode.

• Build for Production

  npm run build

• Eject Configuration (irreversible)

  npm run eject

---

Deployment

Netlify (Frontend)

1. Login at Netlify.
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
   • Netlify Redirects Docs

---

Render (Backend)

1. Login at Render.
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
• React Documentation
• React Router
• JSON Server
• JSON Server Auth
• JWT Debugger
• Netlify Docs
• Render Docs

---

Example Usage

Sample API Call:

// 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:

// src/App.js
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import Login from './pages/Login';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/login" element={<Login />} />
        {/* ...other routes */}
      </Routes>
    </BrowserRouter>
  );
}

---

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.

---