Backend Assignment Documentation
1. Introduction
This document provides an overview of the backend development process, including data
ingestion, API creation, and frontend integration. The project extracts data from an Excel file,
stores it in Firebase, retrieves it using FastAPI, and displays it on a frontend application.
2. Project Setup
2.1 Technologies Used:
Backend: FastAPI, Firebase Realtime Database
Frontend: React.js
Database: Firebase Realtime Database
Other Tools: Pandas, Axios, Uvicorn
2.2 Installation & Setup:
1. Set up a virtual environment:
python -m venv venv
venv\Scripts\activate # Windows
2. Install dependencies:
pip install firebase-admin fastapi uvicorn pandas openpyxl
3. Move Firebase JSON credentials file
(assignment-e66a6-firebase-adminsdk-fbsvc-c5773709cc.json)
into the project directory.
3. Data Ingestion
3.1 Extracting Data from Excel & Uploading to Firebase
The script upload_data.py reads the Excel sheet, converts it into a dictionary, and
uploads it to Firebase.
4. API Development
4.1 FastAPI Setup
The main.py script initializes the FastAPI server and provides an endpoint to fetch stored
data.
Run the API server:
uvicorn main:app --reload
Access the data via http://127.0.0.1:8000/data
5. Frontend Integration
5.1 React App Setup
1. Create a React app:
npx create-react-app frontend
cd frontend
npm start
2. Install axios:
npm install axios
3. Modify App.js to fetch and display data:
import React, { useEffect, useState } from "react";
import axios from "axios";
function App() {
const [data, setData] = useState([]);
useEffect(() => {
axios.get("http://127.0.0.1:8000/data")
.then(response => setData(response.data))
.catch(error => console.error("Error fetching data:", error));
}, []);
return (
<div>
<h1>Client Data</h1>
{data.map((client, index) => (
<div key={index}>
<h2>{client.Name}</h2>
<p><b>Client ID:</b> {client.ClientID}</p>
<p><b>Age:</b> {client.Age}</p>
<p><b>Location:</b> {client.Location}</p>
<p><b>Status:</b> {client.Status}</p>
</div>
))}
</div>
);
}
export default App;
4. To start react app
npm start
6. Output & Results
6.1 API Output
[
{
"Name": "John Doe",
"ClientID": "C1234",
"Age": 35,
"Location": "Mumbai",
"Status": "In Progress",
"Priority": "High",
"Lead Date": "November 25, 2023",
"Follow-up Date": "December 5, 2023",
"Claim Amount": "₹10000",
"Agent Charge": "₹1000",
"Fees Charged": "₹5000",
"Tasks": ["Task1", "Task2"],
"Future Scope": "Follow-up meeting",
"Documents": ["Document1", "Document2"],
"Email": "johndoe@email.com",
"Phone Number": "9876543210"
},
{
"Name": "Jane Smith",
"ClientID": "C5678",
"Age": 42,
"Location": "Delhi",
"Status": "Completed",
"Priority": "Medium",
"Lead Date": "November 20, 2023",
"Follow-up Date": "December 10, 2023",
"Claim Amount": "₹25000",
"Agent Charge": "₹1500",
"Fees Charged": "₹7500",
"Tasks": ["Task3", "Task4"],
"Future Scope": "Finalize Audit",
"Documents": ["Document3", "Document4"],
"Email": "janesmith@email.com",
"Phone Number": "9876543211"
}
]
Final Output
7. Conclusion
This project successfully:
✅ Extracted data from an Excel file and stored it in Firebase.
✅ Developed a FastAPI backend to retrieve the data.
✅ Built a React frontend to display the data.
✅ Successfully displayed client details in a structured format.
8. Future Enhancements
Adding authentication to secure data.
Implementing a search and filter feature in the frontend.
Deploying the backend and frontend online using Heroku/Vercel.
