Welcome to TechTrek — a modern developer events platform built with the latest Next.js (v16), MongoDB, and Mongoose. TechTrek helps developers discover and register for technical events, workshops, and meetups with a delightful, fast, and accessible UI.
TechTrek is designed for maintainability, developer DX, and fast production delivery. This README shows how to run, develop, and deploy the app, plus notes on the data model, API endpoints, environment variables, and contribution guidelines.
- Built with Next.js 16 (app router, server components, streaming where appropriate)
- MongoDB for durable event and registration storage
- Mongoose as the ORM layer with typed schemas and validation
- Authentication-ready (extensible to providers: NextAuth, Clerk, Auth0)
- Event registration flow: browse events, view event details, register, manage registrations
- SSR + incremental static features for performance and SEO
- Minimal, testable API routes with clear contracts
Below are the typical flows you can expect in TechTrek:
- Explore upcoming developer events
- View event details (speakers, agenda, location, capacity)
- Register as an attendee and receive a confirmation
- Admin interface (future) for creating and managing events
- Tech stack
- Requirements
- Getting started (local)
- Environment variables
- Run scripts
- Database & models
- API surface
- Deployment
- Testing
- Security & production notes
- Contributing
- License
- Next.js 16 (app router, latest React features)
- React 18+ (concurrent features where appropriate)
- MongoDB (Atlas or self-hosted)
- Mongoose ORM for models, validation and hooks
- Tailwind CSS / plain CSS (project may include
globals.css) - Optional: TypeScript (project scaffolding includes
tsconfig.json)
- Node.js 18+ (recommended LTS) or newer
- npm, pnpm, or yarn
- MongoDB connection (local or Atlas)
- Clone the repo:
git clone https://github.com/<your-org>/tech-trek.git
cd tech-trek- Install dependencies (choose one):
# npm
npm install
# or pnpm
pnpm install
# or yarn
yarn install-
Create a
.env.local(see Environment variables below). -
Run the development server:
# npm
npm run dev
# or pnpm
pnpm dev
# or yarn
yarn dev- Open http://localhost:3000 in your browser and start exploring.
Create .env.local in the project root and add the following (replace placeholders):
MONGODB_URI=mongodb+srv://<username>:<password>@cluster0.mongodb.net/techtrek?retryWrites=true&w=majority
NEXT_PUBLIC_APP_NAME=TechTrek
NEXT_PUBLIC_BASE_URL=http://localhost:3000
# Optional auth and email config
SMTP_HOST=smtp.example.com
SMTP_USER=...
SMTP_PASS=...
# Optional: analytics provider
POSTHOG_API_KEY=pk_...
Notes:
MONGODB_URIis required for development and production.NEXT_PUBLIC_...variables are exposed to the browser; keep only non-sensitive values there.
Common scripts found in package.json:
dev— start Next.js dev serverbuild— production buildstart— start built applint— run ESLinttest— run tests (if present)
Example:
npm run build
npm startTechTrek stores events and registrations in MongoDB. A simple model sketch:
-
Event
- title: String
- slug: String (unique)
- description: String
- startDate: Date
- endDate: Date
- capacity: Number
- location: String (or online link)
- speakers: [{ name, bio, avatar }]
-
Registration
- eventId: ObjectId -> Event
- attendeeName: String
- attendeeEmail: String
- createdAt: Date
Example Mongoose usage (high-level):
import mongoose from 'mongoose'
const EventSchema = new mongoose.Schema({
title: { type: String, required: true },
slug: { type: String, required: true, unique: true },
description: String,
startDate: Date,
endDate: Date,
capacity: Number,
speakers: [{ name: String, bio: String }],
})
export const Event = mongoose.models.Event || mongoose.model('Event', EventSchema)Make sure your app reuses a single global Mongoose connection in server environments to avoid connection storms during hot reloads. A common helper is lib/mongoose.ts.
TechTrek exposes small API routes under app/api or pages/api depending on setup. Example endpoints:
GET /api/events— list events (filters, pagination)GET /api/events/[slug]— event detailsPOST /api/events/[slug]/register— create a registration for an event
Example registration contract (request -> response):
POST /api/events/my-event/register
Request JSON:
{ "name": "Alex Dev", "email": "alex@example.com" }Response (201):
{ "ok": true, "registrationId": "...", "message": "Registered successfully" }Handle edge cases: capacity reached, duplicate email, invalid payloads.
Recommended: Vercel (first-class Next.js support) or any Node server + MongoDB (Atlas).
Vercel steps:
- Push your repository to GitHub.
- Import project into Vercel and set environment variables (same names as
.env.local). - Deploy — Vercel automatically handles builds.
If self-hosting:
- Build:
npm run build - Start:
npm start(ensureNODE_ENV=productionandMONGODB_URIavailable)
Add unit tests for model logic and API route integration tests for registration flows. A minimal test plan:
- Unit: validate Event model capacity logic
- Integration: register endpoint returns 201 and creates a document
You can use Jest + Testing Library for React + supertest for API tests.
- Validate and sanitize incoming data (use Zod or Joi for runtime validation).
- Rate-limit registration endpoint to prevent spam.
- Use HTTPS in production and secure cookies if using sessions.
- Store secrets in environment variables (never commit secrets).
We welcome contributions!
- Fork the repo
- Create a branch:
git checkout -b feat/your-feature - Make changes and add tests
- Open a PR describing the change
Please follow the code style and run npm run lint before opening a PR.
If you want help with a contribution idea, open an issue and we'll discuss the scope.
# Run dev server
npm run dev
# Build for production
npm run build
# Start production
npm start
# Run lint
npm run lint
# Run tests (if present)
npm test- Admin dashboard for event creation and attendee exports
- Email confirmations and calendar invites
- Ticketing (paid events)
- Social login and team registrations
Built with ❤️ using Next.js, MongoDB, and Mongoose.
If you want, I can:
- Add this
README.mdinto your repo now (I can commit it), - Generate a sample
.env.exampleand a simplelib/mongoose.tsconnection helper, - Or tailor the tone (more formal, shorter, with images/screenshots placeholders).
Tell me which of the above you'd like next and I will proceed.