feat: rewrite as TanStack Todo App (beginner-friendly)

[truongnat]

Summary

Refactor the entire client app from a complex chat application to a clean, beginner-friendly Todo App showcasing the TanStack ecosystem.

Changes

✅ Added / Updated

• Landing page (/) with TanStack feature highlights
• Clean login & register pages (removed OTP/forgot-password flow)
• Simplified Navigation component (removed socket status, token monitor)
• Simplified root layout (removed SocketProvider)

🗑️ Removed

• All chat-related components & routes (/chat, /room/:id)
• Socket.io provider & service
• Token monitor service
• Forgot password & verify OTP routes
• Profile page
• Chat store

📦 Tech Stack Showcased

• TanStack Router v1 — file-based, type-safe routing
• TanStack Query v5 — server state, caching, optimistic updates
• Zustand v5 — client auth state with persist
• React Hook Form + Zod — form validation
• Radix UI + Tailwind CSS v4 — UI components
• Vitest — unit testing

For Reviewers

This is a beginner learning project. The goal is clean, readable code that demonstrates each TanStack library's core patterns.

---

🔄 This PR completely transforms the application from a complex MERN stack chat app into a clean, beginner-friendly TanStack Todo App. It removes all chat/socket functionality, simplifies the UI components, and refocuses the codebase on demonstrating core TanStack ecosystem patterns for learning purposes.

🔍 Detailed Analysis

Key Changes

• Complete Feature Removal: Eliminated all chat-related components (ChatRoom, MessageList, MessageInput, etc.), socket.io integration, and real-time messaging functionality
• Route Simplification: Removed /chat, /room/:id, /profile, /forgot-password, and /verify-otp routes, keeping only essential auth and todo routes
• UI Modernization: Simplified Navigation component, updated landing page with TanStack branding, and streamlined login/register flows
• Architecture Cleanup: Removed SocketProvider, TokenMonitor, and complex state management for chat features

Technical Implementation

flowchart TD
    A[Complex Chat App] --> B[Remove Chat Components]
    B --> C[Remove Socket.io Provider]
    C --> D[Simplify Navigation]
    D --> E[Update Landing Page]
    E --> F[Clean Auth Pages]
    F --> G[TanStack Todo App]
    
    H[Old Features] --> I[Chat Rooms]
    H --> J[Real-time Messaging]
    H --> K[Socket Connection]
    H --> L[Token Monitoring]
    
    M[New Focus] --> N[TanStack Router]
    M --> O[TanStack Query]
    M --> P[Zustand Auth]
    M --> Q[Clean UI/UX]

Loading

Impact

• Learning Focus: Transforms codebase into an ideal learning resource for TanStack ecosystem with clear, focused examples
• Code Simplicity: Reduces complexity by removing 20+ chat-related files and thousands of lines of socket/real-time code
• Beginner Accessibility: Creates a more approachable project structure that demonstrates core patterns without overwhelming complexity
• Maintainability: Eliminates dependencies on socket.io, complex token monitoring, and chat state management for easier maintenance

Created with Palmier

---

Summary by cubic

Rewrote the client into a beginner-friendly TanStack Todo App, replacing the chat experience. Simplifies auth and layout, removes sockets and token monitor, and sets up @tanstack/react-query at the root.

• New Features

  • New landing page (/) highlighting TanStack.
  • Clean login and register pages (no OTP/forgot-password).
  • Simplified Navigation with user menu and logout.
  • Root wrapped with QueryClientProvider and ReactQueryDevtools.

• Refactors

  • Removed all chat/socket code, hooks, routes, and tests (e.g., /chat, /room/:id, chat components/services).
  • Removed TokenMonitor and related hooks; dropped Router Devtools.
  • Removed profile, forgot-password, and verify-otp routes.
  • Simplified root layout and auth flow; deleted unused providers and monitors.

^{Written for commit b5b3e0f. Summary will update on new commits.}

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
example-react	Error		Mar 17, 2026 6:32am

[cubic-dev-ai]

2 issues found across 31 files

Prompt for AI agents (unresolved issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="client/src/routes/login.tsx">

<violation number="1" location="client/src/routes/login.tsx:36">
P2: Use the incoming `redirect` search param after login instead of always hard-coding `/todo`.</violation>
</file>

<file name="client/src/components/Navigation.tsx">

<violation number="1" location="client/src/components/Navigation.tsx:15">
P1: Calling the store logout directly bypasses the actual logout flow, leaving the HTTP client tokens and query cache alive in this tab.</violation>
</file>

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.}

[cubic-dev-ai]

P1: Calling the store logout directly bypasses the actual logout flow, leaving the HTTP client tokens and query cache alive in this tab.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At client/src/components/Navigation.tsx, line 15:

<comment>Calling the store logout directly bypasses the actual logout flow, leaving the HTTP client tokens and query cache alive in this tab.</comment>

<file context>
@@ -1,186 +1,40 @@
 
   const handleLogout = () => {
-    logoutMutation.mutate()
+    logout()
+    navigate({ to: '/login' })
   }
</file context>

[cubic-dev-ai]

P2: Use the incoming redirect search param after login instead of always hard-coding /todo.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At client/src/routes/login.tsx, line 36:

<comment>Use the incoming `redirect` search param after login instead of always hard-coding `/todo`.</comment>

<file context>
@@ -1,131 +1,91 @@
+      setUser(response.user)
+      setAuthenticated(true)
+      toast.success('Welcome back!')
+      navigate({ to: '/todo' })
+    } catch (error: any) {
+      toast.error(error.message || 'Login failed')
</file context>