VT Memegen

Login Authentication
Home Page
Sort Feature
Comment Section
New Post
Profile Page

Inspiration

Even though we have access to services like VT Instagram meme pages or YikYak, we felt there was no streamlined way of exclusively consuming memes that were specific to fellow Hokies. Like Google's personal internal meme platform Memegen, VT Memegen is only accessible to members of the Virginia Tech community meaning all posts are substantially more relatable and therefore more entertaining.

What it does

After an authentication process verifying your '@vt.edu' email, users are brought to the homepage where they can see all posts. Sorting by tags such as 'Sports,' 'Dorms,' 'Night Life,' etc. yields corresponding posts. Although posting on other platforms may require a third-party technology for media creation, this is where VT Memegen stands out. Pick from several popular meme templates where you can intuitively input text into pre-allocated spaces allowing for optimal meme production. Finally, interact with other user's posts by liking, disliking, or commenting to further express your thoughts.

How we built it

We built VT Memegen using various Frontend and Backend Technologies.

Our Tech Stack: Firebase, React (TypeScript), Express, NodeJs, TailwindCSS, OpenAI API

Our UI was developed using React (TypeScript) with Tailwind CSS for easier styling to allow our site to be easy to use and interactive. Our backend technologies consisted of Express and NodeJs which we used for handling our backend requests and Firebase for authentication, users, posts, and image storage. Finally, we integrated OpenAI’s API into our application to provide a generative AI assistant to summarize our user-generated content (memes) on the site.

Challenges we ran into

Although we initially tried using PropelAuth, after many attempts, we switched to Firebase as it provided a database and authentication service killing 2 birds with 1 stone. Integrating OpenAI's GPT 4 API such that the AI would summarize each post was also a tough challenge due to passing in the image data, but it was a problem we overcame.

Accomplishments that we're proud of

We are most proud of how much we learned while having a good laugh at our A1 memes.

What we learned

Throughout our development of Memegen, we gained insights about the many different components involved in full-stack applications as well as how to apply our varying levels of experiences into one collaborative project. This project allowed us to explore integrating generative AI assistants, implementing Third-Party Authentication, utilizing Database platforms, and deepening our knowledge in Front-end development.