Public Contract Scotland
UI
An alternative and improved UI for Public Contract Scotland's Website Database Search
Public Contract Scotland | UI Screenshot
Project Overview
This project involved creating an alternative user interface for the Public Contract Scotland website. The goal was to enhance the user experience by providing a more intuitive and accessible design while maintaining the existing functionality of the site. The project was built using FastAPI for the backend and React for the frontend, ensuring a modern and responsive application.
As the sole creator, I was responsible for all aspects of the project, from initial concept and design to development, deployment, and maintenance.
Key Features
User-Friendly Interface
The application features a user-friendly interface, making it easy for users to navigate and find the information they need.
Key Outcomes
Dynamic Weather Icons and Conditions
Weather conditions are displayed with dynamic icons, enhancing the user experience with visually appealing graphics.
User-Friendly Interface
The application features a user-friendly interface, making it easy for users to navigate and find the information they need.
Technology Stack
languages
JavaScript
HTML/CSS
libraries
React
Lucide
frameworks
Vite
TailwindCSS
tools & platforms
VS Code
Git/GitHub
GitHub Actions
GitHub Secrets
Azure
Development Journey
Creating a user-friendly interface that provided a seamless experience across different devices was a significant challenge. The goal was to ensure that users could easily navigate the application and access the information they needed without confusion.
Solution: Responsive Design and User-Centered Approach
To address this, I adopted a responsive design approach using Tailwind CSS, ensuring that the application looked great on all devices. I also conducted user testing to gather feedback on the interface and made iterative improvements based on user input. This user-centered approach helped in identifying pain points and enhancing the overall usability of the application.
As the application grew, performance became a critical concern. The challenge was to identify bottlenecks and optimize the application for speed and efficiency.
Solution: Implementing Caching and Load Balancing
To address performance issues, I implemented caching strategies using Redis and optimized database queries. Additionally, I set up load balancing to distribute traffic evenly across servers, ensuring that no single server became a bottleneck.
Ensuring the security of user data and maintaining data integrity was a paramount concern. The challenge was to implement robust security measures while ensuring a smooth user experience.
Solution: Implementing OAuth 2.0 and Data Validation
To enhance security, I implemented OAuth 2.0 for user authentication and authorization, ensuring that user data was protected. Additionally, I used Pydantic for data validation, ensuring that only valid data was processed by the application.
One of the main challenges was managing asynchronous API calls. When a user searched for a new city while a previous request was still pending, it could create a race condition, leading to the wrong data being displayed on the UI.
Solution: Implementing AbortController for Fetch Requests
To address this issue, I implemented the AbortController API to cancel any ongoing fetch requests when a new search was initiated. This ensured that only the most recent request would update the UI, preventing stale data from being displayed.