Overview
Users can ask questions, post rich answers, vote, bookmark, explore profiles and tags, and browse jobs. The UX offers dark mode, filters, pagination, and subtle interactions. The architecture leverages modern Next.js rendering strategies and server actions where appropriate.
Key features
- Authentication: Email/Password, Google, GitHub (NextAuth).
- Example:
await signIn("google")
- Home & feed: questions with filters, search, pagination.
- Question details: rich MDX content and threaded answers.
- Voting:
upvote/downvote on questions and answers. - Bookmarking: save questions to personal collections.
- AI answers: assisted answer generation.
- Tags: tag listing with counts and tag detail pages.
- Profiles & badges: user page with badges, reputation, and history.
- Job finder: listings with filters and location‑aware search.
- Global search: cross‑entity search (questions, users, tags).
Integrations and data layer
- Database: MongoDB with Mongoose (users, questions, answers, votes, tags, collections).
- Example:
await mongoose.connect(MONGODB_URI)
- Validation: Zod schemas across forms and server.
- Example:
z.object({ title: z.string().min(3) })
- AI:
ai package with OpenAI provider for assisted responses. - Forms: React Hook Form + Zod resolver.
- Example:
useForm({ resolver: zodResolver(schema) })
- Logging: Pino for structured logging.
UX and performance
- UI: Tailwind + Shadcn UI for accessible components.
- MDX Editor: advanced editing, light/dark theme, code highlighting.
- Performance: lazy media, paginated lists, UI caching and tuned filters.
- Dark mode: consistent theming across the app.
Role and contribution
I implemented the front end and full‑stack integration: authentication, Q&A flows, AI answers, voting, bookmarks, profiles/badges, job finder, global search, MDX editor, Zod validation, and Mongoose integration, focusing on UX, accessibility, and performance.
Technical highlights
- Next.js 15 + React 19 + TypeScript.
- NextAuth (Email/Password, GitHub, Google).
- MongoDB/Mongoose for data.
- AI via
ai + @ai-sdk/openai. - MDX Editor for rich content.
- Zod + React Hook Form for robust validation.
- Tailwind + Shadcn UI for accessible design.
- Global search, job finder, gamification (badges), and bookmarks.