MapMates 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.

The friends page, showing both incoming friend requests, and existing friends

Profile page displaying all the places they 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 visualization 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. We 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.