feat: complete frontend implementation — landing page, mock pages, theme system, and UI components - #13
Conversation
- Add ThemeProvider wrapping root layout with dark/light radial gradients - Add localStorage persistence for theme preference via Zustand store - Add ThemeController toggle to landing page header - Consolidate dark class toggling into ThemeProvider - Remove opaque bg-background from body and page wrappers to reveal gradient - Improve landing page spacing and move feature cards above the fold - Ensure all pages (landing, dashboard, auth) respect global theme
|
Tick the box to add this pull request to the merge queue (same as
|
There was a problem hiding this comment.
@SourabhX16
Solid foundation — the component structure is clean, mock data layer is well-typed, and the page patterns are consistent. A few things to address before merging:
params needs await in App Router
ModulePage destructures params synchronously ({ params }: { params: { trackId: string; moduleId: string } }), but in Next.js 15+ App Router, params is a Promise. This will break at runtime. Use const { trackId, moduleId } = await params or wrap with use().
Hardcoded className="dark" on conflicts with theme toggle
layout.tsx sets , but ThemeProvider toggles the dark class via useEffect. On light mode, users will see a dark flash before hydration flips the class. Remove the hardcoded class and let the provider handle it, or use a blocking <script> to set it before paint.
Monaco editor ignores theme setting
code-editor.tsx hardcodes theme="vs-dark" regardless of whether the user is in light or dark mode. Wire it to useUIStore’s darkMode.
Auth flow: asChild + onClick on the same Button
In signin/page.tsx and signup/page.tsx, wraps a . With asChild, the Button renders as the Link — the onClick may not fire reliably before navigation. Call signIn inside an onClickCapture or handle it in a route guard instead.
Minor
-
war-room-live.tsx calls getSocket().connect() but the socket isn’t used for any events — only a setInterval generates messages. Either remove the socket wiring or add a TODO.
-
ThemeProvider‘s inline gradient backgrounds (#010133, #ec4899) aren’t connected to the CSS variable system. If the theme palette changes, these won’t update.
Architecture and component decomposition look good overall. Nice work getting the full app shell navigable with mock data.
|
Hi — thank you for the thorough review and for merging the PR. I really appreciate the time you spent , your feedback was very helpful. I’ll start working on the items you listed. Plan: I’ll start on these immediately and push fixes to a follow-up PR .Thanks again for the review and for merging ,much appreciated. 😄 |
|
@SourabhX16 It's great to hear you have taken those things into consideration , I am assigning the issue to you , take your time . Thank you .
|
2 participants
Summary
Complete frontend implementation covering the landing page, all mock product pages, shared UI components, mock data layer, state management, and a global dark/light theme system.
43 files changed, 1,711 insertions, 130 deletions
What's Included
Landing Page (rebuilt from scratch)
Global Theme System
ThemeProviderwrapping root layout with dark/light radial gradient backgrounds#000000 → #010133#ffffff → #ec4899localStoragepersistence via Zustand storeThemeControllertoggle button on all pagesMock Product Pages (6 pages)
/app/dashboard/app/tracks/app/tracks/[trackId]/modules/[moduleId]/app/war-room/app/blindspot-map/app/profileShared UI Components (7)
Button,Badge,Card,Input,Progress,Textarea— all matching the shadcn/ui pattern with Tailwind CSS variablesFeature Components (10)
ModulePlayer,CodeEditor(Monaco),AnnotationEditor,QuizUI,CodeSubmission,DiffViewer,IRSRadarChart,Leaderboard,StreakTracker,WarRoomLiveMock Data Layer
State Management (Zustand)
auth-store.ts— mock auth stateeditor-store.ts— code editor phase/stateui-store.ts— dark mode with localStorage persistence + sidebarAuth Pages
/auth/signin— OAuth buttons + mock workspace entry/auth/signup— account creation with mock flowTesting
pnpm lint✅pnpm build✅Before
The app was a Next.js starter template. The landing page showed only the default Next.js boilerplate. No theme system, no product pages, no mock data — just an empty shell.
After
The entire frontend is built out:
Untitled.design.mp4