TaskList - ASP.NET Core + ReactJS + FluentUI Example - By Peter Cox 💥

Introduction

This project makes uses of an ASP.NET Core WebAPI backend, ReactJS front-end and the FluentUI UX framework for styling.

It enables the user to view a list of customers, add new customers, edit existing customers and delete customers.

Technologies used

How To Use ☄️

First, clone the project and open both the 'TaskList.Backend' and 'TaskList.Frontend' folders in Visual Studio and VSC respectively.

Make sure to update the connection string in the 'appsettings.json' file, and the port in the Constants.ts file in React if different from what VS assigns

In VS click 'IIS Express' to start the server.

In the 'TaskList.Frontend' VSC instance in the integrated terminal:

npm install
npm run dev

Features ☄️

Right click 'context' menu for each task card
Login functionality
React-hook-forms and Zod for form validation
Use of custom 'React-Query' hooks for data fetching

Todos

Lots!
Didn't have enough time to structure the backend properly (e.g. using Repository/Services pattern)
Support multiple lists and 'sharing' lists with other users (I spent a lot of time trying to get this to work, and had to scale back the requiremets.)