A full-stack event management platform where users can view, search, and explore nearby events on an interactive map. Built with Next.js, React, Prisma, and Mapbox GL JS.
- ✅ List public events with details (name, date, location, image)
- 📍 Display events on interactive Mapbox map
- 📡 Auto-detect user location & show nearest events
- 🔍 Search & filter events by distance
- 🌐 Responsive and modern UI with hover interactions
- 🔐 Authentication-ready (optional, via NextAuth.js)
| Technology | Description |
|---|---|
| Next.js | React Framework (frontend + backend) |
| React | Frontend Library |
| Mapbox GL JS | Interactive Maps |
| Prisma | ORM for PostgreSQL/MySQL/SQLite |
| React Query | Data Fetching & Caching |
| TailwindCSS | Styling (Utility-First CSS) |
| NextAuth.js (Optional) | Authentication |
git clone https://github.com/rahmatsuhadi/kawis.git
cd kawispnpm installCreate a .env.local file in the root directory and fill it with:
NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
DATABASE_URL=your-supabase-postgres-connection-pool
DIRECT_URL=your-direct-postgres-url
NEXTAUTH_SECRET=your_nextauth_secret
GOOGLE_CLIENT_ID=your_google_client_id
GOOGLE_CLIENT_SECRET=your_google_client_secret
NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN=your_mapbox_token
NEXT_PUBLIC_MAPBOX_STYLE_URL=your_mapbox_style_urlnpx prisma migrate dev --name init
npx prisma generatepnpm run devThe application will be available at:
👉 http://localhost:3000
/components
/event
├── EventList.tsx // List of events with details
└── EventMap.tsx // Mapbox map to display events
/pages
/api
└── events.ts // API route for fetching event data
/main/event/[id].tsx // Dynamic route for event detail page
/lib
└── prisma.ts // Prisma client configuration
/hooks
└── useGeolocation.ts // Custom hook to detect user's location
This project is licensed under the MIT License.
Pull requests are welcome! For major changes, please open an issue first to discuss what you would like to change.