Meme Generator

A Webapp built with the MERN Stack

About

This is a meme web application, where you can view, create, and share memes with your friends. An editor offers logged-in users various options for creating memes. A history of self-created or liked memes of other users can be found in the user profile. All user memes are presented on the overview page and can be liked or commented on. Also, a REST-API provides endpoints to create and retrieve memes.

Project Details

Period
Team Size
IDE
Languages
Frameworks
Database

12/2021 – 02/2022
4
Visual Studio Code
JavaScript, CSS, HTML
NodeJS (Server Runtime Environment), Express (Backend), React (Frontend)
MongoDB Atlas

View repository on GitHub

Project Description

The website was created in the university course ‚Online Multimedia‘ at the LMU Munich.

By developing a meme generator website, bonus points could be earned in addition to the exam. For this purpose, a list of possible features could be processed, with each feature being further subdivided into basic, intermediate and advanced. The more features and the more mature they were implemented on the day of delivery, the more bonus points you received.

Features

Editor page

An editor offers numerous options for editing memes, such as adding text (manually or using speech to text) and placing it anywhere on the picture. Images can be uploaded from the PC, taken from the webcam or downloaded from the internet via a URL. In addition, there are templates with images from other users to choose from which can be further edited. You can also mark your own meme as private so that no one else sees it.

Previous image

Next image

Overview page

A chart at the top of the overview page shows values of all memes in the database (such as creation date, number of comments/votes). In addition, a search bar can be used to search for a specific meme. Further down, all memes created by the logged-in users can be seen, be commented on and liked. The memes displayed can also be sorted by popularity or creation date.

Previous image

Next image

Profile page

If you have logged in via Google, the profile picture of your own Google account appears on the profile page (in my case, a little ninja, which I brought from Japan, hidden in the grass). At the beginning, the page is empty, but as soon as you have created your own meme or liked a meme of another user, it appears in the corresponding image slider in your profile. From here, you can edit your own memes back in the editor, share them on social media platforms or delete them.

Empty profile page

Image sliders showing memes
top: self-created memes
bottom: liked memes of other users

Responsive profile: wrapped elements

Previous image

Next image

My contribution

Implementing different react components: e.g. image slider with hover effects for extended functionalities, social media buttons with sharing function etc.
Implementing the user profile page (backend and frontend): conditional rendering depending on login status and number of memes.
Frontend: adaptations for the responsive layout of the entire website, design of individual components implemented by others such as popups etc.