Frontend Infrastructure Cleanup — Fix Layout Bugs, Add Env Config, and Migrate Admin Hooks to TanStack Query

[portableDD]

Labels

Frontend

Description

ByteChain Academy's frontend has several accumulated infrastructure problems that collectively degrade the developer experience and user experience. There is a duplicate <Toaster> component rendering in layout.tsx causing double toast notifications, the frontend has no .env.example file leaving contributors confused about required environment variables, the admin data-fetching hooks use raw useState/useEffect instead of TanStack Query (which is specified in the project architecture), and all lesson video URLs in the codebase still point to a Rick Roll placeholder. This issue cleans all of this up and modernises the data-fetching layer.

Background & Context

• frontend/app/layout.tsx renders <Toaster> twice — once inside the provider tree and once after it — causing every notification to appear twice
• There is no frontend/.env.example file — NEXT_PUBLIC_API_URL is referenced in lib/api.ts but undocumented
• frontend/hooks/use-admin-lessons.ts uses raw useState + useEffect + manual setLoading/setError — the project spec requires TanStack Query
• frontend/hooks/use-lesson-quiz.ts has the same pattern
• The project architecture document specifies TanStack Query for all client-side data fetching
• @tanstack/react-query may not be installed — check package.json and install if missing

Requirements

• Remove the duplicate <Toaster> from frontend/app/layout.tsx — keep only one instance
• Create frontend/.env.example with NEXT_PUBLIC_API_URL=http://localhost:3001 and a comment explaining its purpose
• Install @tanstack/react-query and @tanstack/react-query-devtools if not already present
• Set up a QueryClientProvider in layout.tsx wrapping the app
• Rewrite use-admin-lessons.ts using useQuery for fetching and useMutation for create/update/delete operations
• Rewrite use-lesson-quiz.ts using useQuery for fetching quiz data and useMutation for create/update quiz operations
• Update frontend/app/admin/courses/[courseId]/lessons/page.tsx to use the new hook signatures if they change
• Replace all hardcoded Rick Roll video URLs (https://www.youtube.com/embed/dQw4w9WgXcQ) with an empty string or a proper placeholder constant

Suggested Execution

Branch: git checkout -b feat/frontend-infrastructure-cleanup

Files to touch:

• frontend/app/layout.tsx
• frontend/.env.example ← create this
• frontend/package.json
• frontend/hooks/use-admin-lessons.ts
• frontend/hooks/use-lesson-quiz.ts
• frontend/contexts/learning-context.tsx (video URL placeholder)
• frontend/app/admin/courses/[courseId]/lessons/page.tsx

Implement:

• Remove duplicate <Toaster> — keep only the one inside the provider tree
• Create .env.example with documented env vars
• npm install @tanstack/react-query @tanstack/react-query-devtools
• Add <QueryClientProvider client={queryClient}> in layout.tsx
• Rewrite useAdminLessons with useQuery({ queryKey: ['lessons', courseId], queryFn: ... })
• Add useMutation for delete lesson with onSuccess: () => queryClient.invalidateQueries(['lessons', courseId])
• Rewrite useLessonQuiz with useQuery and useMutation for create/update
• Define const PLACEHOLDER_VIDEO_URL = '' in a constants file and replace all Rick Roll references

Test & Validate:

• Trigger any action that fires a toast — verify it appears exactly once
• Check frontend/.env.example documents NEXT_PUBLIC_API_URL
• Admin lessons page loads correctly using the refactored TanStack Query hooks
• Creating, editing, or deleting a lesson correctly invalidates and refetches the lesson list
• No Rick Roll URLs remain anywhere in the codebase (grep -r "dQw4w9WgXcQ" frontend/ returns empty)

Acceptance Criteria

• Only one <Toaster> exists in layout.tsx
• frontend/.env.example exists with NEXT_PUBLIC_API_URL documented
• @tanstack/react-query is installed and QueryClientProvider wraps the app
• use-admin-lessons.ts uses useQuery and useMutation
• use-lesson-quiz.ts uses useQuery and useMutation
• Cache invalidation works correctly after mutations
• No Rick Roll placeholder URLs remain in the codebase

Example Commit Message

feat: fix duplicate toaster, add env.example, migrate admin hooks to TanStack Query, remove placeholder video URLs

Guidelines

• Assignment required before starting
• PR description must include Closes #[issue_id]
• Join our Telegram: https://t.me/ByteChainAcademy
• Complexity: High (200 pts)