Full-stack-api is a my first full-stack web application. The current implementation provides weather forecasts and manages a database of public tender contracts. It features a React-based frontend and a FastAPI backend to work with external APIs from different providers.
My goal with this projects is create web application for data analysis and modelling by gathering data from various sources, processing it, and making it available to consume via a versatile and visually appealing User Interface (UI).
I chose Python because it's one of the most vastly used languages for data analysis, Large Language Models (LLM) implementations and scientific research in general, because of it's compact syntax and the great number of powerful libraries it has for these purposes, some of which I will be implementing in this project in the near future.
I chose Javascript with HTML/CSS because of its great versatility when building browser-based UIs. They give me the freedom to create custom UIs that are dynamic, fast, intuitive and visually appealing.
After conducting some research and trying out different frameworks I chose React and FastAPI for the same reasons I chose the languages they are built on (you see the recurrent theme here):
- Widely used (which means great support).
- Powerful capabilities.
- Relative ease of implementation.
- Great versatility.
With the latter being a very important factor when building custom systems as the one I am planning to build.
The current implementation features:
-
Weather Forecasts: Retrieve weather data from the Met Office based on location and time steps (hourly, three-hourly, or daily).
- The location is retrieved form the web-browser by the UI at the front end and sent to fastAPI server running at the back end via a PUT request.
- The fastAPI server processes the request from the front end and uses a custom client to communicated with the Met Offices API. It retrieves, stores and serves the data to the front end
- The UI processes the data received from the back end and displays the forecast in hourly tables.
-
PCS Contracts Management:
- View live PCS contracts.
- Access archived PCS contracts.
- Render JSON data as collapsible trees for easy navigation.
-
Frontend: Built with React and Vite for a fast and responsive user experience.
-
Backend: Powered by FastAPI for robust and scalable API endpoints.
awesome-project/ ├── client/ # Frontend code │ ├── public/ # Static assets (JSON files, logs, etc.) │ ├── src/ # React components and styles │ ├── package.json # Frontend dependencies │ └── vite.config.js # Vite configuration ├── server/ # Backend code │ ├── main.py # FastAPI application │ ├── utils/ # Utility modules (e.g., PCSClient, MetOfficeClient) │ └── requirements.txt # Backend dependencies └── readme.md # Project documentation
- Frontend:
- Node.js (v16 or later)
- npm or yarn
- Backend:
- Python 3.9 or later
- pip
git clone https://github.com/rigsnv/full-stack-api.git
cd full-stack-apicd client
npm install
npm run dev- Open your browser and navigate to http://localhost:5173.
The Met Office's API requires an API key. You must register with the Met Office in order to get your own API key. Once you get your api key, you need to create a json file named "met_office_api_key.json" and place it inside the ./server/secret directory, as the "met_office_client" looks for that file to get the key and call the Met Office's API. if the file is missing, you will bet an CORS error.
Select "Register" and follow the steps above for the above to make the key available to e the "met_office_client"
The Public Contracts Scotland's API (PCS) doesnt require a key, so it will work without the need to add any files.
- Open a new Terminal and navigate to the project's root directory (full-stack-api).
- Run the following commands which will:
- Navigate to the server directory of the project.
- Create a new Python Virtual Environment
- Activate the virtual environment.
- Upgrade pip (recommended).
- Install the server's dependencies in your newly created virtual environment.
- Start the server.
cd server
python3 -m venv .venv
source .venv/bin/activate
pip install --upgrade pip
pip install -r requirements.txt
fastapi dev main.py- The backend will run at http://127.0.0.1:8000.
- Frontend: http://localhost:5173
- Backend API: http://127.0.0.1:8000
Fast API comes with Swager, which will automatically run at:
- http://127.0.0.1:8000/docs (Swagger UI)
You can run tests sending HTTP requests to the backend fastAPI server using the Swagger UI that comes with fast API and it's preconfigured to run at that endpoint.
- PUT /weather: Update weather data based on location and time steps.
- GET /pcs_contracts: Retrieve live PCS contracts.
- GET /pcs_contracts/archived: Retrieve archived PCS contracts.
- App.jsx: Main application component.
- Navbar.jsx: Navigation bar for switching between pages.
- Contract.jsx: Renders JSON data as a collapsible tree.
- Test.jsx: Demonstrates rendering of JSON data.
- MetOfficeClient: Handles weather data retrieval.
- PCSClient: Manages PCS contracts (live and archived).
- JSON files are stored in client/public/ and logged in file_creation_log.txt.
For development you should add stricks mode in the main.jsx module (./client/src/main.jsx), as in the script below.
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'
createRoot(document.getElementById('root')).render(
<StrictMode>
<App />
</StrictMode>,
)- Implement advanced filtering for PCS contracts.
- Improve UI/UX for JSON tree rendering.
- Add user authentication.
This project is licensed under the MIT License. See the LICENSE file for details.
Ricardo E. Garcia Cerrada
- React
- FastAPI
- Vite