Memes are an essential part of the internet culture - they are everywhere.
Whether that's good or bad, there’s no denying that memes have revolutionized the way we communicate. Millions of memes are shared on Twitter and other social media platforms daily. Ever wanted to sit back, relax, and scroll through some memes?
We can relate. This world is a sack of all sorts of entertaining content, but when it comes to sorting high-quality and original memes or creating them, most platforms fail to do that.
Well, no more! Where your time and smile are precious, and your creativity feeds your and others' happiness, we come in with LMFAO.tech
With an aim to make you go LMFAO or at least put a smile on your face, we created LMFAO. tech - A meme discovery and creation platform.
LMFAO (which stands for laughing my f*cking *ss out) is a meme platform targeted at people who browse Twitter primarily for memes. An algorithm uses the Twitter filtered search stream to get memes which are featured in the “Home” tab, after some software filters, NSFW checks and more
Users have the ability to interact with posts on the home tab, provided that they have already logged into the app using their Twitter account. Liking/retweeting the posts, and creating posts also use the Twitter APIv2 to do the same on Twitter. Consequently, the receiver of the like gets some LMFAO coins for it. In exchange for this activity, the user who likes the posts also gets a coin. This is done in order to incentivize user activity and the act of liking posts.
Users can also create or publish posts, that will be tweeted using their own (currently logged in) Twitter account. Users can also gain points by posting. A tweet is created with a mention to the Twitter bot, @LMFAO_tech
The main (home) page pulls memes ONLY from the community.
These can be:
- Memes uploaded through LMFAO.tech
- Memes found by our community and pushed using the @LMFAO_tech bot on Twitter
The backend pulls the latest memes from Twitter via a Filtered search stream. After a lot of checks and filters, They are shown on this page.
The app was built with
- ReactJS - javascript library for building user interfaces
- NextJS is our fast React framework for performance, scalability, security, and accessibility. The serverless API routes in the app are able to handle the heavy-lifting of all user’s calls (liking, retweeting, posting) to the Twitter API
- Typescript for strongly-typed codebase and catching errors early.
- TailwindCSS to leverage benefits and speed of utility-first CSS framework
- TwitterAPI provides the entire infrastructure over which LMFAO.tech is built upon. Authorization, Database, Liking/Retweeting/Posting, everything is powered by TwitterAPI v2
- Novu provides the notification infrastructure for the users.
- PlanetScale’s MySQL database to store the points, user information like username, userID
- Redis hosted on RedisCloud for providing fast read and write of the meme cache and community memes
- Prisma as the ORM to interact with the database
- Framer-Motion for animations on the main page
- Python with FastAPI as a fast and reliable backend server
- Vercel for hosting the Frontend
- Railway for hosting everything else (Backend, Coins distributor, Twitter bot)
This is the overall structure of how it works
The main page has memes that are submitted by the community. This includes:
- Memes uploaded/created through LMFAO.tech
- Memes found by our community and pushed using the @LMFAO_tech bot on Twitter
This is the automated feed. The backend streams posts using the Twitter Filtered search stream and the posts appear here after our checks, filters and moderation.
See your position among the crowd, how many coins you have, and the global leaderboard
A single page for all your memes and statistics
Create page is the one page where you can create and publish memes. This is the page with the meme creator and the template picker. Here’s a GIF
Notifications tab, for the dopamine! Whenever you get a like/follow through LMFAO.tech, you get a notification for it. Powered by Novu
The Twitter bot serves multiple purposes:
- Discover memes that will be submitted by the community. Anyone can mention the bot under any post and get rewarded for their contribution to the community. Did you find a meme that made you laugh? Mention the bot! Helps the community and you earn points for it.
- Allow users to publish their own memes to the community (By tagging the bot in the main tweet itself)
- Ships as a Progressive web app - Offline loading, Multi-device native-like feel
- Notifications for all interactions
- Blazingly fast meme loading - Powered by a Redis database
- Multiple streams for memes - Main tab, the community tab
- Advanced moderation features for select users. “Supermod” features for the makers
- Points, Leaderboard, Ranks and streaks system integrated into the functionality that makes everything fun!
- Advanced meme maker with the option to select predefined meme templates. Also an option to google image search right in the meme template picker
This was the first actual product made by my brother (DhravyaShah) and his friend (Yash). The branding and design of the app were definitely a challenge.
At first, we had some trouble with authorizing users into our app - NextAuth didn't have the customizability we needed, so we tried to come up with a custom solution. However, in the end, with some help with friends, we were able to implement good and reliable auth. using the Twitter Oauth1
We also had trouble implementing the meme maker, but we were able to make it really good in a short time. Uploading memes through our app was also a challenge, because it was media, and we weren't quite sure how we could implement it using APIv2. We wanted to complete the Chrome extension but couldn't because of our team's inexperience in the domain.
In the backend, we were having issues with the content quality of the automated stream of memes.
We were able to create a community platform with a pretty good launch on ProductHunt. The meme maker was also a challenge that we figure out how to solve. Even though we haven't perfected yet, we are really proud of the automated stream right now. We had to implement a moderation system along with it, but it's done now and works perfectly!
We are also proud of implementing the notifications feature really quickly and effectively.
We learned a lot through this challenge. The importance of branding, community, moderation of content, etc were things we learned for the first time. We had 2 young developers in our team (who couldn't participate in the hackathon because of the rules) who managed to do most of the implementation of the app. We also learnt how to make good PWAs (progressive web apps), and will be launching the app on the google play store (soon!). Since this was our first product, we had no idea how to advertise or launch to product hunt effectively, and even though our launch wasn't perfect with a lot of competition that day, we learnt a lot!
The primary objective of LMFAO.tech is not to make money but provide a nice UI and community, along with some amazing features that make the users’ days 1% better by at least bringing a smile to their faces. However, we realized that there were possible monetisation strategies.
We could show some ads in the app itself - ads that integrate with the user interface. It is also possible to show meme-based ads that the target audience may have a higher chance to click on. With 10,000 users per month, ads could earn us around $100. The total cost of hosting all our infrastructure is about
Another option we thought of was a premium subscription. If we provide enough good features and a better experience for premium users, we could charge about 2$ a month. This would help us cover hosting charges with just 5 premium users.
Although this hackathon took part over a span of months, we would have loved to ship more features that we didn’t have time for. We intend to keep working on this project as a team after the hackathon has ended. The following is a list of some of the extensions we would like to implement next:
- A chrome extension with which users can click on a button on the tweet to post to LMFAO.tech
- Use RedisSearch to quickly search through our community memes
- Integrate with more apps like Reddit and Instagram using our same filter technology to have more content for our users
- We would like to add alternate sign-in methods that would be used for posting memes. However, liking won’t work
-
What is the coins system?
Every day, each user gets to like 50 posts (HAHA coins). For every post they like, they get 1 LMFAO coin and the receiver gets 5 coins.
-
Why can’t I log in with other providers?
Some core functionality of the app - retweeting, liking, and publishing memes require the user to be logged in. This is because the posts are also liked, retweeted and published on twitter (Which is then pulled by our bot)
-
What is the Community tab? 👥
The community tab is one made JUST for memes chosen, created or posted by the members of LMFAO.tech. Unlike the main page, memes aren’t pulled from all across twitter - just ones that tag @LMFAO_tech twitter account.