RAG Data Uploader

This is a minimal React front‑end for your Retrieval‑Augmented Generation (RAG) school project. It allows you to:

• Fetch and list available subjects from the back‑end.
• Select a subject to view its details and list of lessons.
• Select a lesson and upload custom text (with an optional title) associated with that subject/lesson.

The client uses the API endpoints documented in your OpenAPI file:

• GET /api/subjects/ — list available subjects
• GET /api/lessons/?subject=<subject_id> — list lessons for a subject
• POST /api/upload-text — upload a text payload for a subject/lesson

Prerequisites

1. Node.js (≥14) installed on your machine.
2. The back‑end API running locally or remotely and accepting requests at a known base URL.

Configuration

The front‑end expects an environment variable called VITE_API_BASE_URL to prefix API calls. If your API is served from http://localhost:8000, you would set:

export VITE_API_BASE_URL=http://localhost:8000

If you do not provide this environment variable the client assumes the API is served from the same origin as the front‑end (i.e. relative paths such as /api/subjects/).

To set local environment variables for Vite, you can create a .env file in the project root with the following content:

VITE_API_BASE_URL=http://localhost:8000

Running the application

1. Install dependencies:

cd rag-data-frontend
npm install

2. Start the development server:

npm run dev

Vite will start a server (default port 3000) and automatically open the app in your browser. Any changes you make to the source files will hot reload during development.

3. Build for production:

npm run build

The optimized, minified output will be placed in the dist/ directory. You can serve these static files from any HTTP server.

Customizing

This project was kept deliberately simple so you can adapt it to your needs:

• Styling: The default CSS is minimal. You can swap it out for Tailwind, Bootstrap or your own styles.
• Fields: The upload payload currently uses the lesson’s chapter property as the lesson_number. Adjust this logic in src/App.jsx if your API expects a different value.
• Error handling: Basic errors are surfaced under the form. You can extend this to surface more detailed error messages or integrate a notification library.

Happy coding!