Initial commit: YesChef family shopping list and recipe app

Backend (.NET 10 minimal API):
- Vertical slice architecture with feature folders
- Postgres via EF Core with initial migration
- JWT auth with family invite code registration
- REST endpoints for stores, shopping lists, items, recipes
- SignalR hub for real-time list collaboration (per-list groups
  and lists-overview group for live list creation/archival/progress)
- Multi-stage Dockerfile

Frontend (SvelteKit + Svelte 5 runes, Tailwind v4):
- Mobile-first PWA with web manifest and service worker
- Bottom-nav layout, login/register, lists overview, list detail,
  stores management, recipes (list/create/detail with add-to-list)
- SignalR client with reference-counted connection
- Real-time updates on both lists overview and list detail pages

Infrastructure:
- docker-compose.yml with postgres, backend, frontend services
  and Traefik labels for path-based routing (/api, /hubs to backend)
- .env.example with required config

End-to-end tests (Playwright):
- test-e2e.mjs: single-user flow (auth, stores, lists, items, recipes)
- test-e2e-multiuser.mjs: two-user real-time sync coverage

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

.env.example

@@ -0,0 +1,4 @@
+POSTGRES_PASSWORD=change-me-strong-password
+JWT_SECRET=change-me-generate-a-random-64-char-string
+FAMILY_CODE=your-family-invite-phrase
+DOMAIN=yeschef.yourdomain.com

.gitignore

@@ -0,0 +1,23 @@
+## .NET
+bin/
+obj/
+*.user
+*.suo
+*.cache
+
+## Node
+node_modules/
+build/
+.svelte-kit/
+
+## Environment
+.env
+
+## IDE
+.vs/
+.vscode/
+.idea/
+
+## OS
+Thumbs.db
+.DS_Store

docker-compose.yml

@@ -0,0 +1,60 @@
+services:
+  postgres:
+    image: postgres:17
+    environment:
+      POSTGRES_DB: yeschef
+      POSTGRES_USER: yeschef
+      POSTGRES_PASSWORD: ${POSTGRES_PASSWORD}
+    volumes:
+      - yeschef-pgdata:/var/lib/postgresql/data
+    expose:
+      - "5432"
+    restart: unless-stopped
+    healthcheck:
+      test: ["CMD-SHELL", "pg_isready -U yeschef"]
+      interval: 10s
+      timeout: 5s
+      retries: 5
+
+  backend:
+    build:
+      context: ./src/backend/YesChef.Api
+      dockerfile: Dockerfile
+    environment:
+      ConnectionStrings__DefaultConnection: "Host=postgres;Database=yeschef;Username=yeschef;Password=${POSTGRES_PASSWORD}"
+      Jwt__Secret: ${JWT_SECRET}
+      FamilyCode: ${FAMILY_CODE}
+    expose:
+      - "5000"
+    depends_on:
+      postgres:
+        condition: service_healthy
+    restart: unless-stopped
+    labels:
+      - "traefik.enable=true"
+      - "traefik.http.routers.yeschef-api.rule=Host(`${DOMAIN}`) && (PathPrefix(`/api`) || PathPrefix(`/hubs`) || Path(`/health`))"
+      - "traefik.http.routers.yeschef-api.entrypoints=websecure"
+      - "traefik.http.routers.yeschef-api.tls.certresolver=letsencrypt"
+      - "traefik.http.services.yeschef-api.loadbalancer.server.port=5000"
+
+  frontend:
+    build:
+      context: ./src/frontend
+      dockerfile: Dockerfile
+    environment:
+      ORIGIN: https://${DOMAIN}
+    expose:
+      - "3000"
+    depends_on:
+      - backend
+    restart: unless-stopped
+    labels:
+      - "traefik.enable=true"
+      - "traefik.http.routers.yeschef-web.rule=Host(`${DOMAIN}`)"
+      - "traefik.http.routers.yeschef-web.entrypoints=websecure"
+      - "traefik.http.routers.yeschef-web.tls.certresolver=letsencrypt"
+      - "traefik.http.routers.yeschef-web.priority=1"
+      - "traefik.http.services.yeschef-web.loadbalancer.server.port=3000"
+
+volumes:
+  yeschef-pgdata:

package-lock.json

@@ -0,0 +1,60 @@
+{
+  "name": "yeschef",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "yeschef",
+      "version": "1.0.0",
+      "license": "ISC",
+      "dependencies": {
+        "playwright": "^1.59.1"
+      }
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/playwright": {
+      "version": "1.59.1",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.59.1.tgz",
+      "integrity": "sha512-C8oWjPR3F81yljW9o5OxcWzfh6avkVwDD2VYdwIGqTkl+OGFISgypqzfu7dOe4QNLL2aqcWBmI3PMtLIK233lw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright-core": "1.59.1"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
+      }
+    },
+    "node_modules/playwright-core": {
+      "version": "1.59.1",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.59.1.tgz",
+      "integrity": "sha512-HBV/RJg81z5BiiZ9yPzIiClYV/QMsDCKUyogwH9p3MCP6IYjUFu/MActgYAvK0oWyV9NlwM3GLBjADyWgydVyg==",
+      "license": "Apache-2.0",
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    }
+  }
+}

package.json

@@ -0,0 +1,16 @@
+{
+  "name": "yeschef",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "type": "commonjs",
+  "dependencies": {
+    "playwright": "^1.59.1"
+  }
+}

src/backend/YesChef.Api/Auth/AuthEndpoints.cs

@@ -0,0 +1,60 @@
+using Microsoft.AspNetCore.Identity;
+using Microsoft.EntityFrameworkCore;
+using YesChef.Api.Data;
+using YesChef.Api.Entities;
+
+namespace YesChef.Api.Auth;
+
+public static class AuthEndpoints
+{
+    public record RegisterRequest(string Name, string Password, string FamilyCode);
+    public record LoginRequest(string Name, string Password);
+    public record AuthResponse(string Token, string Name);
+
+    public static RouteGroupBuilder MapAuthEndpoints(this RouteGroupBuilder group)
+    {
+        var hasher = new PasswordHasher<User>();
+
+        group.MapPost("/register", async (RegisterRequest request, YesChefDb db, JwtTokenService jwt, IConfiguration config) =>
+        {
+            var familyCode = config["FamilyCode"];
+            if (string.IsNullOrEmpty(familyCode) || request.FamilyCode != familyCode)
+                return Results.BadRequest(new { error = "Invalid family code." });
+
+            if (await db.Users.AnyAsync(u => u.Name == request.Name))
+                return Results.Conflict(new { error = "Name already taken." });
+
+            var user = new User { Name = request.Name, PasswordHash = "" };
+            user.PasswordHash = hasher.HashPassword(user, request.Password);
+
+            db.Users.Add(user);
+            await db.SaveChangesAsync();
+
+            var token = jwt.GenerateToken(user);
+            return Results.Ok(new AuthResponse(token, user.Name));
+        });
+
+        group.MapPost("/login", async (LoginRequest request, YesChefDb db, JwtTokenService jwt) =>
+        {
+            var user = await db.Users.FirstOrDefaultAsync(u => u.Name == request.Name);
+            if (user is null)
+                return Results.Unauthorized();
+
+            var result = hasher.VerifyHashedPassword(user, user.PasswordHash, request.Password);
+            if (result == PasswordVerificationResult.Failed)
+                return Results.Unauthorized();
+
+            var token = jwt.GenerateToken(user);
+            return Results.Ok(new AuthResponse(token, user.Name));
+        });
+
+        group.MapGet("/me", (HttpContext http) =>
+        {
+            var userId = http.User.GetUserId();
+            var name = http.User.GetUserName();
+            return Results.Ok(new { id = userId, name });
+        }).RequireAuthorization();
+
+        return group;
+    }
+}

src/backend/YesChef.Api/Auth/ClaimsPrincipalExtensions.cs

@@ -0,0 +1,12 @@
+using System.Security.Claims;
+
+namespace YesChef.Api.Auth;
+
+public static class ClaimsPrincipalExtensions
+{
+    public static int GetUserId(this ClaimsPrincipal principal) =>
+        int.Parse(principal.FindFirstValue(ClaimTypes.NameIdentifier)!);
+
+    public static string GetUserName(this ClaimsPrincipal principal) =>
+        principal.FindFirstValue(ClaimTypes.Name)!;
+}

src/backend/YesChef.Api/Auth/JwtTokenService.cs

@@ -0,0 +1,29 @@
+using System.IdentityModel.Tokens.Jwt;
+using System.Security.Claims;
+using System.Text;
+using Microsoft.IdentityModel.Tokens;
+using YesChef.Api.Entities;
+
+namespace YesChef.Api.Auth;
+
+public class JwtTokenService(IConfiguration config)
+{
+    public string GenerateToken(User user)
+    {
+        var key = new SymmetricSecurityKey(Encoding.UTF8.GetBytes(config["Jwt:Secret"]!));
+        var credentials = new SigningCredentials(key, SecurityAlgorithms.HmacSha256);
+
+        var claims = new[]
+        {
+            new Claim(ClaimTypes.NameIdentifier, user.Id.ToString()),
+            new Claim(ClaimTypes.Name, user.Name)
+        };
+
+        var token = new JwtSecurityToken(
+            claims: claims,
+            expires: DateTime.UtcNow.AddDays(30),
+            signingCredentials: credentials);
+
+        return new JwtSecurityTokenHandler().WriteToken(token);
+    }
+}

src/backend/YesChef.Api/Data/YesChefDb.cs

@@ -0,0 +1,57 @@
+using Microsoft.EntityFrameworkCore;
+using YesChef.Api.Entities;
+
+namespace YesChef.Api.Data;
+
+public class YesChefDb(DbContextOptions<YesChefDb> options) : DbContext(options)
+{
+    public DbSet<User> Users => Set<User>();
+    public DbSet<Store> Stores => Set<Store>();
+    public DbSet<ShoppingList> ShoppingLists => Set<ShoppingList>();
+    public DbSet<ShoppingListItem> ShoppingListItems => Set<ShoppingListItem>();
+    public DbSet<Recipe> Recipes => Set<Recipe>();
+    public DbSet<RecipeIngredient> RecipeIngredients => Set<RecipeIngredient>();
+
+    protected override void OnModelCreating(ModelBuilder modelBuilder)
+    {
+        modelBuilder.Entity<User>(e =>
+        {
+            e.HasIndex(u => u.Name).IsUnique();
+            e.Property(u => u.Name).HasMaxLength(100);
+        });
+
+        modelBuilder.Entity<Store>(e =>
+        {
+            e.HasIndex(s => s.Name).IsUnique();
+            e.Property(s => s.Name).HasMaxLength(100);
+        });
+
+        modelBuilder.Entity<ShoppingList>(e =>
+        {
+            e.Property(l => l.Name).HasMaxLength(200);
+            e.HasOne(l => l.Store).WithMany().HasForeignKey(l => l.StoreId);
+            e.HasOne(l => l.CreatedByUser).WithMany().HasForeignKey(l => l.CreatedByUserId);
+            e.HasMany(l => l.Items).WithOne(i => i.ShoppingList).HasForeignKey(i => i.ShoppingListId).OnDelete(DeleteBehavior.Cascade);
+        });
+
+        modelBuilder.Entity<ShoppingListItem>(e =>
+        {
+            e.Property(i => i.Name).HasMaxLength(300);
+            e.HasOne(i => i.CheckedByUser).WithMany().HasForeignKey(i => i.CheckedByUserId).OnDelete(DeleteBehavior.SetNull);
+            e.HasOne(i => i.Recipe).WithMany().HasForeignKey(i => i.RecipeId).OnDelete(DeleteBehavior.SetNull);
+        });
+
+        modelBuilder.Entity<Recipe>(e =>
+        {
+            e.Property(r => r.Title).HasMaxLength(300);
+            e.HasOne(r => r.CreatedByUser).WithMany().HasForeignKey(r => r.CreatedByUserId);
+            e.HasMany(r => r.Ingredients).WithOne(i => i.Recipe).HasForeignKey(i => i.RecipeId).OnDelete(DeleteBehavior.Cascade);
+        });
+
+        modelBuilder.Entity<RecipeIngredient>(e =>
+        {
+            e.Property(i => i.Name).HasMaxLength(200);
+            e.Property(i => i.Quantity).HasMaxLength(50);
+        });
+    }
+}

src/backend/YesChef.Api/Dockerfile

@@ -0,0 +1,13 @@
+FROM mcr.microsoft.com/dotnet/sdk:10.0 AS build
+WORKDIR /src
+COPY YesChef.Api.csproj .
+RUN dotnet restore
+COPY . .
+RUN dotnet publish -c Release -o /app
+
+FROM mcr.microsoft.com/dotnet/aspnet:10.0
+WORKDIR /app
+COPY --from=build /app .
+EXPOSE 5000
+ENV ASPNETCORE_URLS=http://+:5000
+ENTRYPOINT ["dotnet", "YesChef.Api.dll"]

src/backend/YesChef.Api/Entities/Recipe.cs

@@ -0,0 +1,16 @@
+namespace YesChef.Api.Entities;
+
+public class Recipe
+{
+    public int Id { get; set; }
+    public required string Title { get; set; }
+    public string? Description { get; set; }
+    public string? Instructions { get; set; }
+    public int? Servings { get; set; }
+    public string? SourceUrl { get; set; }
+    public int CreatedByUserId { get; set; }
+    public User CreatedByUser { get; set; } = null!;
+    public DateTime CreatedAt { get; set; } = DateTime.UtcNow;
+    public DateTime UpdatedAt { get; set; } = DateTime.UtcNow;
+    public List<RecipeIngredient> Ingredients { get; set; } = [];
+}

src/backend/YesChef.Api/Entities/RecipeIngredient.cs

@@ -0,0 +1,11 @@
+namespace YesChef.Api.Entities;
+
+public class RecipeIngredient
+{
+    public int Id { get; set; }
+    public int RecipeId { get; set; }
+    public Recipe Recipe { get; set; } = null!;
+    public required string Name { get; set; }
+    public string? Quantity { get; set; }
+    public int SortOrder { get; set; }
+}

src/backend/YesChef.Api/Entities/ShoppingList.cs

@@ -0,0 +1,15 @@
+namespace YesChef.Api.Entities;
+
+public class ShoppingList
+{
+    public int Id { get; set; }
+    public required string Name { get; set; }
+    public int StoreId { get; set; }
+    public Store Store { get; set; } = null!;
+    public bool IsArchived { get; set; }
+    public int CreatedByUserId { get; set; }
+    public User CreatedByUser { get; set; } = null!;
+    public DateTime CreatedAt { get; set; } = DateTime.UtcNow;
+    public DateTime UpdatedAt { get; set; } = DateTime.UtcNow;
+    public List<ShoppingListItem> Items { get; set; } = [];
+}

src/backend/YesChef.Api/Entities/ShoppingListItem.cs

@@ -0,0 +1,16 @@
+namespace YesChef.Api.Entities;
+
+public class ShoppingListItem
+{
+    public int Id { get; set; }
+    public int ShoppingListId { get; set; }
+    public ShoppingList ShoppingList { get; set; } = null!;
+    public required string Name { get; set; }
+    public bool IsChecked { get; set; }
+    public int? CheckedByUserId { get; set; }
+    public User? CheckedByUser { get; set; }
+    public int SortOrder { get; set; }
+    public int? RecipeId { get; set; }
+    public Recipe? Recipe { get; set; }
+    public DateTime CreatedAt { get; set; } = DateTime.UtcNow;
+}

src/backend/YesChef.Api/Entities/Store.cs

@@ -0,0 +1,9 @@
+namespace YesChef.Api.Entities;
+
+public class Store
+{
+    public int Id { get; set; }
+    public required string Name { get; set; }
+    public int SortOrder { get; set; }
+    public DateTime CreatedAt { get; set; } = DateTime.UtcNow;
+}

src/backend/YesChef.Api/Entities/User.cs

@@ -0,0 +1,9 @@
+namespace YesChef.Api.Entities;
+
+public class User
+{
+    public int Id { get; set; }
+    public required string Name { get; set; }
+    public required string PasswordHash { get; set; }
+    public DateTime CreatedAt { get; set; } = DateTime.UtcNow;
+}

src/backend/YesChef.Api/Features/Recipes/RecipeEndpoints.cs

@@ -0,0 +1,117 @@
+using Microsoft.EntityFrameworkCore;
+using YesChef.Api.Auth;
+using YesChef.Api.Data;
+using YesChef.Api.Entities;
+
+namespace YesChef.Api.Features.Recipes;
+
+public static class RecipeEndpoints
+{
+    public record IngredientRequest(string Name, string? Quantity, int SortOrder);
+    public record CreateRecipeRequest(string Title, string? Description, string? Instructions, int? Servings, string? SourceUrl, List<IngredientRequest> Ingredients);
+    public record UpdateRecipeRequest(string Title, string? Description, string? Instructions, int? Servings, string? SourceUrl, List<IngredientRequest> Ingredients);
+
+    public static RouteGroupBuilder MapRecipeEndpoints(this RouteGroupBuilder group)
+    {
+        group.MapGet("/", async (YesChefDb db, string? q) =>
+        {
+            var query = db.Recipes.AsQueryable();
+            if (!string.IsNullOrWhiteSpace(q))
+                query = query.Where(r => r.Title.Contains(q));
+
+            return await query.OrderByDescending(r => r.UpdatedAt)
+                .Select(r => new
+                {
+                    r.Id,
+                    r.Title,
+                    r.Description,
+                    r.Servings,
+                    IngredientCount = r.Ingredients.Count,
+                    r.UpdatedAt
+                })
+                .ToListAsync();
+        });
+
+        group.MapPost("/", async (CreateRecipeRequest request, YesChefDb db, HttpContext http) =>
+        {
+            var recipe = new Recipe
+            {
+                Title = request.Title,
+                Description = request.Description,
+                Instructions = request.Instructions,
+                Servings = request.Servings,
+                SourceUrl = request.SourceUrl,
+                CreatedByUserId = http.User.GetUserId(),
+                Ingredients = request.Ingredients.Select(i => new RecipeIngredient
+                {
+                    Name = i.Name,
+                    Quantity = i.Quantity,
+                    SortOrder = i.SortOrder
+                }).ToList()
+            };
+
+            db.Recipes.Add(recipe);
+            await db.SaveChangesAsync();
+            return Results.Created($"/api/recipes/{recipe.Id}", new { recipe.Id, recipe.Title });
+        });
+
+        group.MapGet("/{id:int}", async (int id, YesChefDb db) =>
+        {
+            var recipe = await db.Recipes
+                .Include(r => r.Ingredients.OrderBy(i => i.SortOrder))
+                .Include(r => r.CreatedByUser)
+                .FirstOrDefaultAsync(r => r.Id == id);
+
+            if (recipe is null) return Results.NotFound();
+
+            return Results.Ok(new
+            {
+                recipe.Id,
+                recipe.Title,
+                recipe.Description,
+                recipe.Instructions,
+                recipe.Servings,
+                recipe.SourceUrl,
+                CreatedBy = recipe.CreatedByUser.Name,
+                recipe.UpdatedAt,
+                Ingredients = recipe.Ingredients.Select(i => new { i.Id, i.Name, i.Quantity, i.SortOrder })
+            });
+        });
+
+        group.MapPut("/{id:int}", async (int id, UpdateRecipeRequest request, YesChefDb db, HttpContext http) =>
+        {
+            var recipe = await db.Recipes.Include(r => r.Ingredients).FirstOrDefaultAsync(r => r.Id == id);
+            if (recipe is null) return Results.NotFound();
+
+            recipe.Title = request.Title;
+            recipe.Description = request.Description;
+            recipe.Instructions = request.Instructions;
+            recipe.Servings = request.Servings;
+            recipe.SourceUrl = request.SourceUrl;
+            recipe.UpdatedAt = DateTime.UtcNow;
+
+            db.RecipeIngredients.RemoveRange(recipe.Ingredients);
+            recipe.Ingredients = request.Ingredients.Select(i => new RecipeIngredient
+            {
+                Name = i.Name,
+                Quantity = i.Quantity,
+                SortOrder = i.SortOrder
+            }).ToList();
+
+            await db.SaveChangesAsync();
+            return Results.Ok(new { recipe.Id, recipe.Title });
+        });
+
+        group.MapDelete("/{id:int}", async (int id, YesChefDb db) =>
+        {
+            var recipe = await db.Recipes.FindAsync(id);
+            if (recipe is null) return Results.NotFound();
+
+            db.Recipes.Remove(recipe);
+            await db.SaveChangesAsync();
+            return Results.NoContent();
+        });
+
+        return group;
+    }
+}

src/backend/YesChef.Api/Features/ShoppingLists/ShoppingListEndpoints.cs

@@ -0,0 +1,230 @@
+using Microsoft.AspNetCore.SignalR;
+using Microsoft.EntityFrameworkCore;
+using YesChef.Api.Auth;
+using YesChef.Api.Data;
+using YesChef.Api.Entities;
+
+namespace YesChef.Api.Features.ShoppingLists;
+
+public static class ShoppingListEndpoints
+{
+    public record CreateListRequest(string Name, int StoreId);
+    public record UpdateListRequest(string Name, int StoreId);
+    public record AddItemRequest(string Name, int SortOrder = 0);
+
+    private static async Task BroadcastListSummary(IHubContext<ShoppingListHub> hub, YesChefDb db, int listId)
+    {
+        var summary = await db.ShoppingLists
+            .Where(l => l.Id == listId)
+            .Select(l => new
+            {
+                l.Id,
+                l.Name,
+                Store = new { l.Store.Id, l.Store.Name },
+                ItemCount = l.Items.Count,
+                CheckedCount = l.Items.Count(i => i.IsChecked),
+                l.UpdatedAt
+            })
+            .FirstAsync();
+
+        await hub.Clients.Group("lists-overview").SendAsync("ListSummaryUpdated", summary);
+    }
+
+    public static RouteGroupBuilder MapShoppingListEndpoints(this RouteGroupBuilder group)
+    {
+        group.MapGet("/", async (YesChefDb db, int? storeId) =>
+        {
+            var query = db.ShoppingLists
+                .Where(l => !l.IsArchived)
+                .Include(l => l.Store)
+                .Include(l => l.Items)
+                .AsQueryable();
+
+            if (storeId.HasValue)
+                query = query.Where(l => l.StoreId == storeId);
+
+            return await query.OrderByDescending(l => l.UpdatedAt)
+                .Select(l => new
+                {
+                    l.Id,
+                    l.Name,
+                    Store = new { l.Store.Id, l.Store.Name },
+                    ItemCount = l.Items.Count,
+                    CheckedCount = l.Items.Count(i => i.IsChecked),
+                    l.UpdatedAt
+                })
+                .ToListAsync();
+        });
+
+        group.MapPost("/", async (CreateListRequest request, YesChefDb db, HttpContext http, IHubContext<ShoppingListHub> hub) =>
+        {
+            var list = new ShoppingList
+            {
+                Name = request.Name,
+                StoreId = request.StoreId,
+                CreatedByUserId = http.User.GetUserId()
+            };
+            db.ShoppingLists.Add(list);
+            await db.SaveChangesAsync();
+
+            var store = await db.Stores.FindAsync(list.StoreId);
+            await hub.Clients.Group("lists-overview").SendAsync("ListCreated", new
+            {
+                list.Id,
+                list.Name,
+                Store = new { store!.Id, store.Name },
+                ItemCount = 0,
+                CheckedCount = 0,
+                list.UpdatedAt
+            });
+
+            return Results.Created($"/api/lists/{list.Id}", new { list.Id, list.Name, list.StoreId });
+        });
+
+        group.MapGet("/{id:int}", async (int id, YesChefDb db) =>
+        {
+            var list = await db.ShoppingLists
+                .Include(l => l.Store)
+                .Include(l => l.Items.OrderBy(i => i.SortOrder))
+                    .ThenInclude(i => i.CheckedByUser)
+                .Include(l => l.Items)
+                    .ThenInclude(i => i.Recipe)
+                .FirstOrDefaultAsync(l => l.Id == id);
+
+            if (list is null) return Results.NotFound();
+
+            return Results.Ok(new
+            {
+                list.Id,
+                list.Name,
+                Store = new { list.Store.Id, list.Store.Name },
+                list.IsArchived,
+                list.UpdatedAt,
+                Items = list.Items.Select(i => new
+                {
+                    i.Id,
+                    i.Name,
+                    i.IsChecked,
+                    CheckedByUserName = i.CheckedByUser?.Name,
+                    i.SortOrder,
+                    RecipeTitle = i.Recipe?.Title
+                })
+            });
+        });
+
+        group.MapPut("/{id:int}", async (int id, UpdateListRequest request, YesChefDb db, IHubContext<ShoppingListHub> hub) =>
+        {
+            var list = await db.ShoppingLists.FindAsync(id);
+            if (list is null) return Results.NotFound();
+
+            list.Name = request.Name;
+            list.StoreId = request.StoreId;
+            list.UpdatedAt = DateTime.UtcNow;
+            await db.SaveChangesAsync();
+
+            await hub.Clients.Group($"list-{id}").SendAsync("ListUpdated", new { list.Id, list.Name, list.StoreId });
+            return Results.Ok();
+        });
+
+        group.MapDelete("/{id:int}", async (int id, YesChefDb db, IHubContext<ShoppingListHub> hub) =>
+        {
+            var list = await db.ShoppingLists.FindAsync(id);
+            if (list is null) return Results.NotFound();
+
+            list.IsArchived = true;
+            list.UpdatedAt = DateTime.UtcNow;
+            await db.SaveChangesAsync();
+
+            await hub.Clients.Group("lists-overview").SendAsync("ListArchived", new { list.Id });
+
+            return Results.NoContent();
+        });
+
+        group.MapPost("/{listId:int}/items", async (int listId, AddItemRequest request, YesChefDb db, IHubContext<ShoppingListHub> hub) =>
+        {
+            if (!await db.ShoppingLists.AnyAsync(l => l.Id == listId)) return Results.NotFound();
+
+            var item = new ShoppingListItem
+            {
+                ShoppingListId = listId,
+                Name = request.Name,
+                SortOrder = request.SortOrder
+            };
+            db.ShoppingListItems.Add(item);
+
+            var list = await db.ShoppingLists.FindAsync(listId);
+            list!.UpdatedAt = DateTime.UtcNow;
+
+            await db.SaveChangesAsync();
+
+            await hub.Clients.Group($"list-{listId}").SendAsync("ItemAdded", new { item.Id, item.Name, item.SortOrder });
+            await BroadcastListSummary(hub, db, listId);
+            return Results.Created($"/api/lists/{listId}/items/{item.Id}", new { item.Id, item.Name, item.SortOrder });
+        });
+
+        group.MapPatch("/{listId:int}/items/{itemId:int}/check", async (int listId, int itemId, YesChefDb db, IHubContext<ShoppingListHub> hub, HttpContext http) =>
+        {
+            var item = await db.ShoppingListItems.FirstOrDefaultAsync(i => i.Id == itemId && i.ShoppingListId == listId);
+            if (item is null) return Results.NotFound();
+
+            var userId = http.User.GetUserId();
+            item.IsChecked = !item.IsChecked;
+            item.CheckedByUserId = item.IsChecked ? userId : null;
+            await db.SaveChangesAsync();
+
+            string? checkedByName = null;
+            if (item.IsChecked)
+                checkedByName = await db.Users.Where(u => u.Id == userId).Select(u => u.Name).FirstAsync();
+
+            await hub.Clients.Group($"list-{listId}").SendAsync("ItemChecked", new { item.Id, item.IsChecked, CheckedByUserName = checkedByName });
+            await BroadcastListSummary(hub, db, listId);
+            return Results.Ok();
+        });
+
+        group.MapDelete("/{listId:int}/items/{itemId:int}", async (int listId, int itemId, YesChefDb db, IHubContext<ShoppingListHub> hub) =>
+        {
+            var item = await db.ShoppingListItems.FirstOrDefaultAsync(i => i.Id == itemId && i.ShoppingListId == listId);
+            if (item is null) return Results.NotFound();
+
+            db.ShoppingListItems.Remove(item);
+            await db.SaveChangesAsync();
+
+            await hub.Clients.Group($"list-{listId}").SendAsync("ItemRemoved", new { item.Id });
+            await BroadcastListSummary(hub, db, listId);
+            return Results.NoContent();
+        });
+
+        group.MapPost("/{listId:int}/add-recipe/{recipeId:int}", async (int listId, int recipeId, YesChefDb db, IHubContext<ShoppingListHub> hub) =>
+        {
+            var list = await db.ShoppingLists.FindAsync(listId);
+            if (list is null) return Results.NotFound();
+
+            var recipe = await db.Recipes.Include(r => r.Ingredients).FirstOrDefaultAsync(r => r.Id == recipeId);
+            if (recipe is null) return Results.NotFound();
+
+            var maxSort = await db.ShoppingListItems.Where(i => i.ShoppingListId == listId).MaxAsync(i => (int?)i.SortOrder) ?? 0;
+
+            var newItems = recipe.Ingredients.Select((ing, idx) => new ShoppingListItem
+            {
+                ShoppingListId = listId,
+                Name = string.IsNullOrEmpty(ing.Quantity) ? ing.Name : $"{ing.Quantity} {ing.Name}",
+                SortOrder = maxSort + idx + 1,
+                RecipeId = recipeId
+            }).ToList();
+
+            db.ShoppingListItems.AddRange(newItems);
+            list.UpdatedAt = DateTime.UtcNow;
+            await db.SaveChangesAsync();
+
+            foreach (var item in newItems)
+            {
+                await hub.Clients.Group($"list-{listId}").SendAsync("ItemAdded", new { item.Id, item.Name, item.SortOrder, RecipeTitle = recipe.Title });
+            }
+
+            await BroadcastListSummary(hub, db, listId);
+            return Results.Ok(new { added = newItems.Count });
+        });
+
+        return group;
+    }
+}

src/backend/YesChef.Api/Features/ShoppingLists/ShoppingListHub.cs

@@ -0,0 +1,20 @@
+using Microsoft.AspNetCore.Authorization;
+using Microsoft.AspNetCore.SignalR;
+
+namespace YesChef.Api.Features.ShoppingLists;
+
+[Authorize]
+public class ShoppingListHub : Hub
+{
+    public async Task JoinList(int listId) =>
+        await Groups.AddToGroupAsync(Context.ConnectionId, $"list-{listId}");
+
+    public async Task LeaveList(int listId) =>
+        await Groups.RemoveFromGroupAsync(Context.ConnectionId, $"list-{listId}");
+
+    public async Task JoinListsOverview() =>
+        await Groups.AddToGroupAsync(Context.ConnectionId, "lists-overview");
+
+    public async Task LeaveListsOverview() =>
+        await Groups.RemoveFromGroupAsync(Context.ConnectionId, "lists-overview");
+}

src/backend/YesChef.Api/Features/Stores/StoreEndpoints.cs

@@ -0,0 +1,51 @@
+using Microsoft.EntityFrameworkCore;
+using YesChef.Api.Data;
+using YesChef.Api.Entities;
+
+namespace YesChef.Api.Features.Stores;
+
+public static class StoreEndpoints
+{
+    public record CreateStoreRequest(string Name, int SortOrder = 0);
+    public record UpdateStoreRequest(string Name, int SortOrder);
+
+    public static RouteGroupBuilder MapStoreEndpoints(this RouteGroupBuilder group)
+    {
+        group.MapGet("/", async (YesChefDb db) =>
+            await db.Stores.OrderBy(s => s.SortOrder).ThenBy(s => s.Name).ToListAsync());
+
+        group.MapPost("/", async (CreateStoreRequest request, YesChefDb db) =>
+        {
+            var store = new Store { Name = request.Name, SortOrder = request.SortOrder };
+            db.Stores.Add(store);
+            await db.SaveChangesAsync();
+            return Results.Created($"/api/stores/{store.Id}", store);
+        });
+
+        group.MapPut("/{id:int}", async (int id, UpdateStoreRequest request, YesChefDb db) =>
+        {
+            var store = await db.Stores.FindAsync(id);
+            if (store is null) return Results.NotFound();
+
+            store.Name = request.Name;
+            store.SortOrder = request.SortOrder;
+            await db.SaveChangesAsync();
+            return Results.Ok(store);
+        });
+
+        group.MapDelete("/{id:int}", async (int id, YesChefDb db) =>
+        {
+            var hasLists = await db.ShoppingLists.AnyAsync(l => l.StoreId == id);
+            if (hasLists) return Results.BadRequest(new { error = "Store has shopping lists. Remove them first." });
+
+            var store = await db.Stores.FindAsync(id);
+            if (store is null) return Results.NotFound();
+
+            db.Stores.Remove(store);
+            await db.SaveChangesAsync();
+            return Results.NoContent();
+        });
+
+        return group;
+    }
+}

src/backend/YesChef.Api/Migrations/20260506041045_InitialCreate.Designer.cs

@@ -0,0 +1,311 @@
+// <auto-generated />
+using System;
+using Microsoft.EntityFrameworkCore;
+using Microsoft.EntityFrameworkCore.Infrastructure;
+using Microsoft.EntityFrameworkCore.Migrations;
+using Microsoft.EntityFrameworkCore.Storage.ValueConversion;
+using Npgsql.EntityFrameworkCore.PostgreSQL.Metadata;
+using YesChef.Api.Data;
+
+#nullable disable
+
+namespace YesChef.Api.Migrations
+{
+    [DbContext(typeof(YesChefDb))]
+    [Migration("20260506041045_InitialCreate")]
+    partial class InitialCreate
+    {
+        /// <inheritdoc />
+        protected override void BuildTargetModel(ModelBuilder modelBuilder)
+        {
+#pragma warning disable 612, 618
+            modelBuilder
+                .HasAnnotation("ProductVersion", "10.0.7")
+                .HasAnnotation("Relational:MaxIdentifierLength", 63);
+
+            NpgsqlModelBuilderExtensions.UseIdentityByDefaultColumns(modelBuilder);
+
+            modelBuilder.Entity("YesChef.Api.Entities.Recipe", b =>
+                {
+                    b.Property<int>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("integer");
+
+                    NpgsqlPropertyBuilderExtensions.UseIdentityByDefaultColumn(b.Property<int>("Id"));
+
+                    b.Property<DateTime>("CreatedAt")
+                        .HasColumnType("timestamp with time zone");
+
+                    b.Property<int>("CreatedByUserId")
+                        .HasColumnType("integer");
+
+                    b.Property<string>("Description")
+                        .HasColumnType("text");
+
+                    b.Property<string>("Instructions")
+                        .HasColumnType("text");
+
+                    b.Property<int?>("Servings")
+                        .HasColumnType("integer");
+
+                    b.Property<string>("SourceUrl")
+                        .HasColumnType("text");
+
+                    b.Property<string>("Title")
+                        .IsRequired()
+                        .HasMaxLength(300)
+                        .HasColumnType("character varying(300)");
+
+                    b.Property<DateTime>("UpdatedAt")
+                        .HasColumnType("timestamp with time zone");
+
+                    b.HasKey("Id");
+
+                    b.HasIndex("CreatedByUserId");
+
+                    b.ToTable("Recipes");
+                });
+
+            modelBuilder.Entity("YesChef.Api.Entities.RecipeIngredient", b =>
+                {
+                    b.Property<int>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("integer");
+
+                    NpgsqlPropertyBuilderExtensions.UseIdentityByDefaultColumn(b.Property<int>("Id"));
+
+                    b.Property<string>("Name")
+                        .IsRequired()
+                        .HasMaxLength(200)
+                        .HasColumnType("character varying(200)");
+
+                    b.Property<string>("Quantity")
+                        .HasMaxLength(50)
+                        .HasColumnType("character varying(50)");
+
+                    b.Property<int>("RecipeId")
+                        .HasColumnType("integer");
+
+                    b.Property<int>("SortOrder")
+                        .HasColumnType("integer");
+
+                    b.HasKey("Id");
+
+                    b.HasIndex("RecipeId");
+
+                    b.ToTable("RecipeIngredients");
+                });
+
+            modelBuilder.Entity("YesChef.Api.Entities.ShoppingList", b =>
+                {
+                    b.Property<int>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("integer");
+
+                    NpgsqlPropertyBuilderExtensions.UseIdentityByDefaultColumn(b.Property<int>("Id"));
+
+                    b.Property<DateTime>("CreatedAt")
+                        .HasColumnType("timestamp with time zone");
+
+                    b.Property<int>("CreatedByUserId")
+                        .HasColumnType("integer");
+
+                    b.Property<bool>("IsArchived")
+                        .HasColumnType("boolean");
+
+                    b.Property<string>("Name")
+                        .IsRequired()
+                        .HasMaxLength(200)
+                        .HasColumnType("character varying(200)");
+
+                    b.Property<int>("StoreId")
+                        .HasColumnType("integer");
+
+                    b.Property<DateTime>("UpdatedAt")
+                        .HasColumnType("timestamp with time zone");
+
+                    b.HasKey("Id");
+
+                    b.HasIndex("CreatedByUserId");
+
+                    b.HasIndex("StoreId");
+
+                    b.ToTable("ShoppingLists");
+                });
+
+            modelBuilder.Entity("YesChef.Api.Entities.ShoppingListItem", b =>
+                {
+                    b.Property<int>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("integer");
+
+                    NpgsqlPropertyBuilderExtensions.UseIdentityByDefaultColumn(b.Property<int>("Id"));
+
+                    b.Property<int?>("CheckedByUserId")
+                        .HasColumnType("integer");
+
+                    b.Property<DateTime>("CreatedAt")
+                        .HasColumnType("timestamp with time zone");
+
+                    b.Property<bool>("IsChecked")
+                        .HasColumnType("boolean");
+
+                    b.Property<string>("Name")
+                        .IsRequired()
+                        .HasMaxLength(300)
+                        .HasColumnType("character varying(300)");
+
+                    b.Property<int?>("RecipeId")
+                        .HasColumnType("integer");
+
+                    b.Property<int>("ShoppingListId")
+                        .HasColumnType("integer");
+
+                    b.Property<int>("SortOrder")
+                        .HasColumnType("integer");
+
+                    b.HasKey("Id");
+
+                    b.HasIndex("CheckedByUserId");
+
+                    b.HasIndex("RecipeId");
+
+                    b.HasIndex("ShoppingListId");
+
+                    b.ToTable("ShoppingListItems");
+                });
+
+            modelBuilder.Entity("YesChef.Api.Entities.Store", b =>
+                {
+                    b.Property<int>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("integer");
+
+                    NpgsqlPropertyBuilderExtensions.UseIdentityByDefaultColumn(b.Property<int>("Id"));
+
+                    b.Property<DateTime>("CreatedAt")
+                        .HasColumnType("timestamp with time zone");
+
+                    b.Property<string>("Name")
+                        .IsRequired()
+                        .HasMaxLength(100)
+                        .HasColumnType("character varying(100)");
+
+                    b.Property<int>("SortOrder")
+                        .HasColumnType("integer");
+
+                    b.HasKey("Id");
+
+                    b.HasIndex("Name")
+                        .IsUnique();
+
+                    b.ToTable("Stores");
+                });
+
+            modelBuilder.Entity("YesChef.Api.Entities.User", b =>
+                {
+                    b.Property<int>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("integer");
+
+                    NpgsqlPropertyBuilderExtensions.UseIdentityByDefaultColumn(b.Property<int>("Id"));
+
+                    b.Property<DateTime>("CreatedAt")
+                        .HasColumnType("timestamp with time zone");
+
+                    b.Property<string>("Name")
+                        .IsRequired()
+                        .HasMaxLength(100)
+                        .HasColumnType("character varying(100)");
+
+                    b.Property<string>("PasswordHash")
+                        .IsRequired()
+                        .HasColumnType("text");
+
+                    b.HasKey("Id");
+
+                    b.HasIndex("Name")
+                        .IsUnique();
+
+                    b.ToTable("Users");
+                });
+
+            modelBuilder.Entity("YesChef.Api.Entities.Recipe", b =>
+                {
+                    b.HasOne("YesChef.Api.Entities.User", "CreatedByUser")
+                        .WithMany()
+                        .HasForeignKey("CreatedByUserId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+
+                    b.Navigation("CreatedByUser");
+                });
+
+            modelBuilder.Entity("YesChef.Api.Entities.RecipeIngredient", b =>
+                {
+                    b.HasOne("YesChef.Api.Entities.Recipe", "Recipe")
+                        .WithMany("Ingredients")
+                        .HasForeignKey("RecipeId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+
+                    b.Navigation("Recipe");
+                });
+
+            modelBuilder.Entity("YesChef.Api.Entities.ShoppingList", b =>
+                {
+                    b.HasOne("YesChef.Api.Entities.User", "CreatedByUser")
+                        .WithMany()
+                        .HasForeignKey("CreatedByUserId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+
+                    b.HasOne("YesChef.Api.Entities.Store", "Store")
+                        .WithMany()
+                        .HasForeignKey("StoreId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+
+                    b.Navigation("CreatedByUser");
+
+                    b.Navigation("Store");
+                });
+
+            modelBuilder.Entity("YesChef.Api.Entities.ShoppingListItem", b =>
+                {
+                    b.HasOne("YesChef.Api.Entities.User", "CheckedByUser")
+                        .WithMany()
+                        .HasForeignKey("CheckedByUserId")
+                        .OnDelete(DeleteBehavior.SetNull);
+
+                    b.HasOne("YesChef.Api.Entities.Recipe", "Recipe")
+                        .WithMany()
+                        .HasForeignKey("RecipeId")
+                        .OnDelete(DeleteBehavior.SetNull);
+
+                    b.HasOne("YesChef.Api.Entities.ShoppingList", "ShoppingList")
+                        .WithMany("Items")
+                        .HasForeignKey("ShoppingListId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+
+                    b.Navigation("CheckedByUser");
+
+                    b.Navigation("Recipe");
+
+                    b.Navigation("ShoppingList");
+                });
+
+            modelBuilder.Entity("YesChef.Api.Entities.Recipe", b =>
+                {
+                    b.Navigation("Ingredients");
+                });
+
+            modelBuilder.Entity("YesChef.Api.Entities.ShoppingList", b =>
+                {
+                    b.Navigation("Items");
+                });
+#pragma warning restore 612, 618
+        }
+    }
+}

src/backend/YesChef.Api/Migrations/20260506041045_InitialCreate.cs

@@ -0,0 +1,230 @@
+using System;
+using Microsoft.EntityFrameworkCore.Migrations;
+using Npgsql.EntityFrameworkCore.PostgreSQL.Metadata;
+
+#nullable disable
+
+namespace YesChef.Api.Migrations
+{
+    /// <inheritdoc />
+    public partial class InitialCreate : Migration
+    {
+        /// <inheritdoc />
+        protected override void Up(MigrationBuilder migrationBuilder)
+        {
+            migrationBuilder.CreateTable(
+                name: "Stores",
+                columns: table => new
+                {
+                    Id = table.Column<int>(type: "integer", nullable: false)
+                        .Annotation("Npgsql:ValueGenerationStrategy", NpgsqlValueGenerationStrategy.IdentityByDefaultColumn),
+                    Name = table.Column<string>(type: "character varying(100)", maxLength: 100, nullable: false),
+                    SortOrder = table.Column<int>(type: "integer", nullable: false),
+                    CreatedAt = table.Column<DateTime>(type: "timestamp with time zone", nullable: false)
+                },
+                constraints: table =>
+                {
+                    table.PrimaryKey("PK_Stores", x => x.Id);
+                });
+
+            migrationBuilder.CreateTable(
+                name: "Users",
+                columns: table => new
+                {
+                    Id = table.Column<int>(type: "integer", nullable: false)
+                        .Annotation("Npgsql:ValueGenerationStrategy", NpgsqlValueGenerationStrategy.IdentityByDefaultColumn),
+                    Name = table.Column<string>(type: "character varying(100)", maxLength: 100, nullable: false),
+                    PasswordHash = table.Column<string>(type: "text", nullable: false),
+                    CreatedAt = table.Column<DateTime>(type: "timestamp with time zone", nullable: false)
+                },
+                constraints: table =>
+                {
+                    table.PrimaryKey("PK_Users", x => x.Id);
+                });
+
+            migrationBuilder.CreateTable(
+                name: "Recipes",
+                columns: table => new
+                {
+                    Id = table.Column<int>(type: "integer", nullable: false)
+                        .Annotation("Npgsql:ValueGenerationStrategy", NpgsqlValueGenerationStrategy.IdentityByDefaultColumn),
+                    Title = table.Column<string>(type: "character varying(300)", maxLength: 300, nullable: false),
+                    Description = table.Column<string>(type: "text", nullable: true),
+                    Instructions = table.Column<string>(type: "text", nullable: true),
+                    Servings = table.Column<int>(type: "integer", nullable: true),
+                    SourceUrl = table.Column<string>(type: "text", nullable: true),
+                    CreatedByUserId = table.Column<int>(type: "integer", nullable: false),
+                    CreatedAt = table.Column<DateTime>(type: "timestamp with time zone", nullable: false),
+                    UpdatedAt = table.Column<DateTime>(type: "timestamp with time zone", nullable: false)
+                },
+                constraints: table =>
+                {
+                    table.PrimaryKey("PK_Recipes", x => x.Id);
+                    table.ForeignKey(
+                        name: "FK_Recipes_Users_CreatedByUserId",
+                        column: x => x.CreatedByUserId,
+                        principalTable: "Users",
+                        principalColumn: "Id",
+                        onDelete: ReferentialAction.Cascade);
+                });
+
+            migrationBuilder.CreateTable(
+                name: "ShoppingLists",
+                columns: table => new
+                {
+                    Id = table.Column<int>(type: "integer", nullable: false)
+                        .Annotation("Npgsql:ValueGenerationStrategy", NpgsqlValueGenerationStrategy.IdentityByDefaultColumn),
+                    Name = table.Column<string>(type: "character varying(200)", maxLength: 200, nullable: false),
+                    StoreId = table.Column<int>(type: "integer", nullable: false),
+                    IsArchived = table.Column<bool>(type: "boolean", nullable: false),
+                    CreatedByUserId = table.Column<int>(type: "integer", nullable: false),
+                    CreatedAt = table.Column<DateTime>(type: "timestamp with time zone", nullable: false),
+                    UpdatedAt = table.Column<DateTime>(type: "timestamp with time zone", nullable: false)
+                },
+                constraints: table =>
+                {
+                    table.PrimaryKey("PK_ShoppingLists", x => x.Id);
+                    table.ForeignKey(
+                        name: "FK_ShoppingLists_Stores_StoreId",
+                        column: x => x.StoreId,
+                        principalTable: "Stores",
+                        principalColumn: "Id",
+                        onDelete: ReferentialAction.Cascade);
+                    table.ForeignKey(
+                        name: "FK_ShoppingLists_Users_CreatedByUserId",
+                        column: x => x.CreatedByUserId,
+                        principalTable: "Users",
+                        principalColumn: "Id",
+                        onDelete: ReferentialAction.Cascade);
+                });
+
+            migrationBuilder.CreateTable(
+                name: "RecipeIngredients",
+                columns: table => new
+                {
+                    Id = table.Column<int>(type: "integer", nullable: false)
+                        .Annotation("Npgsql:ValueGenerationStrategy", NpgsqlValueGenerationStrategy.IdentityByDefaultColumn),
+                    RecipeId = table.Column<int>(type: "integer", nullable: false),
+                    Name = table.Column<string>(type: "character varying(200)", maxLength: 200, nullable: false),
+                    Quantity = table.Column<string>(type: "character varying(50)", maxLength: 50, nullable: true),
+                    SortOrder = table.Column<int>(type: "integer", nullable: false)
+                },
+                constraints: table =>
+                {
+                    table.PrimaryKey("PK_RecipeIngredients", x => x.Id);
+                    table.ForeignKey(
+                        name: "FK_RecipeIngredients_Recipes_RecipeId",
+                        column: x => x.RecipeId,
+                        principalTable: "Recipes",
+                        principalColumn: "Id",
+                        onDelete: ReferentialAction.Cascade);
+                });
+
+            migrationBuilder.CreateTable(
+                name: "ShoppingListItems",
+                columns: table => new
+                {
+                    Id = table.Column<int>(type: "integer", nullable: false)
+                        .Annotation("Npgsql:ValueGenerationStrategy", NpgsqlValueGenerationStrategy.IdentityByDefaultColumn),
+                    ShoppingListId = table.Column<int>(type: "integer", nullable: false),
+                    Name = table.Column<string>(type: "character varying(300)", maxLength: 300, nullable: false),
+                    IsChecked = table.Column<bool>(type: "boolean", nullable: false),
+                    CheckedByUserId = table.Column<int>(type: "integer", nullable: true),
+                    SortOrder = table.Column<int>(type: "integer", nullable: false),
+                    RecipeId = table.Column<int>(type: "integer", nullable: true),
+                    CreatedAt = table.Column<DateTime>(type: "timestamp with time zone", nullable: false)
+                },
+                constraints: table =>
+                {
+                    table.PrimaryKey("PK_ShoppingListItems", x => x.Id);
+                    table.ForeignKey(
+                        name: "FK_ShoppingListItems_Recipes_RecipeId",
+                        column: x => x.RecipeId,
+                        principalTable: "Recipes",
+                        principalColumn: "Id",
+                        onDelete: ReferentialAction.SetNull);
+                    table.ForeignKey(
+                        name: "FK_ShoppingListItems_ShoppingLists_ShoppingListId",
+                        column: x => x.ShoppingListId,
+                        principalTable: "ShoppingLists",
+                        principalColumn: "Id",
+                        onDelete: ReferentialAction.Cascade);
+                    table.ForeignKey(
+                        name: "FK_ShoppingListItems_Users_CheckedByUserId",
+                        column: x => x.CheckedByUserId,
+                        principalTable: "Users",
+                        principalColumn: "Id",
+                        onDelete: ReferentialAction.SetNull);
+                });
+
+            migrationBuilder.CreateIndex(
+                name: "IX_RecipeIngredients_RecipeId",
+                table: "RecipeIngredients",
+                column: "RecipeId");
+
+            migrationBuilder.CreateIndex(
+                name: "IX_Recipes_CreatedByUserId",
+                table: "Recipes",
+                column: "CreatedByUserId");
+
+            migrationBuilder.CreateIndex(
+                name: "IX_ShoppingListItems_CheckedByUserId",
+                table: "ShoppingListItems",
+                column: "CheckedByUserId");
+
+            migrationBuilder.CreateIndex(
+                name: "IX_ShoppingListItems_RecipeId",
+                table: "ShoppingListItems",
+                column: "RecipeId");
+
+            migrationBuilder.CreateIndex(
+                name: "IX_ShoppingListItems_ShoppingListId",
+                table: "ShoppingListItems",
+                column: "ShoppingListId");
+
+            migrationBuilder.CreateIndex(
+                name: "IX_ShoppingLists_CreatedByUserId",
+                table: "ShoppingLists",
+                column: "CreatedByUserId");
+
+            migrationBuilder.CreateIndex(
+                name: "IX_ShoppingLists_StoreId",
+                table: "ShoppingLists",
+                column: "StoreId");
+
+            migrationBuilder.CreateIndex(
+                name: "IX_Stores_Name",
+                table: "Stores",
+                column: "Name",
+                unique: true);
+
+            migrationBuilder.CreateIndex(
+                name: "IX_Users_Name",
+                table: "Users",
+                column: "Name",
+                unique: true);
+        }
+
+        /// <inheritdoc />
+        protected override void Down(MigrationBuilder migrationBuilder)
+        {
+            migrationBuilder.DropTable(
+                name: "RecipeIngredients");
+
+            migrationBuilder.DropTable(
+                name: "ShoppingListItems");
+
+            migrationBuilder.DropTable(
+                name: "Recipes");
+
+            migrationBuilder.DropTable(
+                name: "ShoppingLists");
+
+            migrationBuilder.DropTable(
+                name: "Stores");
+
+            migrationBuilder.DropTable(
+                name: "Users");
+        }
+    }
+}

src/backend/YesChef.Api/Migrations/YesChefDbModelSnapshot.cs

@@ -0,0 +1,308 @@
+// <auto-generated />
+using System;
+using Microsoft.EntityFrameworkCore;
+using Microsoft.EntityFrameworkCore.Infrastructure;
+using Microsoft.EntityFrameworkCore.Storage.ValueConversion;
+using Npgsql.EntityFrameworkCore.PostgreSQL.Metadata;
+using YesChef.Api.Data;
+
+#nullable disable
+
+namespace YesChef.Api.Migrations
+{
+    [DbContext(typeof(YesChefDb))]
+    partial class YesChefDbModelSnapshot : ModelSnapshot
+    {
+        protected override void BuildModel(ModelBuilder modelBuilder)
+        {
+#pragma warning disable 612, 618
+            modelBuilder
+                .HasAnnotation("ProductVersion", "10.0.7")
+                .HasAnnotation("Relational:MaxIdentifierLength", 63);
+
+            NpgsqlModelBuilderExtensions.UseIdentityByDefaultColumns(modelBuilder);
+
+            modelBuilder.Entity("YesChef.Api.Entities.Recipe", b =>
+                {
+                    b.Property<int>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("integer");
+
+                    NpgsqlPropertyBuilderExtensions.UseIdentityByDefaultColumn(b.Property<int>("Id"));
+
+                    b.Property<DateTime>("CreatedAt")
+                        .HasColumnType("timestamp with time zone");
+
+                    b.Property<int>("CreatedByUserId")
+                        .HasColumnType("integer");
+
+                    b.Property<string>("Description")
+                        .HasColumnType("text");
+
+                    b.Property<string>("Instructions")
+                        .HasColumnType("text");
+
+                    b.Property<int?>("Servings")
+                        .HasColumnType("integer");
+
+                    b.Property<string>("SourceUrl")
+                        .HasColumnType("text");
+
+                    b.Property<string>("Title")
+                        .IsRequired()
+                        .HasMaxLength(300)
+                        .HasColumnType("character varying(300)");
+
+                    b.Property<DateTime>("UpdatedAt")
+                        .HasColumnType("timestamp with time zone");
+
+                    b.HasKey("Id");
+
+                    b.HasIndex("CreatedByUserId");
+
+                    b.ToTable("Recipes");
+                });
+
+            modelBuilder.Entity("YesChef.Api.Entities.RecipeIngredient", b =>
+                {
+                    b.Property<int>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("integer");
+
+                    NpgsqlPropertyBuilderExtensions.UseIdentityByDefaultColumn(b.Property<int>("Id"));
+
+                    b.Property<string>("Name")
+                        .IsRequired()
+                        .HasMaxLength(200)
+                        .HasColumnType("character varying(200)");
+
+                    b.Property<string>("Quantity")
+                        .HasMaxLength(50)
+                        .HasColumnType("character varying(50)");
+
+                    b.Property<int>("RecipeId")
+                        .HasColumnType("integer");
+
+                    b.Property<int>("SortOrder")
+                        .HasColumnType("integer");
+
+                    b.HasKey("Id");
+
+                    b.HasIndex("RecipeId");
+
+                    b.ToTable("RecipeIngredients");
+                });
+
+            modelBuilder.Entity("YesChef.Api.Entities.ShoppingList", b =>
+                {
+                    b.Property<int>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("integer");
+
+                    NpgsqlPropertyBuilderExtensions.UseIdentityByDefaultColumn(b.Property<int>("Id"));
+
+                    b.Property<DateTime>("CreatedAt")
+                        .HasColumnType("timestamp with time zone");
+
+                    b.Property<int>("CreatedByUserId")
+                        .HasColumnType("integer");
+
+                    b.Property<bool>("IsArchived")
+                        .HasColumnType("boolean");
+
+                    b.Property<string>("Name")
+                        .IsRequired()
+                        .HasMaxLength(200)
+                        .HasColumnType("character varying(200)");
+
+                    b.Property<int>("StoreId")
+                        .HasColumnType("integer");
+
+                    b.Property<DateTime>("UpdatedAt")
+                        .HasColumnType("timestamp with time zone");
+
+                    b.HasKey("Id");
+
+                    b.HasIndex("CreatedByUserId");
+
+                    b.HasIndex("StoreId");
+
+                    b.ToTable("ShoppingLists");
+                });
+
+            modelBuilder.Entity("YesChef.Api.Entities.ShoppingListItem", b =>
+                {
+                    b.Property<int>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("integer");
+
+                    NpgsqlPropertyBuilderExtensions.UseIdentityByDefaultColumn(b.Property<int>("Id"));
+
+                    b.Property<int?>("CheckedByUserId")
+                        .HasColumnType("integer");
+
+                    b.Property<DateTime>("CreatedAt")
+                        .HasColumnType("timestamp with time zone");
+
+                    b.Property<bool>("IsChecked")
+                        .HasColumnType("boolean");
+
+                    b.Property<string>("Name")
+                        .IsRequired()
+                        .HasMaxLength(300)
+                        .HasColumnType("character varying(300)");
+
+                    b.Property<int?>("RecipeId")
+                        .HasColumnType("integer");
+
+                    b.Property<int>("ShoppingListId")
+                        .HasColumnType("integer");
+
+                    b.Property<int>("SortOrder")
+                        .HasColumnType("integer");
+
+                    b.HasKey("Id");
+
+                    b.HasIndex("CheckedByUserId");
+
+                    b.HasIndex("RecipeId");
+
+                    b.HasIndex("ShoppingListId");
+
+                    b.ToTable("ShoppingListItems");
+                });
+
+            modelBuilder.Entity("YesChef.Api.Entities.Store", b =>
+                {
+                    b.Property<int>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("integer");
+
+                    NpgsqlPropertyBuilderExtensions.UseIdentityByDefaultColumn(b.Property<int>("Id"));
+
+                    b.Property<DateTime>("CreatedAt")
+                        .HasColumnType("timestamp with time zone");
+
+                    b.Property<string>("Name")
+                        .IsRequired()
+                        .HasMaxLength(100)
+                        .HasColumnType("character varying(100)");
+
+                    b.Property<int>("SortOrder")
+                        .HasColumnType("integer");
+
+                    b.HasKey("Id");
+
+                    b.HasIndex("Name")
+                        .IsUnique();
+
+                    b.ToTable("Stores");
+                });
+
+            modelBuilder.Entity("YesChef.Api.Entities.User", b =>
+                {
+                    b.Property<int>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("integer");
+
+                    NpgsqlPropertyBuilderExtensions.UseIdentityByDefaultColumn(b.Property<int>("Id"));
+
+                    b.Property<DateTime>("CreatedAt")
+                        .HasColumnType("timestamp with time zone");
+
+                    b.Property<string>("Name")
+                        .IsRequired()
+                        .HasMaxLength(100)
+                        .HasColumnType("character varying(100)");
+
+                    b.Property<string>("PasswordHash")
+                        .IsRequired()
+                        .HasColumnType("text");
+
+                    b.HasKey("Id");
+
+                    b.HasIndex("Name")
+                        .IsUnique();
+
+                    b.ToTable("Users");
+                });
+
+            modelBuilder.Entity("YesChef.Api.Entities.Recipe", b =>
+                {
+                    b.HasOne("YesChef.Api.Entities.User", "CreatedByUser")
+                        .WithMany()
+                        .HasForeignKey("CreatedByUserId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+
+                    b.Navigation("CreatedByUser");
+                });
+
+            modelBuilder.Entity("YesChef.Api.Entities.RecipeIngredient", b =>
+                {
+                    b.HasOne("YesChef.Api.Entities.Recipe", "Recipe")
+                        .WithMany("Ingredients")
+                        .HasForeignKey("RecipeId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+
+                    b.Navigation("Recipe");
+                });
+
+            modelBuilder.Entity("YesChef.Api.Entities.ShoppingList", b =>
+                {
+                    b.HasOne("YesChef.Api.Entities.User", "CreatedByUser")
+                        .WithMany()
+                        .HasForeignKey("CreatedByUserId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+
+                    b.HasOne("YesChef.Api.Entities.Store", "Store")
+                        .WithMany()
+                        .HasForeignKey("StoreId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+
+                    b.Navigation("CreatedByUser");
+
+                    b.Navigation("Store");
+                });
+
+            modelBuilder.Entity("YesChef.Api.Entities.ShoppingListItem", b =>
+                {
+                    b.HasOne("YesChef.Api.Entities.User", "CheckedByUser")
+                        .WithMany()
+                        .HasForeignKey("CheckedByUserId")
+                        .OnDelete(DeleteBehavior.SetNull);
+
+                    b.HasOne("YesChef.Api.Entities.Recipe", "Recipe")
+                        .WithMany()
+                        .HasForeignKey("RecipeId")
+                        .OnDelete(DeleteBehavior.SetNull);
+
+                    b.HasOne("YesChef.Api.Entities.ShoppingList", "ShoppingList")
+                        .WithMany("Items")
+                        .HasForeignKey("ShoppingListId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+
+                    b.Navigation("CheckedByUser");
+
+                    b.Navigation("Recipe");
+
+                    b.Navigation("ShoppingList");
+                });
+
+            modelBuilder.Entity("YesChef.Api.Entities.Recipe", b =>
+                {
+                    b.Navigation("Ingredients");
+                });
+
+            modelBuilder.Entity("YesChef.Api.Entities.ShoppingList", b =>
+                {
+                    b.Navigation("Items");
+                });
+#pragma warning restore 612, 618
+        }
+    }
+}

src/backend/YesChef.Api/Program.cs

@@ -0,0 +1,69 @@
+using System.Text;
+using Microsoft.AspNetCore.Authentication.JwtBearer;
+using Microsoft.EntityFrameworkCore;
+using Microsoft.IdentityModel.Tokens;
+using YesChef.Api.Auth;
+using YesChef.Api.Data;
+using YesChef.Api.Features.Recipes;
+using YesChef.Api.Features.ShoppingLists;
+using YesChef.Api.Features.Stores;
+
+var builder = WebApplication.CreateBuilder(args);
+
+builder.Services.AddDbContext<YesChefDb>(options =>
+    options.UseNpgsql(builder.Configuration.GetConnectionString("DefaultConnection")));
+
+builder.Services.AddSingleton<JwtTokenService>();
+
+builder.Services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
+    .AddJwtBearer(options =>
+    {
+        options.TokenValidationParameters = new TokenValidationParameters
+        {
+            ValidateIssuer = false,
+            ValidateAudience = false,
+            ValidateLifetime = true,
+            ValidateIssuerSigningKey = true,
+            IssuerSigningKey = new SymmetricSecurityKey(
+                Encoding.UTF8.GetBytes(builder.Configuration["Jwt:Secret"]!))
+        };
+
+        options.Events = new JwtBearerEvents
+        {
+            OnMessageReceived = context =>
+            {
+                var accessToken = context.Request.Query["access_token"];
+                if (!string.IsNullOrEmpty(accessToken) && context.HttpContext.Request.Path.StartsWithSegments("/hubs"))
+                    context.Token = accessToken;
+                return Task.CompletedTask;
+            }
+        };
+    });
+
+builder.Services.AddAuthorization();
+builder.Services.AddSignalR();
+
+var app = builder.Build();
+
+using (var scope = app.Services.CreateScope())
+{
+    var db = scope.ServiceProvider.GetRequiredService<YesChefDb>();
+    await db.Database.MigrateAsync();
+}
+
+app.UseAuthentication();
+app.UseAuthorization();
+
+app.MapGet("/health", async (YesChefDb db) =>
+{
+    await db.Database.CanConnectAsync();
+    return Results.Ok(new { status = "healthy" });
+});
+
+app.MapGroup("/api/auth").MapAuthEndpoints();
+app.MapGroup("/api/stores").MapStoreEndpoints().RequireAuthorization();
+app.MapGroup("/api/lists").MapShoppingListEndpoints().RequireAuthorization();
+app.MapGroup("/api/recipes").MapRecipeEndpoints().RequireAuthorization();
+app.MapHub<ShoppingListHub>("/hubs/shopping-list");
+
+app.Run();

src/backend/YesChef.Api/Properties/launchSettings.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://json.schemastore.org/launchsettings.json",
+  "profiles": {
+    "http": {
+      "commandName": "Project",
+      "dotnetRunMessages": true,
+      "launchBrowser": false,
+      "applicationUrl": "http://localhost:5291",
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development"
+      }
+    },
+    "https": {
+      "commandName": "Project",
+      "dotnetRunMessages": true,
+      "launchBrowser": false,
+      "applicationUrl": "https://localhost:7264;http://localhost:5291",
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development"
+      }
+    }
+  }
+}

src/backend/YesChef.Api/YesChef.Api.csproj

@@ -0,0 +1,18 @@
+<Project Sdk="Microsoft.NET.Sdk.Web">
+
+  <PropertyGroup>
+    <TargetFramework>net10.0</TargetFramework>
+    <Nullable>enable</Nullable>
+    <ImplicitUsings>enable</ImplicitUsings>
+  </PropertyGroup>
+
+  <ItemGroup>
+    <PackageReference Include="Microsoft.AspNetCore.Authentication.JwtBearer" Version="10.0.7" />
+    <PackageReference Include="Microsoft.EntityFrameworkCore.Design" Version="10.0.7">
+      <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
+      <PrivateAssets>all</PrivateAssets>
+    </PackageReference>
+    <PackageReference Include="Npgsql.EntityFrameworkCore.PostgreSQL" Version="10.0.1" />
+  </ItemGroup>
+
+</Project>

src/backend/YesChef.Api/YesChef.Api.http

@@ -0,0 +1,6 @@
+@YesChef.Api_HostAddress = http://localhost:5291
+
+GET {{YesChef.Api_HostAddress}}/weatherforecast/
+Accept: application/json
+
+###

src/backend/YesChef.Api/appsettings.Development.json

@@ -0,0 +1,8 @@
+{
+  "Logging": {
+    "LogLevel": {
+      "Default": "Information",
+      "Microsoft.AspNetCore": "Warning"
+    }
+  }
+}

src/backend/YesChef.Api/appsettings.json

@@ -0,0 +1,15 @@
+{
+  "ConnectionStrings": {
+    "DefaultConnection": "Host=localhost;Database=yeschef;Username=yeschef;Password=yeschef"
+  },
+  "Jwt": {
+    "Secret": "dev-secret-key-change-in-production-must-be-at-least-32-chars!"
+  },
+  "FamilyCode": "dev-family-code",
+  "Logging": {
+    "LogLevel": {
+      "Default": "Information",
+      "Microsoft.AspNetCore": "Warning"
+    }
+  }
+}

src/backend/YesChef.slnx

@@ -0,0 +1,3 @@
+<Solution>
+  <Project Path="YesChef.Api/YesChef.Api.csproj" />
+</Solution>

src/frontend/.gitignore

@@ -0,0 +1,23 @@
+node_modules
+
+# Output
+.output
+.vercel
+.netlify
+.wrangler
+/.svelte-kit
+/build
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Env
+.env
+.env.*
+!.env.example
+!.env.test
+
+# Vite
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*

src/frontend/.npmrc

@@ -0,0 +1 @@
+engine-strict=true

src/frontend/Dockerfile

@@ -0,0 +1,15 @@
+FROM node:22-slim AS build
+WORKDIR /app
+COPY package*.json .
+RUN npm ci
+COPY . .
+RUN npm run build
+
+FROM node:22-slim
+WORKDIR /app
+COPY --from=build /app/build .
+COPY --from=build /app/package.json .
+RUN npm ci --omit=dev
+EXPOSE 3000
+ENV PORT=3000
+CMD ["node", "index.js"]

src/frontend/README.md

@@ -0,0 +1,42 @@
+# sv
+
+Everything you need to build a Svelte project, powered by [`sv`](https://github.com/sveltejs/cli).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```sh
+# create a new project
+npx sv create my-app
+```
+
+To recreate this project with the same configuration:
+
+```sh
+# recreate this project
+npx sv@0.15.2 create --template minimal --types ts --no-install src/frontend
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```sh
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+## Building
+
+To create a production version of your app:
+
+```sh
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.

src/frontend/package.json

@@ -0,0 +1,29 @@
+{
+	"name": "frontend",
+	"private": true,
+	"version": "0.0.1",
+	"type": "module",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview",
+		"prepare": "svelte-kit sync || echo ''",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
+	},
+	"devDependencies": {
+		"@sveltejs/adapter-auto": "^7.0.1",
+		"@sveltejs/kit": "^2.57.0",
+		"@sveltejs/vite-plugin-svelte": "^7.0.0",
+		"svelte": "^5.55.2",
+		"svelte-check": "^4.4.6",
+		"typescript": "^6.0.2",
+		"vite": "^8.0.7"
+	},
+	"dependencies": {
+		"@microsoft/signalr": "^10.0.0",
+		"@sveltejs/adapter-node": "^5.5.4",
+		"@tailwindcss/vite": "^4.2.4",
+		"tailwindcss": "^4.2.4"
+	}
+}

src/frontend/src/app.css

@@ -0,0 +1,23 @@
+@import 'tailwindcss';
+
+@theme {
+	--color-primary: #16a34a;
+	--color-primary-dark: #15803d;
+	--color-primary-light: #22c55e;
+	--color-danger: #dc2626;
+	--color-danger-dark: #b91c1c;
+}
+
+html {
+	font-family:
+		-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+}
+
+body {
+	@apply bg-gray-50 text-gray-900;
+	-webkit-tap-highlight-color: transparent;
+}
+
+button {
+	@apply cursor-pointer;
+}

src/frontend/src/app.d.ts

@@ -0,0 +1,13 @@
+// See https://svelte.dev/docs/kit/types#app.d.ts
+// for information about these interfaces
+declare global {
+	namespace App {
+		// interface Error {}
+		// interface Locals {}
+		// interface PageData {}
+		// interface PageState {}
+		// interface Platform {}
+	}
+}
+
+export {};

src/frontend/src/app.html

@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+		<meta name="theme-color" content="#16a34a" />
+		<meta name="apple-mobile-web-app-capable" content="yes" />
+		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+		<link rel="manifest" href="/manifest.webmanifest" />
+		<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
+		<link rel="apple-touch-icon" href="/icons/icon-192.png" />
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>

src/frontend/src/lib/api.ts

@@ -0,0 +1,48 @@
+import { goto } from '$app/navigation';
+import { setLoggedIn } from '$lib/auth.svelte';
+
+let token: string | null = null;
+
+export function getToken(): string | null {
+	if (token === null && typeof localStorage !== 'undefined') {
+		token = localStorage.getItem('token');
+	}
+	return token;
+}
+
+export function setToken(t: string) {
+	token = t;
+	localStorage.setItem('token', t);
+	setLoggedIn(true);
+}
+
+export function clearToken() {
+	token = null;
+	localStorage.removeItem('token');
+	setLoggedIn(false);
+}
+
+export async function api<T>(path: string, options: RequestInit = {}): Promise<T> {
+	const t = getToken();
+	const headers: Record<string, string> = {
+		'Content-Type': 'application/json',
+		...(options.headers as Record<string, string>)
+	};
+	if (t) headers['Authorization'] = `Bearer ${t}`;
+
+	const res = await fetch(path, { ...options, headers });
+
+	if (res.status === 401) {
+		clearToken();
+		goto('/login');
+		throw new Error('Unauthorized');
+	}
+
+	if (!res.ok) {
+		const body = await res.json().catch(() => ({}));
+		throw new Error(body.error || `Request failed: ${res.status}`);
+	}
+
+	if (res.status === 204) return undefined as T;
+	return res.json();
+}

src/frontend/src/lib/assets/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="107" height="128" viewBox="0 0 107 128"><title>svelte-logo</title><path d="M94.157 22.819c-10.4-14.885-30.94-19.297-45.792-9.835L22.282 29.608A29.92 29.92 0 0 0 8.764 49.65a31.5 31.5 0 0 0 3.108 20.231 30 30 0 0 0-4.477 11.183 31.9 31.9 0 0 0 5.448 24.116c10.402 14.887 30.942 19.297 45.791 9.835l26.083-16.624A29.92 29.92 0 0 0 98.235 78.35a31.53 31.53 0 0 0-3.105-20.232 30 30 0 0 0 4.474-11.182 31.88 31.88 0 0 0-5.447-24.116" style="fill:#ff3e00"/><path d="M45.817 106.582a20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.503 18 18 0 0 1 .624-2.435l.49-1.498 1.337.981a33.6 33.6 0 0 0 10.203 5.098l.97.294-.09.968a5.85 5.85 0 0 0 1.052 3.878 6.24 6.24 0 0 0 6.695 2.485 5.8 5.8 0 0 0 1.603-.704L69.27 76.28a5.43 5.43 0 0 0 2.45-3.631 5.8 5.8 0 0 0-.987-4.371 6.24 6.24 0 0 0-6.698-2.487 5.7 5.7 0 0 0-1.6.704l-9.953 6.345a19 19 0 0 1-5.296 2.326 20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.502 17.99 17.99 0 0 1 8.13-12.052l26.081-16.623a19 19 0 0 1 5.3-2.329 20.72 20.72 0 0 1 22.237 8.243 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-.624 2.435l-.49 1.498-1.337-.98a33.6 33.6 0 0 0-10.203-5.1l-.97-.294.09-.968a5.86 5.86 0 0 0-1.052-3.878 6.24 6.24 0 0 0-6.696-2.485 5.8 5.8 0 0 0-1.602.704L37.73 51.72a5.42 5.42 0 0 0-2.449 3.63 5.79 5.79 0 0 0 .986 4.372 6.24 6.24 0 0 0 6.698 2.486 5.8 5.8 0 0 0 1.602-.704l9.952-6.342a19 19 0 0 1 5.295-2.328 20.72 20.72 0 0 1 22.237 8.242 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-8.13 12.053l-26.081 16.622a19 19 0 0 1-5.3 2.328" style="fill:#fff"/></svg>

src/frontend/src/lib/auth.svelte.ts

@@ -0,0 +1,15 @@
+let loggedIn = $state(false);
+
+export function initAuth() {
+	if (typeof localStorage !== 'undefined') {
+		loggedIn = !!localStorage.getItem('token');
+	}
+}
+
+export function setLoggedIn(value: boolean) {
+	loggedIn = value;
+}
+
+export function isLoggedIn() {
+	return loggedIn;
+}

src/frontend/src/lib/index.ts

@@ -0,0 +1 @@
+// place files you want to import through the `$lib` alias in this folder.

src/frontend/src/lib/signalr.ts

@@ -0,0 +1,37 @@
+import { HubConnectionBuilder, HubConnectionState, type HubConnection } from '@microsoft/signalr';
+import { getToken } from './api';
+
+let connection: HubConnection | null = null;
+let refCount = 0;
+
+function getConnection(): HubConnection {
+	if (connection && connection.state !== HubConnectionState.Disconnected) {
+		return connection;
+	}
+
+	connection = new HubConnectionBuilder()
+		.withUrl('/hubs/shopping-list', {
+			accessTokenFactory: () => getToken() ?? ''
+		})
+		.withAutomaticReconnect([0, 1000, 5000, 10000, 30000])
+		.build();
+
+	return connection;
+}
+
+export async function startConnection(): Promise<HubConnection> {
+	const conn = getConnection();
+	if (conn.state === HubConnectionState.Disconnected) {
+		await conn.start();
+	}
+	refCount++;
+	return conn;
+}
+
+export async function stopConnection() {
+	refCount--;
+	if (refCount <= 0 && connection && connection.state !== HubConnectionState.Disconnected) {
+		refCount = 0;
+		await connection.stop();
+	}
+}

src/frontend/src/routes/+layout.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+	import '../app.css';
+	import { page } from '$app/state';
+	import { clearToken } from '$lib/api';
+	import { initAuth, isLoggedIn } from '$lib/auth.svelte';
+	import { goto } from '$app/navigation';
+	import { onMount } from 'svelte';
+
+	let { children } = $props();
+
+	onMount(() => initAuth());
+
+	const loggedIn = $derived(isLoggedIn());
+	const currentPath = $derived(page.url.pathname);
+
+	const navItems = [
+		{ href: '/lists', label: 'Lists', icon: '📋' },
+		{ href: '/recipes', label: 'Recipes', icon: '📖' },
+		{ href: '/stores', label: 'Stores', icon: '🏪' }
+	];
+
+	function logout() {
+		clearToken();
+		goto('/login');
+	}
+</script>
+
+{#if loggedIn && currentPath !== '/login'}
+	<div class="flex min-h-dvh flex-col pb-16">
+		<header class="sticky top-0 z-40 border-b border-gray-200 bg-white px-4 py-3">
+			<div class="mx-auto flex max-w-lg items-center justify-between">
+				<h1 class="text-xl font-bold text-primary">YesChef</h1>
+				<button onclick={logout} class="text-sm text-gray-500">Sign out</button>
+			</div>
+		</header>
+
+		<main class="mx-auto w-full max-w-lg flex-1 px-4 py-4">
+			{@render children()}
+		</main>
+
+		<nav class="fixed bottom-0 left-0 right-0 z-50 border-t border-gray-200 bg-white safe-bottom">
+			<div class="mx-auto flex max-w-lg justify-around">
+				{#each navItems as item}
+					<a
+						href={item.href}
+						class="flex flex-1 flex-col items-center py-2 text-xs transition-colors {currentPath.startsWith(
+							item.href
+						)
+							? 'text-primary font-semibold'
+							: 'text-gray-500'}"
+					>
+						<span class="text-xl">{item.icon}</span>
+						<span class="mt-0.5">{item.label}</span>
+					</a>
+				{/each}
+			</div>
+		</nav>
+	</div>
+{:else}
+	{@render children()}
+{/if}
+
+<style>
+	.safe-bottom {
+		padding-bottom: env(safe-area-inset-bottom);
+	}
+</style>

src/frontend/src/routes/+page.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { getToken } from '$lib/api';
+	import { onMount } from 'svelte';
+
+	onMount(() => {
+		if (getToken()) {
+			goto('/lists');
+		} else {
+			goto('/login');
+		}
+	});
+</script>

src/frontend/src/routes/lists/+page.svelte

@@ -0,0 +1,151 @@
+<script lang="ts">
+	import { onMount, onDestroy } from 'svelte';
+	import { api } from '$lib/api';
+	import { startConnection, stopConnection } from '$lib/signalr';
+	import type { HubConnection } from '@microsoft/signalr';
+
+	interface ListSummary {
+		id: number;
+		name: string;
+		store: { id: number; name: string };
+		itemCount: number;
+		checkedCount: number;
+		updatedAt: string;
+	}
+
+	interface Store {
+		id: number;
+		name: string;
+	}
+
+	let lists = $state<ListSummary[]>([]);
+	let stores = $state<Store[]>([]);
+	let showCreate = $state(false);
+	let newName = $state('');
+	let newStoreId = $state<number | null>(null);
+	let loading = $state(true);
+	let connection: HubConnection | null = null;
+
+	onMount(async () => {
+		[lists, stores] = await Promise.all([
+			api<ListSummary[]>('/api/lists'),
+			api<Store[]>('/api/stores')
+		]);
+		loading = false;
+
+		connection = await startConnection();
+		await connection.invoke('JoinListsOverview');
+
+		connection.on('ListCreated', (data: ListSummary) => {
+			if (!lists.find((l) => l.id === data.id)) {
+				lists = [data, ...lists];
+			}
+		});
+
+		connection.on('ListArchived', (data: { id: number }) => {
+			lists = lists.filter((l) => l.id !== data.id);
+		});
+
+		connection.on('ListSummaryUpdated', (data: ListSummary) => {
+			lists = lists.map((l) =>
+				l.id === data.id ? { ...l, itemCount: data.itemCount, checkedCount: data.checkedCount, updatedAt: data.updatedAt } : l
+			);
+		});
+	});
+
+	onDestroy(async () => {
+		if (connection) {
+			try { await connection.invoke('LeaveListsOverview'); } catch {}
+		}
+		await stopConnection();
+	});
+
+	async function createList() {
+		if (!newName.trim() || !newStoreId) return;
+		await api<{ id: number }>('/api/lists', {
+			method: 'POST',
+			body: JSON.stringify({ name: newName, storeId: newStoreId })
+		});
+		newName = '';
+		showCreate = false;
+	}
+</script>
+
+<div>
+	<div class="mb-4 flex items-center justify-between">
+		<h2 class="text-2xl font-bold">Shopping Lists</h2>
+		<button
+			onclick={() => (showCreate = !showCreate)}
+			class="rounded-full bg-primary px-4 py-2 text-sm font-semibold text-white"
+		>
+			{showCreate ? 'Cancel' : '+ New list'}
+		</button>
+	</div>
+
+	{#if showCreate}
+		<form onsubmit={e => { e.preventDefault(); createList(); }} class="mb-4 rounded-lg border border-gray-200 bg-white p-4 shadow-sm">
+			<input
+				type="text"
+				bind:value={newName}
+				placeholder="List name"
+				required
+				class="mb-3 w-full rounded-lg border border-gray-300 px-3 py-2 focus:border-primary focus:outline-none"
+			/>
+			<select
+				bind:value={newStoreId}
+				required
+				class="mb-3 w-full rounded-lg border border-gray-300 px-3 py-2 focus:border-primary focus:outline-none"
+			>
+				<option value={null} disabled>Select store</option>
+				{#each stores as store}
+					<option value={store.id}>{store.name}</option>
+				{/each}
+			</select>
+			<button
+				type="submit"
+				class="w-full rounded-lg bg-primary py-2 font-semibold text-white"
+			>
+				Create
+			</button>
+		</form>
+	{/if}
+
+	{#if loading}
+		<p class="py-8 text-center text-gray-400">Loading...</p>
+	{:else if lists.length === 0}
+		<div class="py-12 text-center">
+			<p class="text-lg text-gray-400">No shopping lists yet</p>
+			<p class="mt-1 text-sm text-gray-400">Create one to get started</p>
+		</div>
+	{:else}
+		<div class="space-y-3">
+			{#each lists as list (list.id)}
+				<a
+					href="/lists/{list.id}"
+					class="block rounded-lg border border-gray-200 bg-white p-4 shadow-sm transition-shadow active:shadow-md"
+				>
+					<div class="flex items-center justify-between">
+						<div>
+							<h3 class="font-semibold">{list.name}</h3>
+							<p class="mt-0.5 text-sm text-gray-500">{list.store.name}</p>
+						</div>
+						<div class="text-right">
+							<p class="text-sm font-medium">
+								{list.checkedCount}/{list.itemCount}
+							</p>
+							<p class="text-xs text-gray-400">items</p>
+						</div>
+					</div>
+					{#if list.itemCount > 0}
+						<div class="mt-2 h-1.5 overflow-hidden rounded-full bg-gray-100">
+							<div
+								class="h-full rounded-full bg-primary transition-all"
+								style="width: {(list.checkedCount / list.itemCount) * 100}%"
+							></div>
+						</div>
+					{/if}
+				</a>
+			{/each}
+		</div>
+	{/if}
+</div>

src/frontend/src/routes/lists/[id]/+page.svelte

@@ -0,0 +1,207 @@
+<script lang="ts">
+	import { onMount, onDestroy } from 'svelte';
+	import { page } from '$app/state';
+	import { goto } from '$app/navigation';
+	import { api } from '$lib/api';
+	import { startConnection, stopConnection } from '$lib/signalr';
+	import type { HubConnection } from '@microsoft/signalr';
+
+	interface ListItem {
+		id: number;
+		name: string;
+		isChecked: boolean;
+		checkedByUserName: string | null;
+		sortOrder: number;
+		recipeTitle: string | null;
+	}
+
+	interface ShoppingListDetail {
+		id: number;
+		name: string;
+		store: { id: number; name: string };
+		isArchived: boolean;
+		items: ListItem[];
+	}
+
+	let list = $state<ShoppingListDetail | null>(null);
+	let items = $state<ListItem[]>([]);
+	let newItemName = $state('');
+	let loading = $state(true);
+	let connection: HubConnection | null = null;
+
+	const listId = $derived(Number(page.params.id));
+	const uncheckedItems = $derived(items.filter((i) => !i.isChecked));
+	const checkedItems = $derived(items.filter((i) => i.isChecked));
+
+	onMount(async () => {
+		const data = await api<ShoppingListDetail>(`/api/lists/${listId}`);
+		list = data;
+		items = data.items;
+		loading = false;
+
+		connection = await startConnection();
+		await connection.invoke('JoinList', listId);
+
+		connection.on('ItemAdded', (data: { id: number; name: string; sortOrder: number; recipeTitle?: string }) => {
+			if (!items.find((i) => i.id === data.id)) {
+				items = [
+					...items,
+					{
+						id: data.id,
+						name: data.name,
+						isChecked: false,
+						checkedByUserName: null,
+						sortOrder: data.sortOrder,
+						recipeTitle: data.recipeTitle ?? null
+					}
+				];
+			}
+		});
+
+		connection.on('ItemChecked', (data: { id: number; isChecked: boolean; checkedByUserName: string | null }) => {
+			items = items.map((i) =>
+				i.id === data.id
+					? { ...i, isChecked: data.isChecked, checkedByUserName: data.checkedByUserName }
+					: i
+			);
+		});
+
+		connection.on('ItemRemoved', (data: { id: number }) => {
+			items = items.filter((i) => i.id !== data.id);
+		});
+
+		connection.on('ListUpdated', (data: { id: number; name: string; storeId: number }) => {
+			if (list) list = { ...list, name: data.name };
+		});
+	});
+
+	onDestroy(async () => {
+		if (connection) {
+			try {
+				await connection.invoke('LeaveList', listId);
+			} catch {}
+		}
+		await stopConnection();
+	});
+
+	async function addItem() {
+		if (!newItemName.trim()) return;
+		const maxSort = items.length > 0 ? Math.max(...items.map((i) => i.sortOrder)) : 0;
+		await api('/api/lists/' + listId + '/items', {
+			method: 'POST',
+			body: JSON.stringify({ name: newItemName, sortOrder: maxSort + 1 })
+		});
+		newItemName = '';
+	}
+
+	async function toggleItem(itemId: number) {
+		await api(`/api/lists/${listId}/items/${itemId}/check`, { method: 'PATCH' });
+	}
+
+	async function removeItem(itemId: number) {
+		await api(`/api/lists/${listId}/items/${itemId}`, { method: 'DELETE' });
+	}
+
+	async function archiveList() {
+		await api(`/api/lists/${listId}`, { method: 'DELETE' });
+		goto('/lists');
+	}
+</script>
+
+{#if loading}
+	<p class="py-8 text-center text-gray-400">Loading...</p>
+{:else if list}
+	<div>
+		<div class="mb-4 flex items-center justify-between">
+			<div>
+				<button onclick={() => goto('/lists')} class="text-sm text-gray-500">&larr; Back</button>
+				<h2 class="text-2xl font-bold">{list.name}</h2>
+				<p class="text-sm text-gray-500">{list.store.name}</p>
+			</div>
+			<button
+				onclick={archiveList}
+				class="rounded-lg border border-gray-300 px-3 py-1.5 text-sm text-gray-500"
+			>
+				Archive
+			</button>
+		</div>
+
+		<form onsubmit={e => { e.preventDefault(); addItem(); }} class="mb-4 flex gap-2">
+			<input
+				type="text"
+				bind:value={newItemName}
+				placeholder="Add an item..."
+				class="flex-1 rounded-lg border border-gray-300 px-3 py-2.5 text-base focus:border-primary focus:outline-none"
+			/>
+			<button
+				type="submit"
+				class="rounded-lg bg-primary px-4 py-2.5 font-semibold text-white"
+			>
+				Add
+			</button>
+		</form>
+
+		{#if uncheckedItems.length > 0}
+			<ul class="space-y-1">
+				{#each uncheckedItems as item (item.id)}
+					<li class="flex items-center gap-3 rounded-lg bg-white px-3 py-3 shadow-sm">
+						<button
+							onclick={() => toggleItem(item.id)}
+							class="flex h-6 w-6 shrink-0 items-center justify-center rounded-full border-2 border-gray-300"
+							aria-label="Check {item.name}"
+						></button>
+						<div class="min-w-0 flex-1">
+							<span class="text-base">{item.name}</span>
+							{#if item.recipeTitle}
+								<span class="ml-1 text-xs text-gray-400">from {item.recipeTitle}</span>
+							{/if}
+						</div>
+						<button
+							onclick={() => removeItem(item.id)}
+							class="shrink-0 p-1 text-gray-300 active:text-danger"
+							aria-label="Remove {item.name}"
+						>
+							✕
+						</button>
+					</li>
+				{/each}
+			</ul>
+		{:else if checkedItems.length === 0}
+			<p class="py-8 text-center text-gray-400">No items yet — add some above</p>
+		{/if}
+
+		{#if checkedItems.length > 0}
+			<div class="mt-6">
+				<h3 class="mb-2 text-sm font-medium text-gray-400">
+					Checked ({checkedItems.length})
+				</h3>
+				<ul class="space-y-1">
+					{#each checkedItems as item (item.id)}
+						<li class="flex items-center gap-3 rounded-lg bg-white/60 px-3 py-3 shadow-sm">
+							<button
+								onclick={() => toggleItem(item.id)}
+								class="flex h-6 w-6 shrink-0 items-center justify-center rounded-full border-2 border-primary bg-primary text-white"
+								aria-label="Uncheck {item.name}"
+							>
+								✓
+							</button>
+							<div class="min-w-0 flex-1">
+								<span class="text-base text-gray-400 line-through">{item.name}</span>
+								{#if item.checkedByUserName}
+									<span class="ml-1 text-xs text-gray-300">{item.checkedByUserName}</span>
+								{/if}
+							</div>
+							<button
+								onclick={() => removeItem(item.id)}
+								class="shrink-0 p-1 text-gray-300 active:text-danger"
+								aria-label="Remove {item.name}"
+							>
+								✕
+							</button>
+						</li>
+					{/each}
+				</ul>
+			</div>
+		{/if}
+	</div>
+{/if}

src/frontend/src/routes/login/+page.svelte

@@ -0,0 +1,104 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { api, setToken } from '$lib/api';
+
+	let mode = $state<'login' | 'register'>('login');
+	let name = $state('');
+	let password = $state('');
+	let familyCode = $state('');
+	let error = $state('');
+	let loading = $state(false);
+
+	async function handleSubmit() {
+		error = '';
+		loading = true;
+		try {
+			const endpoint = mode === 'login' ? '/api/auth/login' : '/api/auth/register';
+			const body =
+				mode === 'login'
+					? { name, password }
+					: { name, password, familyCode };
+
+			const res = await api<{ token: string }>(endpoint, {
+				method: 'POST',
+				body: JSON.stringify(body)
+			});
+
+			setToken(res.token);
+			goto('/lists');
+		} catch (e: any) {
+			error = e.message || 'Something went wrong';
+		} finally {
+			loading = false;
+		}
+	}
+</script>
+
+<div class="flex min-h-dvh items-center justify-center bg-gray-50 px-4">
+	<div class="w-full max-w-sm">
+		<div class="mb-8 text-center">
+			<h1 class="text-4xl font-bold text-primary">YesChef</h1>
+			<p class="mt-2 text-gray-500">Family shopping & recipes</p>
+		</div>
+
+		<form onsubmit={e => { e.preventDefault(); handleSubmit(); }} class="space-y-4">
+			<div>
+				<input
+					type="text"
+					bind:value={name}
+					placeholder="Name"
+					required
+					class="w-full rounded-lg border border-gray-300 px-4 py-3 text-lg focus:border-primary focus:ring-2 focus:ring-primary/20 focus:outline-none"
+				/>
+			</div>
+
+			<div>
+				<input
+					type="password"
+					bind:value={password}
+					placeholder="Password"
+					required
+					class="w-full rounded-lg border border-gray-300 px-4 py-3 text-lg focus:border-primary focus:ring-2 focus:ring-primary/20 focus:outline-none"
+				/>
+			</div>
+
+			{#if mode === 'register'}
+				<div>
+					<input
+						type="text"
+						bind:value={familyCode}
+						placeholder="Family code"
+						required
+						class="w-full rounded-lg border border-gray-300 px-4 py-3 text-lg focus:border-primary focus:ring-2 focus:ring-primary/20 focus:outline-none"
+					/>
+				</div>
+			{/if}
+
+			{#if error}
+				<p class="text-sm text-danger">{error}</p>
+			{/if}
+
+			<button
+				type="submit"
+				disabled={loading}
+				class="w-full rounded-lg bg-primary py-3 text-lg font-semibold text-white transition-colors hover:bg-primary-dark disabled:opacity-50"
+			>
+				{loading ? '...' : mode === 'login' ? 'Sign in' : 'Create account'}
+			</button>
+		</form>
+
+		<p class="mt-6 text-center text-sm text-gray-500">
+			{#if mode === 'login'}
+				New here?
+				<button onclick={() => (mode = 'register')} class="font-medium text-primary">
+					Create account
+				</button>
+			{:else}
+				Already have an account?
+				<button onclick={() => (mode = 'login')} class="font-medium text-primary">
+					Sign in
+				</button>
+			{/if}
+		</p>
+	</div>
+</div>

src/frontend/src/routes/recipes/+page.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { api } from '$lib/api';
+
+	interface RecipeSummary {
+		id: number;
+		title: string;
+		description: string | null;
+		servings: number | null;
+		ingredientCount: number;
+		updatedAt: string;
+	}
+
+	let recipes = $state<RecipeSummary[]>([]);
+	let search = $state('');
+	let loading = $state(true);
+
+	const filtered = $derived(
+		search.trim()
+			? recipes.filter((r) => r.title.toLowerCase().includes(search.toLowerCase()))
+			: recipes
+	);
+
+	onMount(async () => {
+		recipes = await api<RecipeSummary[]>('/api/recipes');
+		loading = false;
+	});
+</script>
+
+<div>
+	<div class="mb-4 flex items-center justify-between">
+		<h2 class="text-2xl font-bold">Recipes</h2>
+		<a href="/recipes/new" class="rounded-full bg-primary px-4 py-2 text-sm font-semibold text-white">
+			+ New recipe
+		</a>
+	</div>
+
+	<input
+		type="search"
+		bind:value={search}
+		placeholder="Search recipes..."
+		class="mb-4 w-full rounded-lg border border-gray-300 px-3 py-2.5 focus:border-primary focus:outline-none"
+	/>
+
+	{#if loading}
+		<p class="py-8 text-center text-gray-400">Loading...</p>
+	{:else if filtered.length === 0}
+		<p class="py-12 text-center text-gray-400">
+			{search ? 'No recipes match your search' : 'No recipes yet — add one above'}
+		</p>
+	{:else}
+		<div class="space-y-3">
+			{#each filtered as recipe (recipe.id)}
+				<a
+					href="/recipes/{recipe.id}"
+					class="block rounded-lg border border-gray-200 bg-white p-4 shadow-sm active:shadow-md"
+				>
+					<h3 class="font-semibold">{recipe.title}</h3>
+					{#if recipe.description}
+						<p class="mt-0.5 line-clamp-2 text-sm text-gray-500">{recipe.description}</p>
+					{/if}
+					<div class="mt-2 flex gap-3 text-xs text-gray-400">
+						<span>{recipe.ingredientCount} ingredients</span>
+						{#if recipe.servings}
+							<span>Serves {recipe.servings}</span>
+						{/if}
+					</div>
+				</a>
+			{/each}
+		</div>
+	{/if}
+</div>

src/frontend/src/routes/recipes/[id]/+page.svelte

@@ -0,0 +1,148 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { page } from '$app/state';
+	import { goto } from '$app/navigation';
+	import { api } from '$lib/api';
+
+	interface Ingredient {
+		id: number;
+		name: string;
+		quantity: string | null;
+		sortOrder: number;
+	}
+
+	interface Recipe {
+		id: number;
+		title: string;
+		description: string | null;
+		instructions: string | null;
+		servings: number | null;
+		sourceUrl: string | null;
+		createdBy: string;
+		ingredients: Ingredient[];
+	}
+
+	interface ListSummary {
+		id: number;
+		name: string;
+		store: { id: number; name: string };
+	}
+
+	let recipe = $state<Recipe | null>(null);
+	let lists = $state<ListSummary[]>([]);
+	let loading = $state(true);
+	let showAddToList = $state(false);
+	let addingToList = $state<number | null>(null);
+
+	const recipeId = $derived(Number(page.params.id));
+
+	onMount(async () => {
+		[recipe, lists] = await Promise.all([
+			api<Recipe>(`/api/recipes/${recipeId}`),
+			api<ListSummary[]>('/api/lists')
+		]);
+		loading = false;
+	});
+
+	async function addToList(listId: number) {
+		addingToList = listId;
+		try {
+			await api(`/api/lists/${listId}/add-recipe/${recipeId}`, { method: 'POST' });
+			showAddToList = false;
+			goto(`/lists/${listId}`);
+		} finally {
+			addingToList = null;
+		}
+	}
+
+	async function deleteRecipe() {
+		if (!confirm('Delete this recipe?')) return;
+		await api(`/api/recipes/${recipeId}`, { method: 'DELETE' });
+		goto('/recipes');
+	}
+</script>
+
+{#if loading}
+	<p class="py-8 text-center text-gray-400">Loading...</p>
+{:else if recipe}
+	<div>
+		<button onclick={() => goto('/recipes')} class="mb-2 text-sm text-gray-500">&larr; Back</button>
+
+		<div class="mb-4 flex items-start justify-between">
+			<div>
+				<h2 class="text-2xl font-bold">{recipe.title}</h2>
+				{#if recipe.description}
+					<p class="mt-1 text-gray-500">{recipe.description}</p>
+				{/if}
+				<div class="mt-2 flex gap-3 text-sm text-gray-400">
+					{#if recipe.servings}
+						<span>Serves {recipe.servings}</span>
+					{/if}
+					<span>By {recipe.createdBy}</span>
+				</div>
+			</div>
+		</div>
+
+		<div class="mb-4 flex gap-2">
+			<button
+				onclick={() => (showAddToList = !showAddToList)}
+				class="flex-1 rounded-lg bg-primary py-2.5 font-semibold text-white"
+			>
+				Add to list
+			</button>
+			<button
+				onclick={deleteRecipe}
+				class="rounded-lg border border-danger px-4 py-2.5 text-sm text-danger"
+			>
+				Delete
+			</button>
+		</div>
+
+		{#if showAddToList}
+			<div class="mb-4 rounded-lg border border-gray-200 bg-white p-3 shadow-sm">
+				<p class="mb-2 text-sm font-medium text-gray-600">Choose a list:</p>
+				{#if lists.length === 0}
+					<p class="text-sm text-gray-400">No active lists. Create one first.</p>
+				{:else}
+					<div class="space-y-1">
+						{#each lists as list}
+							<button
+								onclick={() => addToList(list.id)}
+								disabled={addingToList === list.id}
+								class="w-full rounded-lg px-3 py-2 text-left transition-colors hover:bg-gray-50 active:bg-gray-100"
+							>
+								<span class="font-medium">{list.name}</span>
+								<span class="ml-1 text-sm text-gray-400">{list.store.name}</span>
+							</button>
+						{/each}
+					</div>
+				{/if}
+			</div>
+		{/if}
+
+		{#if recipe.ingredients.length > 0}
+			<div class="mb-6">
+				<h3 class="mb-2 text-lg font-semibold">Ingredients</h3>
+				<ul class="space-y-1.5">
+					{#each recipe.ingredients as ingredient}
+						<li class="flex gap-2 rounded-lg bg-white px-3 py-2 shadow-sm">
+							{#if ingredient.quantity}
+								<span class="font-medium text-primary">{ingredient.quantity}</span>
+							{/if}
+							<span>{ingredient.name}</span>
+						</li>
+					{/each}
+				</ul>
+			</div>
+		{/if}
+
+		{#if recipe.instructions}
+			<div>
+				<h3 class="mb-2 text-lg font-semibold">Instructions</h3>
+				<div class="whitespace-pre-wrap rounded-lg bg-white p-4 text-gray-700 shadow-sm">
+					{recipe.instructions}
+				</div>
+			</div>
+		{/if}
+	</div>
+{/if}

src/frontend/src/routes/recipes/new/+page.svelte

@@ -0,0 +1,128 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { api } from '$lib/api';
+
+	let title = $state('');
+	let description = $state('');
+	let instructions = $state('');
+	let servings = $state<number | undefined>();
+	let ingredients = $state<{ name: string; quantity: string }[]>([{ name: '', quantity: '' }]);
+	let saving = $state(false);
+
+	function addIngredient() {
+		ingredients = [...ingredients, { name: '', quantity: '' }];
+	}
+
+	function removeIngredient(idx: number) {
+		ingredients = ingredients.filter((_, i) => i !== idx);
+	}
+
+	async function save() {
+		if (!title.trim()) return;
+		saving = true;
+		try {
+			const res = await api<{ id: number }>('/api/recipes', {
+				method: 'POST',
+				body: JSON.stringify({
+					title,
+					description: description || null,
+					instructions: instructions || null,
+					servings: servings || null,
+					sourceUrl: null,
+					ingredients: ingredients
+						.filter((i) => i.name.trim())
+						.map((i, idx) => ({ name: i.name, quantity: i.quantity || null, sortOrder: idx }))
+				})
+			});
+			goto(`/recipes/${res.id}`);
+		} finally {
+			saving = false;
+		}
+	}
+</script>
+
+<div>
+	<button onclick={() => goto('/recipes')} class="mb-2 text-sm text-gray-500">&larr; Back</button>
+	<h2 class="mb-4 text-2xl font-bold">New Recipe</h2>
+
+	<form onsubmit={e => { e.preventDefault(); save(); }} class="space-y-4">
+		<input
+			type="text"
+			bind:value={title}
+			placeholder="Recipe title"
+			required
+			class="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-lg focus:border-primary focus:outline-none"
+		/>
+
+		<textarea
+			bind:value={description}
+			placeholder="Short description (optional)"
+			rows={2}
+			class="w-full rounded-lg border border-gray-300 px-3 py-2.5 focus:border-primary focus:outline-none"
+		></textarea>
+
+		<div>
+			<label class="mb-1 block text-sm font-medium text-gray-600">
+				Servings
+				<input
+					type="number"
+					bind:value={servings}
+					min={1}
+					placeholder="e.g. 4"
+					class="mt-1 block w-24 rounded-lg border border-gray-300 px-3 py-2 focus:border-primary focus:outline-none"
+				/>
+			</label>
+		</div>
+
+		<div>
+			<span class="mb-2 block text-sm font-medium text-gray-600">Ingredients</span>
+			{#each ingredients as ingredient, idx}
+				<div class="mb-2 flex gap-2">
+					<input
+						type="text"
+						bind:value={ingredient.quantity}
+						placeholder="Qty"
+						class="w-20 rounded-lg border border-gray-300 px-2 py-2 text-sm focus:border-primary focus:outline-none"
+					/>
+					<input
+						type="text"
+						bind:value={ingredient.name}
+						placeholder="Ingredient name"
+						class="flex-1 rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-primary focus:outline-none"
+					/>
+					{#if ingredients.length > 1}
+						<button
+							type="button"
+							onclick={() => removeIngredient(idx)}
+							class="px-2 text-gray-300 active:text-danger"
+						>
+							✕
+						</button>
+					{/if}
+				</div>
+			{/each}
+			<button
+				type="button"
+				onclick={addIngredient}
+				class="mt-1 text-sm font-medium text-primary"
+			>
+				+ Add ingredient
+			</button>
+		</div>
+
+		<textarea
+			bind:value={instructions}
+			placeholder="Instructions (optional)"
+			rows={6}
+			class="w-full rounded-lg border border-gray-300 px-3 py-2.5 focus:border-primary focus:outline-none"
+		></textarea>
+
+		<button
+			type="submit"
+			disabled={saving}
+			class="w-full rounded-lg bg-primary py-3 font-semibold text-white disabled:opacity-50"
+		>
+			{saving ? 'Saving...' : 'Save Recipe'}
+		</button>
+	</form>
+</div>

src/frontend/src/routes/stores/+page.svelte

@@ -0,0 +1,101 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { api } from '$lib/api';
+
+	interface Store {
+		id: number;
+		name: string;
+		sortOrder: number;
+	}
+
+	let stores = $state<Store[]>([]);
+	let newName = $state('');
+	let editingId = $state<number | null>(null);
+	let editName = $state('');
+	let loading = $state(true);
+
+	onMount(async () => {
+		stores = await api<Store[]>('/api/stores');
+		loading = false;
+	});
+
+	async function addStore() {
+		if (!newName.trim()) return;
+		await api('/api/stores', {
+			method: 'POST',
+			body: JSON.stringify({ name: newName, sortOrder: stores.length })
+		});
+		newName = '';
+		stores = await api<Store[]>('/api/stores');
+	}
+
+	function startEdit(store: Store) {
+		editingId = store.id;
+		editName = store.name;
+	}
+
+	async function saveEdit() {
+		if (!editName.trim() || !editingId) return;
+		const store = stores.find((s) => s.id === editingId)!;
+		await api(`/api/stores/${editingId}`, {
+			method: 'PUT',
+			body: JSON.stringify({ name: editName, sortOrder: store.sortOrder })
+		});
+		editingId = null;
+		stores = await api<Store[]>('/api/stores');
+	}
+
+	async function deleteStore(id: number) {
+		try {
+			await api(`/api/stores/${id}`, { method: 'DELETE' });
+			stores = stores.filter((s) => s.id !== id);
+		} catch (e: any) {
+			alert(e.message);
+		}
+	}
+</script>
+
+<div>
+	<h2 class="mb-4 text-2xl font-bold">Stores</h2>
+
+	<form onsubmit={e => { e.preventDefault(); addStore(); }} class="mb-6 flex gap-2">
+		<input
+			type="text"
+			bind:value={newName}
+			placeholder="New store name"
+			required
+			class="flex-1 rounded-lg border border-gray-300 px-3 py-2.5 focus:border-primary focus:outline-none"
+		/>
+		<button type="submit" class="rounded-lg bg-primary px-4 py-2.5 font-semibold text-white">
+			Add
+		</button>
+	</form>
+
+	{#if loading}
+		<p class="py-8 text-center text-gray-400">Loading...</p>
+	{:else if stores.length === 0}
+		<p class="py-12 text-center text-gray-400">No stores yet — add one above</p>
+	{:else}
+		<ul class="space-y-2">
+			{#each stores as store (store.id)}
+				<li class="flex items-center gap-3 rounded-lg bg-white px-4 py-3 shadow-sm">
+					{#if editingId === store.id}
+						<form onsubmit={e => { e.preventDefault(); saveEdit(); }} class="flex flex-1 gap-2">
+							<input
+								type="text"
+								bind:value={editName}
+								class="flex-1 rounded border border-gray-300 px-2 py-1 focus:border-primary focus:outline-none"
+							/>
+							<button type="submit" class="text-sm font-medium text-primary">Save</button>
+							<button type="button" onclick={() => (editingId = null)} class="text-sm text-gray-400">Cancel</button>
+						</form>
+					{:else}
+						<span class="flex-1 font-medium">{store.name}</span>
+						<button onclick={() => startEdit(store)} class="text-sm text-gray-400">Edit</button>
+						<button onclick={() => deleteStore(store.id)} class="text-sm text-danger">Delete</button>
+					{/if}
+				</li>
+			{/each}
+		</ul>
+	{/if}
+</div>

src/frontend/src/service-worker.ts

@@ -0,0 +1,45 @@
+/// <reference types="@sveltejs/kit" />
+/// <reference no-default-lib="true"/>
+/// <reference lib="esnext" />
+/// <reference lib="webworker" />
+
+import { build, files, version } from '$service-worker';
+
+const sw = self as unknown as ServiceWorkerGlobalScope;
+const CACHE = `cache-${version}`;
+const ASSETS = [...build, ...files];
+
+sw.addEventListener('install', (event) => {
+	event.waitUntil(
+		caches
+			.open(CACHE)
+			.then((cache) => cache.addAll(ASSETS))
+			.then(() => sw.skipWaiting())
+	);
+});
+
+sw.addEventListener('activate', (event) => {
+	event.waitUntil(
+		caches.keys().then(async (keys) => {
+			for (const key of keys) {
+				if (key !== CACHE) await caches.delete(key);
+			}
+			await sw.clients.claim();
+		})
+	);
+});
+
+sw.addEventListener('fetch', (event) => {
+	if (event.request.method !== 'GET') return;
+
+	const url = new URL(event.request.url);
+
+	// Don't cache API or SignalR requests
+	if (url.pathname.startsWith('/api/') || url.pathname.startsWith('/hubs/')) return;
+
+	event.respondWith(
+		caches.match(event.request).then((cached) => {
+			return cached || fetch(event.request);
+		})
+	);
+});

src/frontend/static/favicon.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <rect width="64" height="64" rx="12" fill="#16a34a"/>
+  <text x="32" y="44" font-size="36" text-anchor="middle" fill="white" font-family="sans-serif" font-weight="bold">Y</text>
+</svg>

src/frontend/static/manifest.webmanifest

@@ -0,0 +1,12 @@
+{
+	"name": "YesChef",
+	"short_name": "YesChef",
+	"start_url": "/lists",
+	"display": "standalone",
+	"background_color": "#ffffff",
+	"theme_color": "#16a34a",
+	"icons": [
+		{ "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
+		{ "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png" }
+	]
+}

src/frontend/static/robots.txt

@@ -0,0 +1,3 @@
+# allow crawling everything by default
+User-agent: *
+Disallow:

src/frontend/svelte.config.js

@@ -0,0 +1,16 @@
+import adapter from '@sveltejs/adapter-node';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	compilerOptions: {
+		runes: ({ filename }) => (filename.split(/[/\\]/).includes('node_modules') ? undefined : true)
+	},
+	kit: {
+		adapter: adapter({ out: 'build' }),
+		alias: {
+			$lib: 'src/lib'
+		}
+	}
+};
+
+export default config;

src/frontend/tsconfig.json

@@ -0,0 +1,20 @@
+{
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"rewriteRelativeImportExtensions": true,
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true,
+		"moduleResolution": "bundler"
+	}
+	// Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
+	// except $lib which is handled by https://svelte.dev/docs/kit/configuration#files
+	//
+	// To make changes to top-level options such as include and exclude, we recommend extending
+	// the generated config; see https://svelte.dev/docs/kit/configuration#typescript
+}

src/frontend/vite.config.ts

@@ -0,0 +1,16 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+import tailwindcss from '@tailwindcss/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+	plugins: [tailwindcss(), sveltekit()],
+	server: {
+		proxy: {
+			'/api': 'http://localhost:5291',
+			'/hubs': {
+				target: 'http://localhost:5291',
+				ws: true
+			}
+		}
+	}
+});

test-e2e-multiuser.mjs

@@ -0,0 +1,147 @@
+import { chromium } from 'playwright';
+
+const browser = await chromium.launch({ channel: 'chrome', headless: false, slowMo: 200 });
+
+const contextA = await browser.newContext({ viewport: { width: 390, height: 844 } });
+const contextB = await browser.newContext({ viewport: { width: 390, height: 844 } });
+const pageA = await contextA.newPage();
+const pageB = await contextB.newPage();
+
+const BASE = 'http://localhost:5173';
+
+console.log('⏳ Arrange the two browser windows side by side. Starting in 8 seconds...');
+await new Promise(r => setTimeout(r, 8000));
+
+async function step(name, fn) {
+	process.stdout.write(`▶ ${name}... `);
+	try {
+		await fn();
+		console.log('✅');
+	} catch (e) {
+		console.log(`❌ ${e.message}`);
+		throw e;
+	}
+}
+
+async function register(page, name) {
+	await page.goto(BASE);
+	await page.waitForURL('**/login', { timeout: 5000 });
+	await page.click('text=Create account');
+	await page.fill('input[placeholder="Name"]', name);
+	await page.fill('input[placeholder="Password"]', 'password123');
+	await page.fill('input[placeholder="Family code"]', 'dev-family-code');
+	await page.click('button[type="submit"]');
+	await page.waitForURL('**/lists', { timeout: 5000 });
+}
+
+try {
+	await step('Register User A (Mom)', async () => {
+		await register(pageA, 'Mom');
+	});
+
+	await step('Register User B (Dad)', async () => {
+		await register(pageB, 'Dad');
+	});
+
+	// Mom creates a store
+	await step('Mom creates store "Kroger"', async () => {
+		await pageA.click('a:has-text("Stores")');
+		await pageA.waitForURL('**/stores');
+		await pageA.fill('input[placeholder="New store name"]', 'Kroger');
+		await pageA.click('button:has-text("Add")');
+		await pageA.waitForSelector('text=Kroger');
+	});
+
+	// Both on lists overview — Mom creates a list, Dad should see it appear via SignalR
+	await step('Mom navigates to Lists', async () => {
+		await pageA.click('a:has-text("Lists")');
+		await pageA.waitForURL('**/lists');
+	});
+
+	await step('Mom creates list → Dad sees it appear on overview', async () => {
+		await pageA.click('text=+ New list');
+		await pageA.fill('input[placeholder="List name"]', 'Weekly Groceries');
+		await pageA.selectOption('select', { label: 'Kroger' });
+		await pageA.click('button:has-text("Create")');
+		await pageA.waitForSelector('text=Weekly Groceries');
+		// Dad should see it appear without navigating away
+		await pageB.waitForSelector('text=Weekly Groceries', { timeout: 5000 });
+	});
+
+	// Both open the list
+	await step('Mom opens the list', async () => {
+		await pageA.click('text=Weekly Groceries');
+		await pageA.waitForURL(/\/lists\/\d+/);
+	});
+
+	await step('Dad opens the same list', async () => {
+		await pageB.click('text=Weekly Groceries');
+		await pageB.waitForURL(/\/lists\/\d+/);
+	});
+
+	// Mom adds items — Dad should see them appear in real-time
+	await step('Mom adds "Milk" → Dad sees it appear', async () => {
+		await pageA.fill('input[placeholder="Add an item..."]', 'Milk');
+		await pageA.click('button:has-text("Add")');
+		await pageA.waitForSelector('text=Milk');
+		await pageB.waitForSelector('text=Milk', { timeout: 5000 });
+	});
+
+	await step('Mom adds "Eggs" → Dad sees it appear', async () => {
+		await pageA.fill('input[placeholder="Add an item..."]', 'Eggs');
+		await pageA.click('button:has-text("Add")');
+		await pageA.waitForSelector('text=Eggs');
+		await pageB.waitForSelector('text=Eggs', { timeout: 5000 });
+	});
+
+	await step('Mom adds "Bread" → Dad sees it appear', async () => {
+		await pageA.fill('input[placeholder="Add an item..."]', 'Bread');
+		await pageA.click('button:has-text("Add")');
+		await pageA.waitForSelector('text=Bread');
+		await pageB.waitForSelector('text=Bread', { timeout: 5000 });
+	});
+
+	// Dad checks off Milk — Mom should see it checked
+	await step('Dad checks "Milk" → Mom sees it checked', async () => {
+		await pageB.click('button[aria-label="Check Milk"]');
+		await pageB.waitForSelector('text=Checked (1)');
+		await pageA.waitForSelector('text=Checked (1)', { timeout: 5000 });
+	});
+
+	// Mom checks off Eggs — Dad should see it
+	await step('Mom checks "Eggs" → Dad sees it checked', async () => {
+		await pageA.click('button[aria-label="Check Eggs"]');
+		await pageA.waitForSelector('text=Checked (2)');
+		await pageB.waitForSelector('text=Checked (2)', { timeout: 5000 });
+	});
+
+	// Dad unchecks Milk — Mom should see it unchecked
+	await step('Dad unchecks "Milk" → Mom sees it unchecked', async () => {
+		await pageB.click('button[aria-label="Uncheck Milk"]');
+		await pageB.waitForSelector('text=Checked (1)');
+		await pageA.waitForSelector('text=Checked (1)', { timeout: 5000 });
+	});
+
+	// Dad adds an item — Mom should see it
+	await step('Dad adds "Butter" → Mom sees it appear', async () => {
+		await pageB.fill('input[placeholder="Add an item..."]', 'Butter');
+		await pageB.click('button:has-text("Add")');
+		await pageB.waitForSelector('text=Butter');
+		await pageA.waitForSelector('text=Butter', { timeout: 5000 });
+	});
+
+	// Mom removes Bread — Dad should see it disappear
+	await step('Mom removes "Bread" → Dad sees it disappear', async () => {
+		await pageA.click('button[aria-label="Remove Bread"]');
+		await pageA.waitForFunction(() => !document.body.textContent.includes('Bread'), { timeout: 3000 });
+		await pageB.waitForFunction(() => !document.body.textContent.includes('Bread'), { timeout: 5000 });
+	});
+
+	console.log('\n🎉 All multi-user tests passed! Real-time sync works.');
+} catch (e) {
+	console.error(`\n💥 Test failed: ${e.message}`);
+	process.exitCode = 1;
+} finally {
+	await new Promise(r => setTimeout(r, 2000));
+	await browser.close();
+}

test-e2e.mjs

@@ -0,0 +1,147 @@
+import { chromium } from 'playwright';
+
+const browser = await chromium.launch({ channel: 'chrome', headless: false, slowMo: 300 });
+const context = await browser.newContext({ viewport: { width: 390, height: 844 } });
+const page = await context.newPage();
+
+const BASE = 'http://localhost:5173';
+let failed = false;
+
+async function step(name, fn) {
+	process.stdout.write(`▶ ${name}... `);
+	try {
+		await fn();
+		console.log('✅');
+	} catch (e) {
+		console.log(`❌ ${e.message}`);
+		failed = true;
+		throw e;
+	}
+}
+
+try {
+	await step('Navigate to app → should redirect to /login', async () => {
+		await page.goto(BASE);
+		await page.waitForURL('**/login', { timeout: 5000 });
+	});
+
+	await step('Register a new account', async () => {
+		await page.click('text=Create account');
+		await page.fill('input[placeholder="Name"]', 'TestChef');
+		await page.fill('input[placeholder="Password"]', 'password123');
+		await page.fill('input[placeholder="Family code"]', 'dev-family-code');
+		await page.click('button[type="submit"]');
+		await page.waitForURL('**/lists', { timeout: 5000 });
+	});
+
+	await step('Create store "Kroger"', async () => {
+		await page.click('a:has-text("Stores")');
+		await page.waitForURL('**/stores');
+		await page.fill('input[placeholder="New store name"]', 'Kroger');
+		await page.click('button:has-text("Add")');
+		await page.waitForSelector('text=Kroger');
+	});
+
+	await step('Create store "Costco"', async () => {
+		await page.fill('input[placeholder="New store name"]', 'Costco');
+		await page.click('button:has-text("Add")');
+		await page.waitForSelector('text=Costco');
+	});
+
+	await step('Create shopping list "Weekly Groceries"', async () => {
+		await page.click('a:has-text("Lists")');
+		await page.waitForURL('**/lists');
+		await page.click('text=+ New list');
+		await page.fill('input[placeholder="List name"]', 'Weekly Groceries');
+		await page.selectOption('select', { label: 'Kroger' });
+		await page.click('button:has-text("Create")');
+		await page.waitForSelector('text=Weekly Groceries');
+	});
+
+	await step('Open list and add 5 items', async () => {
+		await page.click('text=Weekly Groceries');
+		await page.waitForURL(/\/lists\/\d+/);
+
+		for (const item of ['Milk', 'Eggs', 'Bread', 'Chicken breast', 'Broccoli']) {
+			await page.fill('input[placeholder="Add an item..."]', item);
+			await page.click('button:has-text("Add")');
+			await page.waitForSelector(`text=${item}`);
+		}
+	});
+
+	await step('Check off Milk and Eggs', async () => {
+		await page.click('button[aria-label="Check Milk"]');
+		await page.waitForSelector('text=Checked (1)');
+		await page.click('button[aria-label="Check Eggs"]');
+		await page.waitForSelector('text=Checked (2)');
+	});
+
+	await step('Uncheck Milk', async () => {
+		await page.click('button[aria-label="Uncheck Milk"]');
+		await page.waitForSelector('text=Checked (1)');
+	});
+
+	await step('Remove Broccoli', async () => {
+		await page.click('button[aria-label="Remove Broccoli"]');
+		await page.waitForFunction(() => !document.body.textContent.includes('Broccoli'), { timeout: 3000 });
+	});
+
+	await step('Create recipe "Chicken Stir Fry"', async () => {
+		await page.click('a:has-text("Recipes")');
+		await page.waitForURL('**/recipes');
+		await page.click('text=+ New recipe');
+		await page.waitForURL('**/recipes/new');
+		await page.fill('input[placeholder="Recipe title"]', 'Chicken Stir Fry');
+		await page.fill('textarea[placeholder*="description"]', 'Quick weeknight dinner');
+
+		const qtyInputs = page.locator('input[placeholder="Qty"]');
+		const nameInputs = page.locator('input[placeholder="Ingredient name"]');
+		await qtyInputs.nth(0).fill('2 lbs');
+		await nameInputs.nth(0).fill('chicken breast');
+
+		await page.click('text=+ Add ingredient');
+		await qtyInputs.nth(1).fill('1 head');
+		await nameInputs.nth(1).fill('broccoli');
+
+		await page.click('text=+ Add ingredient');
+		await qtyInputs.nth(2).fill('3 tbsp');
+		await nameInputs.nth(2).fill('soy sauce');
+
+		await page.fill('textarea[placeholder*="Instructions"]', '1. Cut chicken\n2. Stir fry\n3. Add sauce');
+		await page.click('button:has-text("Save Recipe")');
+		await page.waitForURL(/\/recipes\/\d+/);
+	});
+
+	await step('Add recipe ingredients to shopping list', async () => {
+		await page.click('button:has-text("Add to list")');
+		await page.waitForSelector('text=Choose a list');
+		await page.click('text=Weekly Groceries');
+		await page.waitForURL(/\/lists\/\d+/);
+		await page.waitForSelector('text=chicken breast');
+	});
+
+	await step('Verify list has recipe items', async () => {
+		const content = await page.textContent('body');
+		for (const item of ['2 lbs chicken breast', '1 head broccoli', '3 tbsp soy sauce']) {
+			if (!content.includes(item)) throw new Error(`Missing recipe item: ${item}`);
+		}
+	});
+
+	await step('Navigate back to lists overview', async () => {
+		await page.click('text=← Back');
+		await page.waitForURL('**/lists');
+	});
+
+	await step('Sign out', async () => {
+		await page.click('text=Sign out');
+		await page.waitForURL('**/login');
+	});
+
+	console.log('\n🎉 All tests passed!');
+} catch (e) {
+	console.error(`\n💥 Test suite stopped at failure: ${e.message}`);
+	process.exitCode = 1;
+} finally {
+	await new Promise(r => setTimeout(r, 2000));
+	await browser.close();
+}