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
- Backend-Live: https://codebook-mock-server-j8n3.onrender.com
- Backend-Source: eBookStore-Mock-Server Repo
- Project Overview
- Key Features
- Live Demo
- Project Structure
- Technology Stack
- Installation & Setup
- Usage & Walkthrough
- Component & API Reference
- Routing & Navigation
- Customization & Reuse
- Keywords
- Conclusion
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.
- 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
- Frontend: https://ebookstore-arnob.netlify.app
- Backend: https://codebook-mock-server-j8n3.onrender.com
- Author Portfolio: https://arnob-mahmud.vercel.app/
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)- 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
- Node.js (v14+ recommended)
- npm (comes with Node.js)
# 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# 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 8000Create 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- 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.
import { ProductCard } from "./components";
<ProductCard product={product} />;import { getProductList } from "./services";
const products = await getProductList("searchTerm");Header,Footer,ProductCard,Rating,DropdownLoggedIn,DropdownLoggedOut,ScrollToTop,LoadingSpinner- Pages: Home, Products, Product Detail, Cart, Order, Dashboard, Login, Register, PageNotFound
CartContext,FilterContext,LoadingContextfor global state- Reducers for cart and filter logic
getProductList,getProduct,getFeaturedList,getUser,getUserOrders,createOrder,login,register,logout
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.
- 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.
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
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!
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/.
Enjoy building and learning! 🚀
Thank you! 😊