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 #72

Generated autonomously by LazyDev.

Implementation Plan

Core Technical Requirements

1. Add a new public /onboarding route with:
   • A Metadata title of "Onboarding"
   • Greeting/copy welcoming the user
   • The 3 most recent questions and their answers as sample content
2. Change the auth guard so unauthenticated users are redirected to /onboarding instead of /login or being allowed into protected routes.
3. Keep /onboarding public; authenticated users who visit it should be redirected to the home page (or dashboard).
4. Fetch the latest 3 Q&As correctly, sorted newest-first, and render loading/error/empty states.

---

Step-by-Step Implementation Plan

1. Locate the current auth guard and redirect logic

First, inspect the existing authentication flow. Likely files:

• components/auth-provider.tsx
• app/login/page.tsx
• Any middleware.ts at project root
• app/layout.tsx

Determine exactly how protected routes are currently handled:

• If it uses a React context provider (e.g., AuthProvider) that wraps pages and checks usePathname() + useRouter(), note its public route allowlist and current login redirect.
• If it uses Next.js middleware.ts, note the matcher and redirect target.

Action: Modify that logic so the public routes list includes /onboarding, and the unauthenticated redirect target becomes /onboarding.

---

2. Create the onboarding page

Create app/onboarding/page.tsx (or app/(public)/onboarding/page.tsx if route groups are used).

Add:

export const metadata: Metadata = {
  title: 'Onboarding'
};

Include:

• A greeting heading, e.g. "Welcome to [App Name]!"
• A short paragraph explaining the app
• A section titled "Latest questions"
• A container for the 3 sample Q&As
• CTA links to /login and / (only if meaningful for public users)
• If this is a client component, add a useEffect redirect for authenticated users:

useEffect(() => {
  if (user) router.replace('/');
}, [user]);

Or, if using a server-side session/cookie, perform the redirect server-side.

---

3. Add a data-fetching method for the latest 3 Q&As

You likely already have a database layer in lib/mongodb.ts and type definitions in lib/types.ts.

Create/reuse a function such as:

// lib/questions.ts or similar
export async function getLatestQuestions(limit = 3) {
  const db = await connectToDatabase();
  return db
    .collection('questions')
    .find({ /* maybe published/approved only */ })
    .sort({ createdAt: -1 })
    .limit(limit)
    .toArray();
}

If the app normally talks to the backend through API routes instead of direct DB calls, do one of the following:

• Add app/api/questions/latest/route.ts with a GET handler that returns the latest 3.
• Or extend the existing questions API route to accept ?limit=3&sort=latest.

Then the onboarding page can fetch from that endpoint.

---

4. Build the sample Q&A UI

Create a dedicated component, e.g.:

// components/onboarding/latest-questions.tsx

It should:

• Receive or fetch the latest 3 questions
• Display each question title, answer, exam type/category if available, and date
• Show a Skeleton loading state while fetching
• Show an error message if the fetch fails
• Handle the empty case with a friendly message

Use existing shadcn/ui components like Card, Badge, and Button to keep styling consistent with the rest of the app.

---

5. Integrate into the onboarding page

Import LatestQuestions into app/onboarding/page.tsx.

Place it after the greeting copy so the layout is:

1. Greeting/hero section
2. "Latest Questions" section with 3 sample Q&As
3. Login/Get started call-to-action if needed

---

6. Update the auth guard to redirect unauthenticated users to /onboarding

Example if the guard is in components/auth-provider.tsx:

• Add 'onboarding' to the public paths array if not already allowed.
• Change the protected-route redirect from /login to /onboarding.

// before
router.replace(`/login?next=${pathname}`);

// after
router.replace(`/onboarding?next=${pathname}`);

Example if using middleware.ts:

if (!session && !publicPaths.includes(pathname)) {
  return NextResponse.redirect(new URL('/onboarding', req.url));
}

Ensure /onboarding itself is never blocked by the guard.

---

7. Redirect authenticated users away from /onboarding

In app/onboarding/page.tsx, check auth state:

• Client-side: use useAuth() and useEffect to redirect to /.
• Server-side: read the session cookie and redirect in a server component or via middleware.

This prevents logged-in users from seeing the onboarding screen.

---

8. Add styling and responsive layout

Use Tailwind classes in the page/component:

• Center the hero content
• Use max-w-3xl mx-auto for the container
• Add spacing between sections
• Ensure mobile responsiveness

No global CSS changes should be needed if Tailwind is already configured.

---

9. Manual verification checklist

• Logged-out user visits / → redirected to /onboarding
• Logged-out user visits another protected route → redirected to /onboarding
• Logged-out user visits /onboarding → sees page with greeting and 3 latest Q&As
• Page title shows "Onboarding"
• Authenticated user visits /onboarding → redirected to /
• API/database returns exactly 3 items, newest first
• Loading and error states render correctly if the fetch is slow/fails

---

Affected Files Summary

File path	Change
app/onboarding/page.tsx	New page: metadata, greeting, sample Q&A container, auth redirect
components/onboarding/latest-questions.tsx	New component: renders top 3 Q&As with loading/error states
lib/questions.ts (or similar)	New function: getLatestQuestions(limit)
app/api/questions/latest/route.ts	New API route (or extend existing questions GET route)
components/auth-provider.tsx / middleware.ts	Update public paths + redirect unauthenticated users to /onboarding
app/login/page.tsx (if applicable)	Optional: keep as fallback link from onboarding page
lib/types.ts (if needed)	Add type for the onboarding sample question shape if not already present

This plan keeps the change minimal, follows the existing Next.js App Router structure, and directly resolves the missing onboarding screen, auth redirect, and sample content requirements.

[vercel]

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

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