📋 Assignment: Build an ASP.
NET Core Application with React and
Azure Table Storage
🎯 Objective:
Develop a full-stack web application using ASP.NET Core with React
that connects to Azure Table Storage to manage comments. The
application will allow users to submit new comments and view existing
ones.
❓ Assignment Requirements & Questions:
🚀 Part 1: Backend Development (ASP.NET Core in VS Code)
1. Project Setup:
o How do you create an ASP.NET Core with React project
using VS Code?
o Provide the command to scaffold the project structure.
2. Package Installation:
o How do you install the Azure.Data.Tables NuGet package?
o What is the purpose of this package in the context of the
project?
3. Azure Table Storage Configuration:
o How do you configure the Azure Table Storage connection
string in appsettings.json?
o What is the structure of the connection string, and how do you
secure it? (Use the sandbox link provided.)
4. Model Creation:
o Create a class CommentEntity.cs with the following properties:
PartitionKey (e.g., "Comments")
RowKey (unique identifier)
AuthorName
CommentText
Timestamp
o Explain the significance of PartitionKey and RowKey in Azure
Table Storage.
5. Service Layer:
o Implement a TableStorageService.cs class to handle the
following operations:
GetComments() – Retrieve all comments
AddComment(CommentEntity comment) – Add a new
comment
o How would you implement error handling for failed Azure
operations?
6. API Controller:
o Create an API Controller named CommentsController.cs.
o Implement the following API endpoints:
GET /api/comments – Returns a list of comments
POST /api/comments – Adds a new comment
o How do you handle validation for incoming comment data?
🌐 Part 2: Frontend Development (React)
1. React Project Setup:
o How do you structure the React app within the ASP.NET Core
project?
o Explain the role of src folder in React projects.
2. State Management:
o How would you manage the state of comments (list of
comments, form data) in React?
o Explain the difference between local state and lifting state
up in React.
3. API Service (Using Fetch API):
o Create src/apiService.js with the following functions:
getComments() – Fetches comments from the backend
API
postComment(comment) – Submits a new comment to
the API
o How would you handle errors during API calls?
4. React Components:
o CommentForm:
Create a form to submit new comments (fields: Author
Name, Comment Text).
Implement form validation to ensure fields are not
empty.
o CommentsList:
Display the list of comments retrieved from the API.
How would you ensure the latest comments are
displayed first?
5. Integration:
o Integrate CommentForm and CommentsList into App.js.
o How would you trigger a refresh of the comments list after
submitting a new comment?
⚙️Bonus Tasks (Optional):
Implement a loading spinner while fetching comments.
Add a delete comment feature.
Apply basic CSS styling for a better UI experience.
📊 Deliverables:
1. Complete source code for both backend (ASP.NET Core) and
frontend (React).
2. appsettings.json (with sensitive data redacted if needed).
3. Screenshots of the application showing:
o The form for submitting comments
o The list of comments displayed
4. A brief documentation that includes:
o Setup instructions
o API endpoint details
o Sample API requests/responses
✅ Evaluation Criteria:
Correct implementation of API endpoints (20%)
Functional React frontend (20%)
Proper integration with Azure Table Storage (20%)
Code quality and error handling (15%)
UI/UX design (10%)
Documentation and clarity (15%)
