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

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

MERN stack deployed on Render. The browser calls Express over HTTPS for auth and event data; the map and translation features call Google APIs from the client using geocoded event addresses.

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