Bonjour World

Language-exchange web app with hosting flows, maps, and translation support.

#EventLifecycle
#HostApprovalFlow
#JWTAuth
#GeolocationDiscovery
#LanguageTranslation

Project overview

Bonjour World is a language exchange platform designed to connect language learners and polyglots through interactive, location-based events. The platform enables users to host and join language exchange events, allowing them to practice new languages in a dynamic and engaging way. With personalized profiles, users can track their progress and build connections with fellow learners.

Engineering challenges

Enforcing join-request rules in Express before MongoDB writes—checking requestedEvents, pendingAttendees, and attendees so duplicate requests return structured 400s instead of corrupting host approval state.
Plotting events on the map by geocoding host-entered addresses with getAddressCoordinates, then creating markers only when markersRef has no entry for that event _id to avoid duplicate pins on re-render.
Combining Google Maps, Geocoding, and Places on the client for discovery while keeping JWT-protected host and approval flows on separate Express routes—so map browsing stays fast without blocking authenticated mutations.

Features

Full event hosting system allowing users to create, manage, and edit events, with the ability to accept or decline join requests
Streamlined join request process for easy participation and host management of attendee approvals
Personalized user profiles that track language exchange history and connections
Secure JWT-based authentication, ensuring safe access, profile privacy, and event safety
Interactive map interfaces powered by Google Maps API, making event discovery seamless and intuitive
Dynamic language translation across the entire platform powered by Google Translate, enhancing accessibility for all users

Architecture

At a glance

React + Redux SPA; events plot on a Google Map via Geocoding from stored addresses.
Passport auth with JWT; hosts create events, guests request to join, hosts approve pending attendees.
MongoDB for users and events; Maps, Geocoding, Places, and Translate run from the client.

Client routes

/ (landing / main page)
/events (event discovery and map)
/events/:eventId (event detail and join flow)
/profile/:id (user profile)
/aboutus (about page)

Express API

GET /api/users/current · POST /api/users/register · POST /api/users/login (restore session, sign up, sign in)
GET /api/users/:id · PATCH /api/users/:id (view and edit profiles)
GET /api/events · GET /api/events/:id (list events with optional language filter, load event with attendees)
POST /api/events · PATCH /api/events/:id · DELETE /api/events/:id (host creates, updates, or deletes an event)
POST /api/events/:eventId/users/:userId · DELETE /api/events/:eventId/users/:userId (request or cancel a join request)
POST /api/users/:userId/events/:eventId · DELETE /api/users/:userId/events/:eventId (confirm attendance or leave an event)

Deploy & data

MERN stack on Render (Express for users and events; React calls Google APIs client-side to geocode addresses and render map markers; MongoDB stores users, events, and join lists).

flowchart TB
  subgraph fe [1. Frontend — React + Redux]
    react[React UI — events, profiles, host flows]
    redux[Redux store]
    mapview[Map view — markers and discovery]
    react --> redux
    react --> mapview
  end
  subgraph be [2. Backend — Node.js + Express]
    jwt[JWT auth — login and protected routes]
    api[REST API — events, users, join requests]
    mongoose[Mongoose]
    jwt --> api --> mongoose
  end
  subgraph external [3. Database and Google APIs]
    mongo[(MongoDB — users, events, join lists)]
    gmaps[Google Maps, Geocoding, Places]
    gtrans[Google Translate]
  end
  react -->|Sign in, signup| jwt
  redux -->|Host events, approve join requests| api
  mapview -->|Geocode addresses, render map| gmaps
  react -->|Translate site copy| gtrans
  mongoose --> mongo

Technologies used

Frontend

React, Redux, CSS

Backend

Node.js, Express.js, JWT

Data

MongoDB, Mongoose

External APIs

Google Maps, Geocoding, Places, Google Translate

Infra

Render