The only language you need is your own.
Mapinly is a community platform for discovering events and joining discussions — without the language barrier. Every piece of content on Mapinly is automatically translated so that users can participate fully in their own language, whether they're reading an event description, chatting with attendees, or commenting in a forum.
🎬 Video Demo: - Watch on YouTube
- Events — Browse, create, and register for local or global events. Each event has a title, description, location (with an interactive map), date & time, tags, and a live chat room for registered attendees.
- Forums — Create community discussion threads. Users can comment, reply, and upvote or downvote contributions. Forums can be marked open or closed.
- Automatic Translation — All dynamic content (event titles, descriptions, forum posts, comments, chat messages) is stored with its source locale and translated on-the-fly into the viewer's preferred language using the Lingo.dev AI SDK. The UI itself is statically localised via i18next.
- 7 Supported Languages — English, Spanish, German, French, Italian, Portuguese, and Chinese.
- Interactive Map — Events are plotted on a MapLibre GL map. Users can get turn-by-turn routing from their current location to any event via the OSRM routing API.
- Dashboard — A personal space to manage the events you've organised, the forums you've created, and your upcoming registrations — all with a calendar view.
- Authentication — Powered by Supabase Auth (email / OAuth). Protected routes are handled by Next.js middleware.
| Layer | Technology |
|---|---|
| Framework | Next.js 16 (App Router, React 19) |
| Styling | Tailwind CSS v4 + shadcn/ui |
| Animations | Motion (Framer Motion) + @paper-design/shaders-react |
| Database | PostgreSQL via Prisma ORM |
| Auth & Backend | Supabase (Auth, Row-Level Security) |
| Translations (UI) | i18next + react-i18next |
| Translations (Content) | Lingo.dev SDK (AI-powered, runtime) |
| Maps | mapcn |
| Routing | OSRM (open-source routing engine) |
| Forms | React Hook Form + Zod |
| State | Zustand |
| Language | TypeScript |
git clone https://github.com/Vaibhav91one/mapinly.git
cd mapinlynpm installCreate a .env file at the project root:
# Supabase
NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
# Database (Prisma)
DATABASE_URL=your_postgres_connection_string
DATABASE_URL_DIRECT=your_direct_postgres_connection_string
# Lingo.dev (AI content translations)
LINGODOTDEV_API_KEY=your_lingo_api_key
# App URL (used for SEO / Open Graph)
NEXT_PUBLIC_APP_URL=http://localhost:3000# Push the Prisma schema to your database
npx prisma db push
# (Optional) Seed with sample data
npm run db:seednpm run devOpen http://localhost:3000 in your browser.
mapinly/
├── app/ # Next.js App Router pages & API routes
│ ├── page.tsx # Home page
│ ├── events/ # Events listing + individual event pages
│ ├── forums/ # Forums listing + individual forum pages
│ ├── dashboard/ # User dashboard
│ ├── auth/ # Authentication pages
│ └── api/ # API route handlers
├── components/
│ ├── home/ # Landing page sections
│ ├── events/ # Event list, cards, hero, chat
│ ├── forums/ # Forum list, cards, comments
│ ├── dashboard/ # Dashboard sections & carousels
│ ├── layout/ # Navbar & footer
│ ├── forms/ # Reusable form components
│ ├── shared/ # Shared UI (MaskText animation, etc.)
│ ├── locale/ # Language switcher & locale dialogs
│ ├── map/ # Map & route-planning components
│ └── ui/ # shadcn/ui primitives
├── prisma/
│ ├── schema.prisma # Database schema
│ └── seed.ts # Database seeder
├── lib/
│ ├── i18n/ # i18next setup, keys, and locale utilities
│ ├── events/ # Server-side event data helpers
│ └── forums/ # Server-side forum data helpers
└── public/
└── svgs/ # SVG assets (Asterisk logo, etc.)
When a new user visits Mapinly, they're prompted to choose their preferred language. From that point on, every piece of content — event titles, forum discussions, chat messages, comment threads, and tags — is served in their chosen language. The source language of each post is stored in the database; translations are generated and cached per locale.
Registered attendees of an event have access to a real-time chat room scoped to that event. Messages are stored with their source locale and translated for each reader automatically.
Events include a precise geographic location. The events page includes a full-screen map view with markers for all events. On an individual event page, users can request a walking or driving route from their current location to the event, with live duration and distance shown via the OSRM API.
The landing page features a scroll-driven LiquidMetal shader animation, a velocity-scroll marquee section, and a staggered mask-text reveal effect on all major headings throughout the app.
| Command | Description |
|---|---|
npm run dev |
Start the development server |
npm run build |
Generate Prisma client and build for production |
npm run start |
Start the production server |
npm run lint |
Run ESLint |
npm run db:seed |
Seed the database with sample data |
This project is optimised for deployment on Vercel.
- Connect your GitHub repository to a new Vercel project.
- Add all environment variables from the
.envtemplate above in the Vercel project settings. - Set
NEXT_PUBLIC_APP_URLto your production domain (e.g.https://mapinly.vercel.app). - Deploy — Vercel will run
npm run buildwhich includesprisma generateautomatically.
Pull requests are welcome. For major changes, please open an issue first to discuss what you'd like to change.
Vaibhav Tomar
- GitHub: @Vaibhav91one
- Twitter: @VrsatileVaibhav
- LinkedIn: vaibhav-tomar-a6b2b6255
- Portfolio: portfolio-v2-rouge-ten-80.vercel.app
This project is open source under the MIT License.