Simple Real-Time To-Do List

Overview

A full-stack To-Do List application with real-time sync, built for rapid prototyping and modern development workflows. It demonstrates agentic AI-assisted coding, containerized deployment, and clean separation of concerns.

Tech Stack

• Backend: ASP.NET Core, HotChocolate GraphQL, Entity Framework Core, SQLite
• Frontend: React, Adobe React Spectrum, TypeScript, Relay GraphQL
• DevOps: Docker, Docker Compose

Architecture

• client/: React app (TypeScript), UI with Adobe React Spectrum, GraphQL queries/mutations via a service layer
• server/: ASP.NET Core Web API, GraphQL schema and resolvers, EF Core ORM, SQLite database
• docker-compose.yml: Orchestrates backend, frontend, and database containers

Features

• Add new tasks (title, description)
• Toggle task status ("Pending"/"Completed")
• Real-time sync via GraphQL API
• Modern, accessible UI
• Containerized deployment for easy setup

Setup & Usage

Prerequisites

• Docker Desktop (Windows/Mac/Linux)
• Node.js (for local frontend dev)
• .NET SDK (for local backend dev)

Quick Start (Docker)

1. Clone the repository:

   git clone <your-repo-url>
   cd To-Do-List
   

2. Build and start all services:

   docker-compose up --build
   

3. Open your browser:
   • Frontend: http://localhost:3000
   • GraphQL API: http://localhost:5000/graphql

Local Development

Frontend

1. Install dependencies:

   cd client
   npm install
   

2. Start the dev server:

   npm start
   

Backend

1. Install .NET dependencies:

   cd server
   dotnet restore
   

2. Run the backend:

   dotnet run
   

Project Structure

To-Do-List/
  client/   # React frontend (TypeScript)
  server/   # ASP.NET Core backend
  docker-compose.yml
  README.md
  .gitignore

Troubleshooting

• Frontend blank/empty: Ensure backend is running and accessible at the correct GraphQL endpoint.
• Docker build errors: Check for missing dependencies in package.json or .csproj files.
• TypeScript errors: See tsconfig.json and ensure type definitions are installed.
• Database issues: SQLite file is persisted in server/; delete it to reset data.

AI Workflow & Reflections

• All code was generated and integrated using GitHub Copilot agentic workflow.
• The agent handled project scaffolding, code generation, refactoring, and troubleshooting.
• This approach enabled rapid delivery, clean architecture, and minimal manual coding.
• The process demonstrates the effectiveness of AI tools for full-stack development and DevOps.

Customization & Extensibility

• Swap SQLite for SQL Server in production by updating EF Core connection string and Docker Compose.
• Add authentication, notifications, or more advanced task features as needed.
• Extend GraphQL schema for more queries/mutations.

---

Generated by GitHub Copilot agent.