Feature: Add an onboarding page and redirect users to that page if the user is not logged in. Have 3 sample latest question an...

[lazydev-issue-resolver]

Resolves #98

Generated autonomously by LazyDev.

Implementation Plan

IMPLEMENTATION PLAN

Goal: Add a public onboarding page at /onboarding that shows a greeting plus three latest sample Q&A entries, and redirect unauthenticated users away from protected app pages to that onboarding page.

1. Create app/onboarding/page.tsx (new file)

   • Add a default exported React component OnboardingPage.
   • Compute a time-based greeting using new Date().getHours():
     • 5–11: “Good morning”
     • 12–17: “Good afternoon”
     • otherwise: “Good evening”
   • Render a hero section with the greeting and a short welcome message.
   • Fetch or display three sample latest question/answer pairs:
     • Preferred: use server-side data from MongoDB via the existing connection helper in lib/mongodb.ts, matching the query/sort/status logic already used by the home page and app/api/ route handlers (e.g., approved questions sorted by createdAt descending, limited to 3).
     • Fallback: if no questions exist, render 3 hardcoded sample Q&A objects inside the page so the onboarding screen is never empty.
   • Use existing UI components/styling conventions from app/page.tsx, components/home/, and components/question-card.tsx where possible (Tailwind + shadcn Card/Button).
   • Add a “Log in” / “Get started” button linking to app/login/page.tsx.

2. Ensure components/auth-provider.tsx exposes the auth state needed for guards

   • Verify the context value exposes at least user (or isAuthenticated) and loading.
   • If loading is not currently exposed, add it so guards can wait for session restore before deciding where to redirect. This prevents an unwanted flash of the onboarding page for logged-in users.
   • Confirm the existing hook, e.g. useAuth(), is exported from this file and can be consumed by new guard components.

3. Create components/auth-guard.tsx (new reusable component)

   • Implement a client component AuthGuard with props { children, requireAuth = true }.
   • Use useAuth() and Next.js useRouter().
   • While auth loading is true, render null or a minimal loading state.
   • If requireAuth is true and there is no user, call router.replace('/onboarding') in a useEffect.
   • If requireAuth is false (for public pages like onboarding/login) and a user exists, call router.replace('/').
   • Otherwise render children.

4. Protect existing main app routes

   • Wrap the root home page content in app/page.tsx with <AuthGuard> (or wrap its returned JSX with a small client wrapper if the page is a server component).
   • Wrap app/admin/page.tsx with the same guard so admin routes are also protected.
   • Recommended scalable approach: create a route group such as app/(main)/layout.tsx that wraps all protected pages in AuthGuard, while leaving /onboarding and /login outside the group. URLs remain unchanged. If this route group is used, move app/page.tsx → app/(main)/page.tsx and app/admin/page.tsx → app/(main)/admin/page.tsx. This centralizes auth protection for all present and future app pages. If a minimal change is preferred, apply AuthGuard directly in the two pages listed above.

5. Make /onboarding public but redirect logged-in users away

   • Wrap the contents of app/onboarding/page.tsx in <AuthGuard requireAuth={false}> (via a small client wrapper if the page itself is a server component).
   • This ensures logged-in users who navigate directly to /onboarding are redirected back to the home page.

6. Wire “latest questions” data source

   • Inspect the existing API routes under app/api/ to see whether there is already a GET endpoint returning a question list.
   • If yes, reuse that shape in app/onboarding/page.tsx (server-side fetch) and map the first 3 results to Q&A cards.
   • If no list endpoint exists, add app/api/questions/latest/route.ts that:
     • Connects via lib/mongodb.ts.
     • Queries the questions collection for approved/published entries.
     • Sorts by newest createdAt.
     • Limits to 3.
     • Returns { questions: [...] }.
   • Create a small helper/component, e.g. components/onboarding/sample-questions.tsx, to render each Q&A consistently if reusing components/question-card.tsx does not naturally show the answer.

7. Styling and UX

   • Match existing Tailwind classes and shadcn components used in app/page.tsx and components/home/.
   • Include a clear welcome/greeting heading, a short subheading, and three Q&A cards.
   • Add a primary CTA button linking to /login and optionally a secondary “Browse questions” link that only works when authenticated.

8. Final wiring and validation

   • Confirm app/layout.tsx (or the nearest root layout) already mounts Components/auth-provider.tsx so AuthGuard can access auth state; if not, add the provider there.
   • Manual test flows:
     • Logged out: visiting / or /admin redirects to /onboarding.
     • Logged in: visiting /onboarding redirects to /.
     • /onboarding shows greeting and exactly 3 sample Q&A entries, with fallback content when the DB is empty.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
v0-aws-developer-questions	Error		Aug 25, 2026 7:14am