Inventory Management App with React and TypeScript

📝 Instructions

This project consists of developing the frontend for an Inventory Management Application using React and TypeScript, integrating it with the backend built in FastAPI.

Before starting, we recommend setting up the backend by following this project:
🔗 Inventory Management API with FastAPI

If you don’t have it yet, you can start using test data.

📂 Project Structure

Organize the project files by creating the following folders inside src/:

/src
  /components
    ├── InventoryForm.tsx
    ├── InventoryList.tsx
  /pages
    ├── Home.tsx
    ├── AddItem.tsx
  /services
    ├── api.ts
  App.tsx
  index.tsx

• InventoryForm.tsx: Form to add new products.
• InventoryList.tsx: List of products fetched from the backend.
• api.ts: File to handle HTTP requests to the backend.

1. 🔧 Install Dependencies

Run the following command to install the necessary libraries:

1npm install axios react-router-dom

2. 🔌 Connect to the Backend

In api.ts, configure Axios to interact with the FastAPI backend:

1import axios from "axios";
2
3const API_URL = "http://localhost:8000/api"; // Replace with your backend URL
4
5export interface InventoryItem {
6  id?: number;
7  name: string;
8  quantity: number;
9  price: number;
10}
11
12export const getInventory = async (): Promise<InventoryItem[]> => {
13  const response = await axios.get(`${API_URL}/items`);
14  return response.data;
15};
16
17export const addInventoryItem = async (item: InventoryItem) => {
18  await axios.post(`${API_URL}/items`, item);
19};

3. 🗂️ Display the Product List

In InventoryList.tsx, fetch and display products from the backend.

4. 📝 Add New Products

In InventoryForm.tsx, create a form to add products to the inventory.

5. 🚏 Set Up Routing and Pages

In App.tsx, configure the routes. It might look something like this:

1import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
2import InventoryList from "./components/InventoryList";
3import InventoryForm from "./components/InventoryForm";
4
5function App() {
6  return (
7    <Router>
8      <Routes>
9        <Route path="/" element={<InventoryList />} />
10        <Route path="/add" element={<InventoryForm />} />
11      </Routes>
12    </Router>
13  );
14}
15
16export default App;

🎨 Improve the User Experience

• Use CSS Modules, TailwindCSS, or Styled Components to enhance the design.
• Add a navigation bar to facilitate page navigation.
• Implement form validations to prevent incorrect data input.
• Add an option to edit and delete products from the list.

🚀 Bonus: Deploy Your Application

• Deploy your frontend on Vercel or Netlify.
• Make sure to configure the correct backend URL in api.ts if deploying the API elsewhere.

🎉 Congratulations! You now have a fully functional Inventory Management Application built with React, TypeScript, and FastAPI. 🚀