A full-stack React application for managing and browsing Meetups built with Next.js 13 and MongoDB.
- 📋 Browse Meetups - View all upcoming React meetups on the homepage
- ➕ Add Meetups - Submit new meetups with title, image, address, and description
- 📄 Meetup Details - View comprehensive information for each meetup
- 💾 MongoDB Database - Persistent data storage with Atlas
- 🔄 Static Site Generation - Optimized for performance with
getStaticProps - 🎨 Modern Styling - CSS Modules for component-scoped styling
| Technology | Purpose |
|---|---|
| Next.js 13 | React framework with App Router & SSG |
| React 19 | UI library |
| MongoDB | Database for storing meetups |
| MongoDB Atlas | Cloud database hosting |
| CSS Modules | Component-level styling |
- Node.js 18+ installed
- MongoDB Atlas account (or local MongoDB)
- Clone the repository:
git clone <repository-url>
cd Next-js-Meetup-Project- Install dependencies:
npm install- Create a
.env.localfile in the root directory:
MONGODB_URI=mongodb+srv://<username>:<password>@cluster0.kvyhbc9.mongodb.net/?appName=Cluster0- Run the development server:
npm run devOpen http://localhost:3000 to see the application.
| Script | Description |
|---|---|
npm run dev |
Starts the development server on port 3000 |
npm run build |
Creates an optimized production build |
npm run start |
Runs the production server |
Next-js-Meetup-Project/
├── components/
│ ├── layout/
│ │ ├── Layout.js # Main layout wrapper
│ │ └── MainNavigation.js # Header with navigation
│ ├── meetups/
│ │ ├── MeetupDetail.js # Individual meetup details page
│ │ ├── MeetupItem.js # Individual meetup card
│ │ ├── MeetupList.js # List of meetups
│ │ └── NewMeetupForm.js # Form for adding new meetups
│ └── ui/
│ └── Card.js # Reusable card component
├── pages/
│ ├── api/
│ │ └── new-meetup.js # API endpoint for adding meetups
│ ├── new-meetup/ # Add new meetup page
│ │ └── index.js
│ ├── [meetupId]/ # Dynamic meetup detail page
│ │ └── index.js
│ ├── _app.js # Custom App component
│ └── index.js # Homepage
└── .env.local # Environment variables (not committed)
Create a .env.local file with:
MONGODB_URI=mongodb+srv://<username>:<password>@cluster.mongodb.net/?appName=Cluster0Note: The .env.local file is gitignored to protect your credentials.
- Install Vercel CLI:
npm i -g vercel- Deploy:
vercel- Add your
MONGODB_URIin Vercel dashboard > Settings > Environment Variables
- Build the project:
npm run build- Start the production server:
npm startTo learn more about Next.js, MongoDB, and React:
This project is part of a React/Next.js course and is for educational purposes.