https://github.com/iamusmanawan/api_handling
Handling API's as they are handled in the production. Dealing with the race condition, and improving the efficiency of the APIs.
https://github.com/iamusmanawan/api_handling
abort-controller custom-react-query query-parameter race-conditions
Last synced: about 1 year ago
JSON representation
Handling API's as they are handled in the production. Dealing with the race condition, and improving the efficiency of the APIs.
- Host: GitHub
- URL: https://github.com/iamusmanawan/api_handling
- Owner: iAmUsmanAwan
- Created: 2024-12-13T06:12:18.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-28T23:25:08.000Z (about 1 year ago)
- Last Synced: 2025-03-01T00:36:52.768Z (about 1 year ago)
- Topics: abort-controller, custom-react-query, query-parameter, race-conditions
- Language: JavaScript
- Homepage:
- Size: 784 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🚀 API Handling App
## 🌟 Overview
This project is a demonstration of my expertise in building **full-stack applications** using modern technologies. The app consists of a **separate frontend (React)** and **backend (Node.js with Express.js)** to showcase API handling, data fetching, and efficient state management.
## ✨ Features
- 🛠️ **Backend API with Express.js**: Provides product data with search functionality.
- 🎨 **Frontend with React**: Fetches data from the backend and implements a search feature.
- 🔗 **Axios for API Calls**: Ensures efficient communication between frontend and backend.
- ⏳ **Loading and Error Handling**: Implements loading states and error messages for a better user experience.
- 🚦 **AbortController for Request Cancellation**: Prevents unnecessary API calls and handles request race conditions.
## 🛠️ Technologies Used
- ⚡ **Backend**: Node.js, Express.js
- 🎭 **Frontend**: React, Axios
- 🔄 **State Management**: React Hooks (useState, useEffect)
## 🏁 Getting Started
### 📥 Clone the Repository
```sh
git clone https://github.com/iAmUsmanAwan/API_Handling.git
cd API_Handling
```
### 🔧 Backend Setup
```sh
cd backend
npm install
npm start
```
- The server runs on `http://localhost:3000/api/products`
### 💻 Frontend Setup
```sh
cd frontend
npm install
npm run dev
```
- The app runs on `http://localhost:5173`
## 📌 API Endpoints
- 📜 **Get All Products**: `GET /api/products`
- 🔍 **Search Products**: `GET /api/products?search={query}`
## 🤝 Contribute & Support
If you find this project helpful, please consider **starring the repository** ⭐ and **following me** on [GitHub](https://github.com/iAmUsmanAwan)! 🚀