Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
15 views

ASP.NET Web API with React Assignment

The assignment involves developing a full-stack web application using ASP.NET Core with React and Azure Table Storage for managing comments. It includes backend development tasks such as project setup, package installation, Azure Table Storage configuration, model creation, service layer implementation, and API controller creation. The frontend development focuses on structuring the React app, state management, API service creation, component development, and integration, along with optional bonus tasks and deliverables for evaluation.

Uploaded by

shivam9131363438
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
15 views

ASP.NET Web API with React Assignment

The assignment involves developing a full-stack web application using ASP.NET Core with React and Azure Table Storage for managing comments. It includes backend development tasks such as project setup, package installation, Azure Table Storage configuration, model creation, service layer implementation, and API controller creation. The frontend development focuses on structuring the React app, state management, API service creation, component development, and integration, along with optional bonus tasks and deliverables for evaluation.

Uploaded by

shivam9131363438
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

📋 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%)

You might also like