This project showcases a comprehensive full-stack solution, combining a robust ASP.NET Core Web API backend, an MVC web frontend, and a modern React single-page application — all seamlessly integrated to provide a highly secure, scalable, and user-friendly system.
| Application | Platform | Link |
|---|---|---|
| ASP.NET Core API | Azure (Swagger/Docs) | View API Documentation 🡥 |
| ASP.NET Web MVC | Azure | Launch MVC Frontend 🡥 |
| React SPA | Azure | Launch React Frontend 🡥 |
| React SPA | Vercel | Launch React Frontend 🡥 |
- Clone the repository
git clone https://github.com/crni99/airport-automation.git- Navigate to the backend API project
cd airport-automation/backend/AirportAutomationApi- Configure Database Provider and Connection String
- Open
appsettings.jsonand choose your preferred database provider. - Update the
DatabaseProvidervalue to match your choice (SqlServer,Postgres, orMySql). - Update the corresponding connection string with your local server details, credentials, and port.
"DatabaseProvider": "SqlServer", // <- CHANGE this to your selected provider!
"ConnectionStrings": {
"SqlServerConnection": "Data Source=YOUR_SQL_SERVER_INSTANCE;Initial Catalog=AirportAutomation;Integrated Security=True;TrustServerCertificate=True;MultipleActiveResultSets=true;",
"PostgresConnection": "Host=localhost;Port=5432;Username=YOUR_USER;Password=YOUR_PASSWORD;Database=AirportAutomation",
"MySqlConnection": "Server=localhost;Port=3306;Database=AirportAutomation;Uid=YOUR_USER;Pwd=YOUR_PASSWORD;"
}- Initialize the database
- You will need to run the appropriate SQL script for your chosen provider to create and seed the database.
- These scripts are located in Data folder.
| Database Provider | SQL File to Run | Action |
|---|---|---|
SqlServer |
mssql.sql 🡥 |
Execute script against SQL Server instance. |
Postgres |
npgsql.sql 🡥 |
Execute script against PostgreSQL server (e.g., via pgAdmin). |
MySql |
mysql.sql 🡥 |
Execute script against MySQL server (e.g., via MySQL Workbench). |
- In your IDE (e.g., Visual Studio / JetBrains Rider):
- Set
AirportAutomationApi(Web API) andAirportAutomationWeb(MVC Web) as the startup projects. - This ensures the API and MVC frontend run together.
- Alternatively (using CLI/VS Code): Open two separate terminal windows in the
airport-automation/backenddirectory and run the following commands concurrently:- For the Web API:
dotnet run --project AirportAutomationApi/AirportAutomationApi.csproj - For the MVC Frontend:
dotnet run --project AirportAutomationWeb/AirportAutomationWeb.csproj
- For the Web API:
- Start the application
dotnet run- Navigate to the React frontend
cd ../../react-frontend- Install dependencies
npm install- Start the React frontend
npm run startSQL Server(or a relevant relational database) is used as the primary data store.- Manage the database schema and migrations via
Entity Framework Coreto ensure version control and smooth schema evolution. - Map EF Core entities directly to database tables to facilitate efficient data access and manipulation.
- Establish the foundation of the Web API and define endpoints.
- Implement the logic to retrieve and return resources in response to client requests.
- Demonstrate how to manipulate data resources and ensure data integrity.
- Implement input validation techniques to enhance the reliability of the API.
- Customize model validation error responses to conform to
RFC 9457, with detailed problem details and trace identifiers for easier debugging.
- Employ services and dependency injection to promote modularity and maintainability in the codebase.
- Utilize Entity Framework Core for database interactions and ORM capabilities within repository and service layers.
- Abstract EF Core queries and commands away from controllers to maintain separation of concerns and improve testability.
- Ensure controllers receive processed data from services, maintaining clean and manageable API endpoints.
- Use EF Core exclusively in repositories and services, keeping controllers free from direct database operations.
- Promote modularity, easier testing, and cleaner controller logic focused on handling HTTP requests and responses.
- Implement advanced features such as searching, filtering, and paging to improve the API’s usability and performance.
- Implement endpoints to export data in PDF and Excel formats for reporting and offline analysis.
- Ensure exported documents preserve formatting and reflect applied filters or search criteria.
- Use
QuestPDFto generate high-quality, customizablePDFdocuments. - Use
ClosedXMLto create Excel files with structured data, formatting, and support for advancedExcelfeatures.
- Secure the API using robust authentication and authorization mechanisms.
- Passwords are securely stored using the
BCrypthashing algorithm, which incorporates a robust salt and adaptive iteration count to defend against brute-force and rainbow table attacks. - Handle authentication with
JWT tokensto enable secure, stateless client-server communication. - Configure
CORSto allow authorized cross-origin requests while maintaining protection against unauthorized access.
- Implement role-based access control with policies:
RequireSuperAdminRoleRequireAdminRoleRequireUserRole
- Enable fine-grained endpoint access control based on user roles to ensure secure handling of sensitive data.
- Enable a global CORS policy (
_AllowAll) to facilitate frontend-backend communication during development. - Plan for more restrictive CORS policies in production environments for enhanced security.
- Manage API versions to maintain backward compatibility.
- Document API endpoints for easy use by developers.
- Customize Swagger UI with a toggleable dark/light mode to enhance usability and align with user preferences.
- Toggleable dark/light mode to enhance usability and align with user preferences.
- A custom favicon and custom logo to match the project’s branding.
- Injected custom JavaScript and CSS to modify Swagger UI behavior and appearance.
- Implement custom controller ordering in Swagger UI using the [SwaggerControllerOrder] attribute and a helper class (SwaggerControllerOrder), ensuring a logical and predictable display order.
- Integrate Serilog for structured, centralized logging, with configuration sourced from app settings.
- Add custom middleware (
RequestLogContextMiddleware) to enrich logs with request context, such as trace identifiers. - Implement global exception handler middleware (
GlobalExceptionHandler) to standardize error responses and capture unhandled exceptions.
- Implement custom middleware to enhance logging context and provide consistent exception handling, improving diagnostics and debugging.
- Centralize all configurations (e.g., Serilog, rate limiting, authentication secrets, pagination settings) in
appsettings.jsonfor better maintainability and environment flexibility.
- Implement a rate limiter to protect API resources from abuse, mitigate DDoS attacks, and enhance overall API performance.
- Write comprehensive unit tests using the xUnit framework to validate individual components in isolation.
- Ensure tests improve code reliability, support refactoring, and simplify debugging.
- Monitor the health of critical components such as databases and external services.
- Configure health check endpoints to provide visibility into system status and integrate them into Swagger documentation for easy access.
🌐 MVC Web Frontend 🡥
- Implement efficient and reusable API calls using
HttpClientFactoryto improve performance, manage resources effectively, and avoid socket exhaustion. - Implement a robust resilience strategy using the
Pollylibrary, configuring policies for:Transient Fault Handling: Automatic retries with exponential backoff to recover from temporary network or server errors.Circuit Breaking: Automatically halting requests to services experiencing prolonged failures to prevent cascading errors and allow the service time to recover.Request Timeout: Enforcing a maximum duration for API calls to prevent application hanging on unresponsive services.
- Centralize
HttpClientconfiguration to ensure consistent request headers, including JSON content type, user agent, and authorization tokens.
- Utilize generic methods for CRUD operations (
CreateData<T>,ReadData<T>, etc.) to enable type-safe, reusable API communication across different data models. - Dynamically construct API endpoints based on model types with custom pluralization rules for flexible routing.
- Support advanced filtering through dynamically built query strings tailored to each data model's specific filter requirements.
- Implement pagination and optional retrieval of all data items for optimized data loading and exporting.
- Consume external and backend web services to fetch real-time data and integrate third-party functionalities seamlessly.
- Manage robust error handling and detailed logging for HTTP responses, including success, conflicts, unauthorized, forbidden, and other error states to improve debugging and user feedback.
- Handle dynamic data presentation using MVC templates and model binding to ensure consistent and user-friendly data display.
- Develop user input forms with validation to maintain data accuracy and integrity.
- Utilize the modern, responsive design and components of
Bootstrap 5for consistent and high-quality UI styling.
- Leverage JavaScript, jQuery, and AJAX to build responsive and interactive user interfaces, enabling asynchronous data fetching and partial page updates without full reloads.
- Integrate the export functionality from the API into the MVC frontend, allowing users to generate and download PDF and Excel reports directly from the web interface.
- Provide options to reflect applied filters or search terms in the exported documents, ensuring consistency between the UI and downloaded data.
- Ensure user-friendly interactions with appropriate UI components (e.g., export buttons, spinners, error handling) for a seamless reporting experience.
- Enforce HTTPS to secure data transmission between client and server.
- Implement protections against common vulnerabilities such as
Cross-Site Scripting (XSS),Cross-Site Request Forgery (CSRF), and controlCross-Origin Resource Sharing (CORS). - Secure API calls with bearer token authorization headers automatically added to all HTTP requests.
⚛️ React Frontend 🡥
- Build the frontend using functional components and
React Hooks. - Design a responsive, mobile-friendly layout with modern styling techniques.
- Utilize the rich set of components from
Material UI (MUI)to implement a sleek, professional, and accessible user interface based on Material Design principles.
- Manage application state via
Context APIorRedux. - Handle asynchronous operations efficiently using the native
fetchAPI and middleware where necessary.
- Fully integrate with the backend API to retrieve and manage data such as flights, passengers, and airport operations.
- Dynamically render components based on API responses and user interactions.
- Manage form inputs (e.g., bookings, user data) with
React Hook Form. - Provide real-time validation with user-friendly error handling and feedback.
- Handle navigation using
React Router, including dynamic and nested routes for scalability. - Enable seamless page transitions without full reloads.
- Integrate the frontend with API endpoints to allow users to export data to PDF and Excel formats.
- Allow users to apply filters or search terms before export, with generated documents reflecting those criteria.
- Accompany export actions with UI feedback such as loading spinners and error messages for an improved user experience.
- Provide download links directly in the UI for quick access to exported files.
- Implement secure user login using
JWT-based authentication. - Apply role-based access control to restrict features based on user permissions.
- Improve performance through
lazy loading,code splitting, andmemoization. - Optimize re-renders using React best practices to enhance responsiveness.
- Implement a complete web app manifest (manifest.json) including appropriate names, unique ID, theme colors (#009be5), and icons (including a maskable icon).
- Ensure the application meets all core PWA installability criteria (served over HTTPS, valid manifest, and service worker) to allow users to install it as a native application on their devices.
🚀 Deployment 🡥
- The .NET API is deployed to Azure Web App (service name
airport-automation) via the automated GitHub Actions CI/CD pipeline. - The .NET Web MCC is deployed to Azure Web App.
- The React Frontend is deployed to two platforms to ensure high availability and redundancy:
- Integrate basic logging and monitoring solutions to track application health and capture errors in production environments.
🔄 Mirroring 🡥
- The project is mirrored from
GitHubtoGitLabandBitbucket, where customGitHub Actionsare configured to automatically triggerCI/CD pipelineson code changes. - This mirroring setup ensures continuous integration and deployment on both GitLab and Bitbucket by synchronizing code changes pushed to GitHub.
- Both GitLab and Bitbucket automatically pick up the changes pushed from GitHub, triggering their respective CI/CD pipelines for seamless integration and deployment.
🔐 Demo Credentials 🡥
Note: These demo credentials are provided for testing and demonstration purposes only.
| Username | Password | Role | Description |
|---|---|---|---|
| og | og | SuperAdmin | Full CRUD access, data export, and role management |
| aa | aa | Admin | CRUD operations + exporting data |
| uu | uu | User | Read and filter data only |