{"id":29245775,"url":"https://github.com/arnobt78/ebookstore--react","last_synced_at":"2025-07-03T22:38:15.100Z","repository":{"id":302177211,"uuid":"850136675","full_name":"arnobt78/eBookStore--React","owner":"arnobt78","description":"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.","archived":false,"fork":false,"pushed_at":"2025-07-01T00:30:33.000Z","size":1072,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-01T01:32:33.701Z","etag":null,"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"],"latest_commit_sha":null,"homepage":"https://ebookstore-arnob.netlify.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/arnobt78.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-08-31T00:54:05.000Z","updated_at":"2025-07-01T00:30:36.000Z","dependencies_parsed_at":"2025-07-01T01:33:59.794Z","dependency_job_id":"93fbeae9-fba5-4526-8a87-9a3c0d8b8c7b","html_url":"https://github.com/arnobt78/eBookStore--React","commit_stats":null,"previous_names":["arnobt78/ebookstore--react"],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/arnobt78/eBookStore--React","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FeBookStore--React","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FeBookStore--React/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FeBookStore--React/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FeBookStore--React/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/arnobt78","download_url":"https://codeload.github.com/arnobt78/eBookStore--React/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FeBookStore--React/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263415911,"owners_count":23463109,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["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"],"created_at":"2025-07-03T22:38:13.923Z","updated_at":"2025-07-03T22:38:15.020Z","avatar_url":"https://github.com/arnobt78.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# eBook Store - React\n\n![Screenshot 2024-09-03 at 19 04 34](https://github.com/user-attachments/assets/a1701da8-19dc-4493-b02d-f2cb4e37feea) ![Screenshot 2024-09-03 at 19 04 50](https://github.com/user-attachments/assets/580eb690-e02b-4123-be4f-7c6b82bb4985) ![Screenshot 2024-09-03 at 19 05 04](https://github.com/user-attachments/assets/695f1bd5-3d8f-4049-9a11-f3f3a7805fda) ![Screenshot 2024-09-03 at 19 05 24](https://github.com/user-attachments/assets/25cf13dc-84c3-46f7-a9f9-9449da72123a) ![Screenshot 2024-09-03 at 19 06 17](https://github.com/user-attachments/assets/f35ea3d3-43ba-4114-8508-fb6509af8232) ![Screenshot 2024-09-03 at 19 07 19](https://github.com/user-attachments/assets/b8d5f055-7719-47d7-901c-f86b7b7f78f5) ![Screenshot 2024-09-03 at 19 07 42](https://github.com/user-attachments/assets/64583a22-c1b6-42e3-b459-d9c95002b2af) ![Screenshot 2024-09-03 at 19 07 52](https://github.com/user-attachments/assets/8772d23c-f95f-454d-957f-16d98936cf32) ![Screenshot 2024-09-03 at 19 08 45](https://github.com/user-attachments/assets/5e1a348b-f873-463d-9e8c-27e4f1e12aff) ![Screenshot 2024-09-03 at 19 09 19](https://github.com/user-attachments/assets/2dafa0c2-451a-4333-99a8-0167d9493df4) ![Screenshot 2024-09-03 at 19 09 29](https://github.com/user-attachments/assets/7a565cef-3caf-4295-b1b0-b3cc35086276) ![Screenshot 2024-09-03 at 19 09 43](https://github.com/user-attachments/assets/26854077-9177-40c6-9337-3bb3ec0ebd19) ![Screenshot 2024-09-03 at 19 10 10](https://github.com/user-attachments/assets/006d3b5b-a967-4dd6-9dee-2bf662c4d6c2) ![Screenshot 2024-09-03 at 19 04 12](https://github.com/user-attachments/assets/fbfa7567-799e-4415-b37d-0a82fa96fbc7)\n\n---\n\n## Project Summary\n\n**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 \u0026 Render). It showcases advanced routing, authentication, CRUD operations, and seamless integration between frontend and backend.\n\n## Demo Links\n\n- **Frontend Live:** [https://ebookstore-arnob.netlify.app](https://ebookstore-arnob.netlify.app)\n- **Backend Live:** [https://codebook-mock-server-j8n3.onrender.com](https://codebook-mock-server-j8n3.onrender.com)\n- **Backend Source:** [eBookStore-Mock-Server Repo](https://github.com/arnobt78/eBookStore-Mock-Server)\n\n---\n\n## Table of Contents\n\n1. [Project Overview](#project-overview)\n2. [Key Features](#key-features)\n3. [Demo Links](#demo-links)\n4. [Project Structure](#project-structure)\n5. [Technology Stack](#technology-stack)\n6. [Installation \u0026 Setup](#installation--setup)\n    - [Prerequisites](#prerequisites)\n    - [Frontend Setup](#frontend-setup)\n    - [Backend Setup](#backend-setup)\n    - [Environment Variables](#environment-variables)\n7. [Available Scripts](#available-scripts)\n8. [Deployment](#deployment)\n    - [Netlify (Frontend)](#netlify-frontend)\n    - [Render (Backend)](#render-backend)\n9. [API \u0026 Routing](#api--routing)\n10. [Component \u0026 Feature Walkthrough](#component--feature-walkthrough)\n11. [Learning Resources](#learning-resources)\n12. [Example Usage](#example-usage)\n13. [Keywords](#keywords)\n14. [Conclusion](#conclusion)\n\n---\n\n## Project Overview\n\neBookStore--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.\n\n- **Frontend:** React (with global state)\n- **Backend:** JSON Server + JSON Server Auth (mock REST API)\n- **Deployment:** Netlify (Frontend), Render (Backend)\n\n---\n\n## Key Features\n\n- 💡 **Modern React with Hooks \u0026 Context API**\n- 🛒 **Shopping Cart Functionality**\n- 🔑 **User Authentication (JWT)**\n- 🔄 **RESTful API Integration**\n- 🔗 **React Router v6 for Navigation**\n- 🌐 **Responsive UI with Tailwind CSS**\n- 🚀 **Deployed \u0026 Production-Ready Workflow**\n- 🧪 **Testing Setup**\n- ⚙️ **Environment Variables for Security**\n- 📝 **Example Scripts \u0026 Learning Resources**\n\n---\n\n## Project Structure\n\n```\neBookStore--React/\n├── data/                  # Mock database \u0026 routes config\n│   ├── db.json\n│   └── routes.json\n├── public/                # Static assets and index.html\n├── src/                   # Main React source code\n│   ├── components/        # Reusable and page components\n│   ├── context/           # Global state (Context API, Providers)\n│   ├── hooks/             # Custom React hooks\n│   ├── pages/             # Page-level components\n│   ├── styles/            # Tailwind / CSS styles\n│   ├── utils/             # Utility functions (API, helpers)\n│   ├── App.js             # Root component \u0026 routing\n│   ├── index.js           # Entry point\n│   └── ...other files\n├── .env                   # Environment variables (not committed)\n├── package.json           # Project metadata \u0026 dependencies\n├── tailwind.config.js     # Tailwind CSS config\n├── netlify.toml           # Netlify deployment config\n└── README.md              # Documentation (this file)\n```\n\n---\n\n## Technology Stack\n\n- **Frontend:** React, React Router, Context API, Tailwind CSS\n- **Backend:** JSON Server, JSON Server Auth (Mock REST API)\n- **Testing:** React Testing Library, Jest\n- **Deployment:** Netlify (Frontend), Render (Backend)\n- **Utilities:** dotenv, JWT, Axios/Fetch\n\n---\n\n## Installation \u0026 Setup\n\n### Prerequisites\n\n- [Node.js](https://nodejs.org/en/) (v14+ recommended)\n- npm (comes with Node.js)\n\n---\n\n### Frontend Setup\n\n1. **Clone the repository:**\n    ```bash\n    git clone https://github.com/arnobt78/eBookStore--React.git\n    cd eBookStore--React\n    ```\n\n2. **Install dependencies:**\n    ```bash\n    npm install\n    ```\n\n3. **Install React Router:**\n    ```bash\n    npm install react-router-dom\n    ```\n\n---\n\n### Backend Setup\n\n1. **Install JSON Server and Auth:**\n    ```bash\n    npm install -D json-server json-server-auth\n    ```\n\n2. **Run JSON Server:**\n    ```bash\n    npx json-server data/db.json\n    ```\n\n3. **Run Auth Server (in a second terminal):**\n    ```bash\n    npx json-server data/db.json -m ./node_modules/json-server-auth -r data/routes.json --port 8000\n    ```\n\n   \u003e The React app runs on port 3000. The backend (mock server) runs on port 8000.\n\n---\n\n### Environment Variables\n\nCreate a `.env` file in your root project directory:\n\n```\nREACT_APP_HOST=http://localhost:8000\nREACT_APP_GUEST_LOGIN=arnob@example.com\nREACT_APP_GUEST_PASSWORD=learnreact\n```\n\n---\n\n## Available Scripts\n\nWithin the project directory, you can run:\n\n- **Start Development Server**\n    ```bash\n    npm start\n    ```\n    Open [http://localhost:3000](http://localhost:3000) in your browser.\n\n- **Run Tests**\n    ```bash\n    npm test\n    ```\n    Launches the test runner in interactive mode.\n\n- **Build for Production**\n    ```bash\n    npm run build\n    ```\n\n- **Eject Configuration** (irreversible)\n    ```bash\n    npm run eject\n    ```\n\n---\n\n## Deployment\n\n### Netlify (Frontend)\n\n1. Login at [Netlify](https://app.netlify.com/).\n2. Import project from GitHub.\n3. Configure environment variables (`Site settings \u003e Build \u0026 deploy \u003e Environment \u003e Environment variables`).\n4. Deploy site.\n5. For 404 issues, see:\n   - [Netlify React Router 404 Fix 1](https://stackoverflow.com/questions/58065603/netlify-renders-404-on-page-refresh-using-react-and-react-router)\n   - [Netlify Redirects Docs](https://www.netlify.com/blog/2019/01/16/redirect-rules-for-all-how-to-configure-redirects-for-your-static-site/)\n\n---\n\n### Render (Backend)\n\n1. Login at [Render](https://render.com/).\n2. Create a new Web Service, select your backend repo.\n3. Deploy.\n4. For deployment errors, check logs and push fixes to `main` branch.\n\n---\n\n## API \u0026 Routing\n\n- **Backend REST API** (mocked with JSON Server + Auth)\n    - `/books` — Fetch all books\n    - `/cart` — Get/add/remove items in cart\n    - `/users` — User registration/login (JWT)\n    - **Custom routes** configured in `data/routes.json`\n- **Frontend Routing** (React Router)\n    - `/` — Home\n    - `/login` — Login\n    - `/register` — Signup\n    - `/books` — Book listing\n    - `/cart` — Shopping cart\n    - `/profile` — User profile\n    - ...and more\n\n---\n\n## Component \u0026 Feature Walkthrough\n\n- **Global State Management:** Uses React's Context API for cart and auth state.\n- **Authentication:** JWT-based, login/register with protected routes.\n- **Cart:** Add/remove books, persistent across sessions.\n- **Book CRUD:** List, add, and remove books via API.\n- **Responsive UI:** Tailwind CSS for modern design.\n- **Custom Hooks:** For API calls and state logic.\n- **API Layer:** Centralized utility for all server interactions.\n- **Error Handling:** Graceful fallbacks for failed requests.\n- **Testing:** Ready for expansion with React Testing Library.\n\n---\n\n## Learning Resources\n\n- [Create React App Docs](https://facebook.github.io/create-react-app/docs/getting-started)\n- [React Documentation](https://reactjs.org/)\n- [React Router](https://reactrouter.com/en/main)\n- [JSON Server](https://www.npmjs.com/package/json-server)\n- [JSON Server Auth](https://www.npmjs.com/package/json-server-auth)\n- [JWT Debugger](https://jwt.io/#debugger-io)\n- [Netlify Docs](https://docs.netlify.com/)\n- [Render Docs](https://render.com/docs)\n\n---\n\n## Example Usage\n\n**Sample API Call:**\n\n```js\n// src/utils/api.js\nexport async function loginUser(email, password) {\n  const response = await fetch(`${process.env.REACT_APP_HOST}/login`, {\n    method: 'POST',\n    headers: {'Content-Type': 'application/json'},\n    body: JSON.stringify({ email, password })\n  });\n  return response.json();\n}\n```\n\n**Sample Route:**\n\n```jsx\n// src/App.js\nimport { BrowserRouter, Routes, Route } from 'react-router-dom';\nimport Home from './pages/Home';\nimport Login from './pages/Login';\n\nfunction App() {\n  return (\n    \u003cBrowserRouter\u003e\n      \u003cRoutes\u003e\n        \u003cRoute path=\"/\" element={\u003cHome /\u003e} /\u003e\n        \u003cRoute path=\"/login\" element={\u003cLogin /\u003e} /\u003e\n        {/* ...other routes */}\n      \u003c/Routes\u003e\n    \u003c/BrowserRouter\u003e\n  );\n}\n```\n\n---\n\n## Keywords\n\n`React`, `E-Commerce`, `Mock Server`, `JWT Auth`, `React Router`, `Tailwind CSS`, `Full Stack`, `Netlify`, `Render`, `Learning Project`, `REST API`, `Codebooks`, `Global State`, `Context API`\n\n---\n\n## Conclusion\n\n**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!\n\n---\n\n## Happy Coding! 🚀\n\nThank you for using and learning from this project. If you have questions or suggestions, feel free to open an issue or pull request.\n\n---\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farnobt78%2Febookstore--react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farnobt78%2Febookstore--react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farnobt78%2Febookstore--react/lists"}