> About
About Favorite Map Locations
Welcome to my GitHub portfolio project demo app Favorite Map Locations!
This is a fullstack PERN (PostgreSQL Express.js React Node.js) TypeScript app that allows users to register accounts to favorite places on the map, upload pictures for them, and leave comments about the places.
I’ve always been enthusiastic about digital maps (see my previous project LingoMap), and I enjoy exploring ways to improve map app experiences for myself and others.
This time, I was inspired to create a highly efficient place marker rendering system that would only load places within the visual bounds of the app the user is currently viewing. I wanted the app to only update as the user pans the map or zooms in and out, showing places reasonably dispersed across the map without too many markers clustered together. The goal was to create something user friendly with a social media aspect where users could share and chat about their favorite places.
View the project source code here: https://github.com/jason102/fav-map-locations/tree/feature/code-for-review
My name is Jason Stine and you can contact me by email: jason102@gmail.com
My GitHub page: https://github.com/jason102
My LinkedIn profile: https://www.linkedin.com/in/jstine/
Remaining tasks to make the project more complete:
- The My Profile page (current user's profile)
- Error pages (for example if you try to load the profile of a user that does not exist)
- Responsive design for mobile screen layouts (currently UX is best on desktop screens)
- Improve the UI appearance (most of it is still using MUI default styling)
- Unit tests for testing the code using Vitest and React Testing Library (frontend) and Jest/supertest (backend) (other projects on my GitHub page demonstrate this)
Tech stack:
The app WAS hosted using Amazon Web Services (AWS), including:
- Elastic Beanstalk/EC2 for the backend server, load balancing and monitoring
- RDS for the backend database
- S3 for storing frontend project code and place photo image files
- CloudFront for hosting the frontend code in S3
- Route 53 for domain name registration
- ACM Certificate Manager for HTTPS certificates
- IAM for security rules among AWS services
However, after the free trial period ended (1st year), for easier/cheaper hosting I dropped AWS's Elastic Beanstalk/EC2 service for this:
- Netlify for hosting the frontend project
- Render for hosting the backend project (Netlify does not easily support websockets so I needed a full server hosting solution, which Render provides)
- AWS RDS for the backend database
- AWS S3 for storing frontend project code and place photo image files
- AWS Route 53 for domain name registration
NOTE: Therefore, the first time you load the app it may take almost a minute to load the places due to Render's free tier spinning down the server after a period of inactivity. However, after the first load, everything should be fast and responsive.
Frontend libraries and services:
| Dependency | Description |
|---|---|
| Vite | Frontend project tooling |
| Material UI (MUI) | Gives the app its look and feel |
| Redux Toolkit and RTK Query | Global state management and API/caching management |
| React Router | Client-side routing and navigation |
| React Hook Form | Form management and field validation |
| Leaflet.js | Renders an interactive OpenStreetMap.org (OSM) map |
| OSM Nominatim | Reverse geocoding service to get place info when the user right-clicks on the map |
| Client Socket.IO | Client side WebSocket connection management for the place details page chat widget |
| Chatscope | UI chat widget building block components and client side "engine" for the place details page chat widget |
| Compressor.js | Helps resize and compress place image files for upload |
| React Slick | Image carousel widget to display place photos |
Backend libraries and services:
| Dependency | Description |
|---|---|
| bcrypt | Hashes account passwords for being securely stored in the database |
| express-validator | Express.js route validation and sanitization |
| GraphQL | Including use of Apollo Server, DataLoader for batching database queries and caching, and GraphQL-Codegen for TypeScript types generation |
| helmet.js | Helps with setting secure HTTP response headers |
| jsonwebtoken | JSON web token creation and validation for secure login sessions |
| multer | Multipart/form data handling for image file uploads to AWS S3 using multer-s3 |
| Server Socket.IO | Server side WebSocket connection management for the place details page chat widget |
| Knex.js | Database migrations management |