Quote Fetching App

This is a beginner-friendly and clean React web application that fetches data from a local db.json file using JSON Server. It displays quotes in a responsive table format and shows an error message if the JSON Server is not running.

🚀 Project Purpose

The main goal of this project is to demonstrate how to fetch API data using the fetch() method in React and handle both success and error scenarios. It introduces beginners to working with mock APIs using JSON Server and dynamic rendering with React.

📸 Screenshots

Form UI Screenshot

🔗 GitHub Repository

https://github.com/Manoj-Gmk/react-jsonserverapi.git

🛠️ Tech Stack

• React

• Vite

• HTML5

• JSON Server

• JavaScript (ES6+)

📁 Project Setup

1. Clone the repository

git clone https://github.com/Manoj-Gmk/react-jsonserverapi.git

2. Navigate to project directory

cd jsonserverapi

3. Install dependencies

npm install

4. Run the development server

npm run dev

5. Run the JSON server command (In New Terminal)

npx json-server --watch db.json --port 5000

5. Open in browser

Visit: (http://localhost:5173)

🧠 Features

• Fetches data using the native fetch() API in React.

• Displays fetched quotes in a styled table.

• Shows a friendly error message if the server is not reachable.

• Uses useEffect and useState React hooks.

• Responsive and clean UI.

• Easy to understand for beginners.

🙋‍♂️ Author

Name: Manoj
Role: Frontend Developer (Fresher)
GitHub: https://github.com/Manoj-Gmk

---

Thank you for visiting! 🌟 Feel free to contribute or give feedback.