MyMemoria 📝

Save your loved memories to different locations all over the world 🌍

❓ This is the repository for my fullstack project MyMemoria, which has taken over 250 hours to make! This readme includes the documentation, the code for the frontend and the backend. See below for more screenshots and info. (Was named just fullstack project before)

💻 Deployed at https://mymemoria.app/. Note that it may take few minutes to connect since Render automatically spins down free apps. You can use any email to register, it isn't verified. For demo purposes you can use for example mail@example.com and password password123.

Tip

⭐ New features! This app now has i18n translations! Rebranded to MyMemoria! Timeline! There are other changes too, see releases for full patch notes!

Info

Technologies used 🔧

All the code in frontend and backend are made with TypeScript and with latest libraries and standards.

Frontend

• Frontend powered by React, Vite, Tailwind. Multiple components from like Daisy UI, Preline, Flowbite.
• Routing by React Router, state management by Tanstack Query (React Query).
• Map powered by Mapbox.
• User authentication powered by Firebase Authentication.
• Automated testing powered by Cypress. Every page and major function has a E2E test.

Backend

• Backend powered by NodeJS & Express. Database powered by MongoDB and hosted by Mongo Atlas.
• Automated testing powered by Cypress. API testing done manually with Hoppscotch.

Main features ⭐

• Create user / login with Firebase Authentication. You can reset password if forgotten.
• Frontpage has a list of all memories and a map that has pins to notes' locations.
• Create memories that have title, content and location. You can search for an address or drop a pin to the map.
• Edit and delete memories.
• Change your name or delete your account.
• Set default map location for your memories.
• The app is designed for all screens, UI scales properly on mobile and PC.
• Fully translated to English and Finnish.
• Code is optimised, properly commented and made logically.
• Proper testing.
• Proper CI/CD pipeline.
• Uses GitHub branches and pull requests.

Screenshots 📷

Frontpage

Sign in page

Register page

Frontpage after creating user / signing in

Adding a memory

Single memory view

Editing a memory

Frontpage loading skeleton

Frontpage after some entries

Frontpage on mobile

Adding a memory on mobile

Timeline loading skeleton

Timeline

Profile page

Changing name

Settings page

Info page

Running the app 🏃

This project has three different Firebase Auth and MongoDB credentials: development, testing and production.

See here for information how to run.

Test coverage 🔬

This project uses Cypress for E2E testing. Almost every aspect has a E2E test, excluding some map elements where automated testing isn't possible due to Mapbox's limitations.

Backend has been throughly tested with Hoppscotch when changes have been made to it. Automated testing seems to be impossible due to auth being handled by Firebase Auth and you need your ID and token for every request.

See here for tests.

Time used ⏱️

See here.

What I learned and thoughts about the project 🎓

See here.

Bug reports and other 🐛

Please open a GitHub issue here.