Shopping List
It’s time to advance in your React knowledge by creating a full CRUD application with a .NET backend. This time you’ll also need a full CRUD .NET web API, so you get some extra practice in that as well. We’re recommending you stick to the basics and don’t use Redux (a popular state management library used in React). Its learning curve can be quite steep and you’re still taking baby-steps in React. You’ll also have a greater appreciation of Redux if you make a few apps without it first.
Requirements
This is a CRUD Shopping List App with React and .NET Web API .
Users should be able to cross items from the shopping-list without deleting them. You can use a IsPickedUp boolean for that.
You should create two projects: A .NET WebApi and a React app.
You should use state management libraries (i.e. Redux).
Resources
The resources from the previous projects will be helpful in the completion of this project, plus these tutorials:
These are just a couple of examples of tutorials where a React app uses it’s inbuilt Http client to call an api. However React is one of the most popular libraries out there, so feel free to search for other examples.
Tips
Start by building the complete CRUD .NET Webapi
In your second step, make sure you can call the get method from the API using React. Once the data is flowing between apps, everything else becomes easier.
Challenges
The Hands on React Tutorial in the resources list above has the same app written with vanilla JS and Typescript. Try rewriting your Shopping List using Typescript, as it's commonly used along .NET in enteprise development.
Create a feature that lets users click on commonly used items to add them to a list.
Add a drag and drop feature to reorder the list.
Comments
0 comments
No comments yet. Start the conversation.