A modern, full-stack task management application built with React, ASP.NET Core Web API, and SQLite. This project provides a comprehensive solution for team collaboration, project management, and task tracking.
- Task Management: Create, edit, delete, and track tasks with status updates
- Status Tracking: Three task statuses (Pending, In Progress, Done) with visual indicators
- Responsive Design: Works seamlessly on desktop and mobile devices
- Modern UI: Clean, intuitive interface built with React and Tailwind CSS
- Real-time Updates: Live updates for task status changes
- RESTful API: Clean API design with proper HTTP methods
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│ React Client │ │ ASP.NET Core │ │ SQLite Database │
│ (Frontend) │◄──►│ Web API │◄──►│ (Local) │
└─────────────────┘ └─────────────────┘ └─────────────────┘
- Frontend: React 19, TypeScript, Tailwind CSS, Vite
- Backend: ASP.NET Core 8, C#, Entity Framework Core
- Database: SQLite (local development)
- Authentication: JWT Bearer tokens (configured but not implemented)
- Deployment: Ready for Azure deployment
- Testing: Built-in testing support
taskmanager/
├── client/ # React frontend
│ ├── src/
│ │ ├── components/ # Reusable UI components
│ │ │ ├── Task.tsx # Individual task component
│ │ │ ├── TaskForm.tsx # Task creation/editing form
│ │ │ └── ResponsiveVirtualizedList.tsx # Task list display
│ │ ├── hooks/ # Custom React hooks
│ │ ├── services/ # API service functions
│ │ ├── types/ # TypeScript type definitions
│ │ │ └── task.ts # Task interfaces and enums
│ │ ├── utils/ # Utility functions
│ │ │ └── statusUtils.ts # Status styling utilities
│ │ └── App.tsx # Main application component
│ ├── package.json
│ └── README.md
├── api/ # ASP.NET Core Web API backend
│ ├── Controllers/ # API controllers
│ ├── Models/ # Data models
│ ├── Services/ # Business logic services
│ ├── Data/ # Database context and migrations
│ ├── TaskManager.API.csproj
│ ├── appsettings.json
│ └── README.md
├── docs/ # Documentation
│ ├── README.md
│ ├── architecture.md
│ └── api-docs.md
├── sql/ # Database schema and procedures
│ ├── schema.sql
│ ├── stored-procedures.sql
│ └── README.md
└── README.md
- Node.js 18+
- .NET 8 SDK
- Git
-
Clone the repository
git clone <repository-url> cd taskmanager
-
Setup Backend
cd api dotnet restore dotnet runThe API will be available at: http://localhost:5000
-
Setup Frontend
cd client npm install npm run devThe frontend will be available at: http://localhost:5173
-
Access the application
- Frontend: http://localhost:5173
- Backend API: http://localhost:5000
- API Documentation: http://localhost:5000/swagger
The backend uses SQLite by default for local development. Configuration is in api/appsettings.json:
{
"ConnectionStrings": {
"DefaultConnection": "Data Source=TaskManager.db"
},
"JwtSettings": {
"SecretKey": "your-secret-key-here",
"Issuer": "TaskManager",
"Audience": "TaskManagerUsers"
}
}Create client/.env.local if needed:
VITE_API_BASE_URL=http://localhost:5000/api
VITE_APP_NAME=Task Managercd api
dotnet testcd client
npm test-
Setup Azure Resources
- Create Azure App Service (for API)
- Create Azure Static Web App (for frontend)
- Create Azure SQL Database (for production database)
-
Configure Environment Variables
- Update connection strings for production database
- Set JWT secret keys
- Configure CORS settings
-
Deploy
# Deploy Backend cd api dotnet publish -c Release # Deploy to Azure App Service # Deploy Frontend cd client npm run build # Deploy dist/ folder to Azure Static Web Apps
- Architecture Decisions - Technical decisions and rationale
- API Documentation - Complete API reference
- Frontend: ESLint + TypeScript
- Backend: Built-in .NET formatting
- Database: Entity Framework Code First
- Create feature branch from
main - Make changes and add tests
- Run linting and tests
- Create pull request
- Code review and merge
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
- Write tests for new features
- Update documentation
- Follow the existing code style
- Ensure all tests pass
- Add appropriate error handling
- ✅ Task CRUD operations
- ✅ Status management (Pending, In Progress, Done)
- ✅ Responsive design
- ✅ RESTful API
- ✅ SQLite database