This is a minimal clone of the ChatGPT website.

The specified requirements were the following:

• Use FastAPI as the backend and React as the frontend.
• Allow users to select between GPT-4o and GPT-4o mini and change the temperature of the responses (0.2, 0.7, and 0.9).
• Request answers in Markdown format and display the answers in respect to the given format.

If the video is not accessible on GitHub README, have a look at it here.

The project is structured as a monorepo with two services:

• frontend: A React application that allows users to interact with the GPT-4o model.
• server: A FastAPI application that serves as the backend for the frontend application.

The frontend service is a Vite React application that uses the Vercel AI SDK to manage chat state and streamed responses from the backend service. The backend service is a FastAPI application that exposes a streaming API backed by Azure OpenAI GPT-4o deployments.

The UI is built with Material UI components and follows Google's Material Design.

• Clone the repository
• Create server/.env file (cf. server/.env.example)
• Restore needed dependencies:

# backend
cd server
uv sync --frozen

# frontend
cd frontend
pnpm install --frozen-lockfile

• Run the services:

docker-compose up

• The frontend service is available at http://localhost:3000
• The backend service is available at http://localhost:8000

REST API can be interactively explored using FastAPI's Swagger UI: http://localhost:8000/docs

The frontend and backend services have their own quality checks. All checks can be run locally with:

make qa

To validate Lighthouse scores against thresholds locally:

make lighthouse

To remove all build artifacts and tool caches for a clean slate (useful for testing cold-cache behaviour):

make clean

More specifically:

These checks are also run on every push to the repository using GitHub Actions.

• Using Next.js only for the frontend was a total overkill. The frontend has since been migrated to a Vite React SPA, which is a better fit for this app.

• Although this is PoC project that uses a monorepo approach to host the entire stack, the production-grade project should use separate repositories for the ease of development, maintenance, and deployment.

• The project could be improved by adding more features like user authentication and saving chat history.