Places-App - Technical Architecure

With the Places-App I tried to implement a full-stack web application with a state-of-the-art tech stack (2023). The base of the application is a React/Redux frontend. The frontend is connected to a Node.js backend via a REST-API. Both are hosted on Vercel. The backend is connected to a MongoDB database on MongoDB Atlas, the authorization is done with JWT. The fotos are shown on a per-user basis.

The fotos are stored on Cloudinary and are accessed via the Cloudinary API. Transformations are done on the Cloudinary server. The fotos are shown on a page with a form and on a map (Leaflet) with popups.

During the upload-process to Cloudinary I extract the GPS-Data and Time-Data from the fotos (exifr.js) and show the values in the UI together with the foto and a description. It is possible to adjust the Geo-Position in the form interactively on a map (a bit tricky!). All map operations are done with the fantastic Leaflet library.

Right now all the fotos of a user are shown on a map with markers. In a future version the fotos can be filtered by tags and by location and time period. Another important feature will be the addition of a route where the isolated places are connected with a line to show the route of a trip. For the time being an important feature is the handling of many fotos/places nearby each other. The fotos are clustered on the map and the user can zoom in to see the individual fotos. To implement this feature I use the Leaflet MarkerCluster library and perhaps the Geospatial Queries of MongoDB.

The foto together with the contextual data (description, geo-position, time, user) forms a 'Place' and the contextual data is stored in a MongoDB database. The geo-data is stored as a GeoJSON object with geospatial index. This facilitates the use of the geospatial queries of MongoDB and the use of the Leaflet library. The database is hosted on MongoDB Atlas. The database is accessed via the Mongoose library. The place-data are stored in a collection together with the user-id. The user-id is used to show the fotos on a per-user basis. The next concept to be implemented will be a route that consists of a ordered list of 1 or many places. It will shown on the map as a connected line of places (markers or MarkerClusters).

UI: The application is responsive and can be used on a mobile device. To facilitate the uploading I use Uppy.js - a modern file uploader that fetches files from local disk, Google Drive, Dropbox etc.

The application is hosted on Vercel. For development I used Visual Studio Code & Github. The administration of the data is done with the MongoDB Compass. The fotos are stored on Cloudinary in full resulution and are being transformed on the fly by Cloudinary.

A really SOTA implementation would use today Next.js on top of React/Redux. And I also would like to use GraphQL instead of a REST-API. And in a professional environment I would use TypeScript in order to avoid many bugs. But I think the current implementation is a good starting point to show my skills as a full-stack web developer.

You can try it out here: Places App