Map Mates is a social scratch map application where users can log their visited countries, add friends, and view their friend's scratch maps.
Features
Interactive scratch map
Users can mark and unmark countries as visited on their own scratch map, which is then displayed on their profile.
Friends functionality
Users can add/remove other users as friends, and see where each other have visited.
Customisable Profile
Users can personalise how their profile looks. They are able to choose the colours their map uses, which is reflected on their profile to other users.
Should the user want to change their username, they can do that too.
Take a look at my profile on Map Mates here.
Tech stack
Front end
- Next.js 15 (App router)
- React Simple Maps for the visualisation of the maps
- Tailwind CSS for styling
Back end
- MongoDB for the database
- Prisma ORM to interact with the database
- A combination of Next.js route handlers and server actions.
- NextAuth.js for authentication (Google sign up/sign in)
- Zod for form validation
External APIs:
- REST Countries for country metadata and flags. I use this to prebuild a static list of countries, their flags and their IDs. This is so we can match up the IDs from the GeoJSON file to their respective data.