In this article, we'll dive into the world of fitness app development and explore the exciting project of integrating Azure Blob Storage with C# to retrieve JSON data. We'll transform the JSON data into a structured C# model, expose an API endpoint that returns the transformed model, and display the data using a React app with a parent-child structure.

Task Overview

The task involves several key steps:

  1. Connect to Azure Blob Storage: Use C# to connect to Azure Blob Storage, incorporating the SAS token to authenticate and access the JSON file.
  2. Transform JSON Data into C# Model: Convert the JSON data into a C# model with classes representing Property, Space, RentRoll, and any other necessary entities.
  3. Expose API Endpoint: Return the structured data as a JSON response from an API endpoint that can handle errors, such as missing files or invalid token scenarios.
  4. Display Data using React App: Use the provided Blob URL and SAS token to retrieve the JSON data, deserialize it into the C# model, and display the hierarchical data in a parent-child format.

Deliverables

To complete this task, you'll need to deliver three key components:

  1. C# Solution Code: A C# solution code for Blob Storage integration, data transformation, and API endpoint.
  2. React App Code: React app code that fetches data from the API and displays it as outlined.
  3. Documentation: Documentation on setup steps, assumptions, and any handling of the SAS token.

Setup & Documentation

To get started with this project, you'll need to set up your development environment using Visual Studio 2022 for C# and Node.js (latest LTS version) for React frontend. You can use Postman or a browser to test the API, and Azure Storage Explorer (optional) to check Blob Storage content.

Key Components

Here's an overview of the key components involved in this project:

  • ASP.NET Core API: Fetches property data from Azure Blob Storage.
  • React Frontend: Fetches data from API and displays it with collapsible UI using @headlessui/react.
  • Swagger Results Screenshots: Contains API Swagger & React UI screenshots.

Evaluation Criteria

Your submission will be evaluated based on the following criteria:

  1. Successful Integration: Successful integration with Azure Blob Storage.
  2. Clear Code: Clear, maintainable C# code following best practices.
  3. Efficient Data Handling: Efficient handling of the hierarchical data structure.
  4. Usable React Display: Usable and clear React/Angular display.
  5. Robust Error Handling: Robust error handling in both C# and React components.

Stretch Goal

To take your project to the next level, consider implementing collapsible sections for Property and Space data. This will provide a more user-friendly experience when displaying complex hierarchical data.