This is a simple Task Management System built using React.js for the frontend and .NET for the backend. The application allows users to create, view, update, and delete tasks with functionalities like input validation, success/error notifications, and responsive UI. It utilizes Material-UI and Tailwind CSS for styling and an in-memory database using SQLite or Entity Framework InMemory for storing tasks.
Task List: View tasks in a table format.
Task Form: Add or edit tasks with fields for title, description, due date, and status.
CRUD Operations:
Fetch tasks from the backend.
Add, edit, and delete tasks.
Validation:
Title and Due Date are required.
Status must be one of the predefined values (Pending, In Progress, Completed).
Notifications: Error and success messages are displayed for form submission and actions.
React.js
Material-UI
Axios (for API calls)
.NET 8
Entity Framework InMemory
C# Web API
Entity Framework InMemory (for in-memory database)
Clone the repository
cd task-management-frontend
Install dependencies:
npm install
Start the React development server:
npm start
Clone the repository:
cd task-management-backend
Restore the .NET dependencies:
dotnet restore
Run the backend API:
dotnet run
The backend will be running at http://localhost:5000.
The application uses Entity Framework InMemory, so no database setup is required.
Start both the frontend and backend servers.
The frontend will automatically interact with the backend API.
Use the username "admin" and password "password"
React 18+
Axios
Material-UI
.NET 8
Entity Framework InMemory
Task Status: We used predefined statuses for tasks to maintain consistency (e.g., Pending, In Progress, Completed).
Validation: We ensured that the Title and Due Date are required to prevent incomplete task creation.
UI Framework: Material-UI and Tailwind were chosen for responsive design and easy styling.
MIT License - See LICENSE for more details.