Final MemeBoard devlog!

• I finally finished MemeBoard after working on it over the past 3 months! I’ve implemented all the features I originally planned to make, as well as added a ton of other stuff to make the project interesting and fun to use
• I mostly just polished the project in this update, so there isn’t actually anything new other than the simple “m” logo/favicon I added to the nav bar and footer
• Added a top loading bar indicator to show the page is responsive and is actively loading since some pages take a bit of time to fetch data, and I’m too lazy to implement suspense/loading skeleton and all that
• Clicking on things that require the user to be signed in now redirects you to the sign in page so it’s more user friendly and not confusing
• Updated the README to document detailed information, all the features, setup instructions, and everything else about the project
• Fixed an annoying issue where MemeBot didn’t respond at all or took a long time by simply deleting an intentional timeout and the bug was somehow fixed
• Updated styling and layout components

Meme reactions, animations, and polishing

• Added reactions to memes (kind of similar to Reddit awards) so you can now choose an emoji to express what you think about the meme!
• There is a new React button on the meme bar that opens an emoji selection menu that lets you choose your reaction. You can see all the meme’s reactions sorted by number of users listed below the bar and can click on them to switch your reaction or unreact (since you can only react once)
• Reactions are anonymous, so you can only see the number of reactions with your own reaction highlighted
• Added subtle page transition animations to the layout and individual components to make navigation and user interactions a lot smoother and more aesthetically pleasing
• Added a 404 not found page with an occasional stylized glitching effect and buttons to go home or go back
• Added more detailed and dynamically generated OpenGraph metadata to improve SEO
• Updated backend Prisma schema and migrated database
• Updated types and styling
• Fixed a few display, light mode, and responsive design bugs
• MemeBoard is almost finished, it’ll probably be ready to ship after one final devlog and some polishing touches!!!

Light mode toggle

• Added a button on the nav bar that toggles the site’s entire appearance between dark and light mode to improve its customizability and accessibility
• Because every component has a default color transition, switching between the 2 modes has a smooth UI transition instead of flashing to the other color instantly
• I had to set up the theme provider and manually add the light mode Tailwind classes and the dark mode prefix for all the colors in every page and component, so this took quite a long time but the result was worth it, both modes look pretty consistent and visually appealing

MemeBoard is back!!!

• I’ve been a lazy bum this entire summer and didn’t finish a single one of my more serious projects on Stardance before losing interest and moving on to a new idea, but now that the event is ending in a month (nooo ) I finally forced myself to come back and finish up/ship my old projects one by one
• School just started so I’ll hopefully still have enough time to ship most of my projects before October. Since no one has used MemeBoard at all in over 2 months, I had to upgrade some packages, resetup some deployment stuff, and reactivate the databases for everything to function normally
• I also spent some time getting familiar with the codebase again, so I didn’t make a lot of changes this update. I added a few quality of life features like sharing/reporting comments, homepage meme and chat sections, and user search for finding people to follow
• When you click on share for a comment, the share modal pops up listing all your friends that you can select to send the comment and a message to, as well as options to copy the link and to report it
• Comments show up as embedded text with the user and like count displayed, and clicking on it takes you to its location on the original meme page for easy viewing (definitely not stolen from TikTok )
• When you click on add user on the chat page, it shows a modal where you can use the API to search for people to add as friends, making chatting and sharing memes more convenient
• Added recent, top, all time, friend memes, and recent chat sections to the homepage to make navigating the platform and browsing memes easier
• Added call to action buttons on the homepage hero to make using the site more intuitive
• Updated content and styling
• Updated MemeBot behavior
• Updated README
• Fixed chat deployment issue
• Did some miscellaneous stuff/improvements/fixes that I forgot

More collections features

• You can now search, sort, and filter collections on the collections page to browse and explore public collections other people created! You can filter your friends’ and your own collections to make managing them easier
• You can now add an optional description describing what your collection is about, either on the add or edit collection modal
• You can now change the visibility of your collection to be either public or private, where public collections are displayed on your profile and the collections page for everyone to see, and only you can see your own private collections
• Added a new private collections section on your profile that only you can see it
• Added a create collection modal that shows up when you click on the button on the collections page to make creating collections easier
• Added a create tag modal that shows up when you click on the button on the tags page, but unlike collections you can only put the name of the tag since that’s the only thing a tag has
• Updated schema and types
• Updated styling and SEO

MemeBot & bug fixes

• Added MemeBot to everyone’s chat, so even if you haven’t friended someone on the platform you can still try out all the chat features since MemeBot also sends messages in realtime
• MemeBot isn’t actually another AI chatbot or anything, it just responds with a random hardcoded string message (very intelligent, i know) from the backend whenever a user sends it a message after a certain delay to simulate realtime chatting
• Since MemeBot isn’t actually a user, I had to modify the chatting system quite a bit and put a lot of extra conditionals and logic to ensure it works properly for both MemeBot and real users, and that was quite annoying to figure out
• Fixed an annoying caching bug where you had to refresh the entire chat page for realtime interactions to work properly when chatting with someone for the first time, otherwise the chat just froze. This took a long time to fix, but the UX is finally smooth and works well
• Fixed some issues of the chat related to auth and not being logged in
• Updated styling

Random quality of life features

• I think I’m almost finished with MemeBoard, so now I’m just making random small features that I skipped over earlier
• Added realtime chat message previews for each of your chats that shows the last message and who sent it on the left sidebar so it feels more like Discord and Slack
• Added a tag filtering dropdown on the Memes page where you can see all the tags, search for them, and choose one to see all the memes labeled with that tag. This makes it a lot easier to browse, filter, and find similar memes
• Added an options menu button to the tag page (that only shows if you’re the one who made the tag) similar to the button I added to a bunch of other pages. When clicked, it shows a menu with just a delete option that deletes the tag and removes its label from all the memes after a confirmation modal
• Added both dynamically generated SEO and static SEO to some pages that didn’t have it
• Updated styling and navigation

Collection features & cleanup

• Similar to the meme page, when you view the page of a collection you created, there is an options icon that when clicked, opens a menu where you can edit or delete the collection
• If you press on edit, an edit modal pops up where you can edit the name and select which memes should be in the collection
• If you press on delete, a warning modal shows up, and if you press delete the collection will be permanently deleted
• Added a search bar on the main collections page where you can search for your own or other people’s collections
• Added the collections tab to the main nav bar and the footer to improve navigation
• You can now add a short public about me bio on your profile by clicking on the edit profile button that shows an input edit modal
• When you hover over your own messages, a delete button now shows up that lets you delete the message for both of you after a confirmation modal just like all the other delete functionalities
• You can undo the deletion by pressing on the undo button that shows up, which restores the message for both of you
• I spent most of my time on MemeBoard developing while logged in, so I wasn’t aware most of my pages were completely broken and returning errors if someone visited them while not being logged in, so I implemented a ton of conditionals and permission stuff for auth to make sure every page works properly or redirects to the login page
• When you’re not logged in, you can still use the app and browse memes, it’s just that a lot of features are unavailable
• Updated backend schema and types
• Updated styling
• Fixed a few bugs and issues caused by auth

Responsive design

• Finally added responsive design to all pages on the platform so MemeBoard works properly and the layout stays organized and visually appealing for all screen sizes!
• Added a menu button that shows up when the screen size is smaller than a certain width, which when clicked opens a sidebar that slides in from the left containing all the links. This declutters the layout while improving the UX of the app
• Added a search bar to the tags page where you can search all the tags people created and browse memes more easily
• Refactored code for some UI elements to make everything more optimized and clean
• Fixed chat layout UI breaking with excessively long messages
• Added some minor styling adjustments

Editing/deleting posts & more chat features!

• Added an option button on the top right of the meme pages you posted which when clicked displays a menu that lets you edit or delete the post
• Clicking on the edit option takes you to a dedicated post editing page where you can edit the title, tags, description, and source link and reupload the image of the meme (metadata, comments, and everything else remains unchanged), and clicking save takes you back to the newly edited page
• Clicking on the delete option shows a confirmation modal/dialog warning you, and if you press delete all the meme’s data will be permanently deleted and you get redirected back to the memes pages
• A similar option menu button is also added to the top right corner of your comment, where you can edit (a modal with an edit input field and buttons shows up) or delete (also has a confirmation dialog) the comment
• You can now also edit your own messages (only the text and not what you’re replying or the embedded meme), when you click on the edit message button a modal with an edit input pops up, and the edited
  message is updated in realtime
• You can now react to both yours or your friends messages to express what you think! When you click on the react button an emoji menu shows up where you can browse for the emoji you want
• Reactions and their counters update in realtime and you can remove the reaction by clicking on it again (the feature works exactly how all messaging apps’ reactions work)
• After you press on the share meme button when sharing to a friend, the button now becomes a link that takes you to the chat where you can see the message
• Updated schema and types
• Updated styling
• I kinda forgot to make more devlogs again, so this one is another massive wall of text covering a ton of different features. The video is also 2 minutes so I had to compress it to upload 😭 I promise I’ll try to keep future devlogs shorter and more focused :)

Meme sharing and more chat features!

• I sort of got carried away with this chat feature thing so MemeBoard is now a weird combination of Reddit and Discord instead of the original meme platform I planned it to be
• When you click on the share button on a meme page and open the sharing modal, you can now see all your friends listed and you can select who to send the meme to, as well as an optional message
• This actually sends a message to the chat with your friend, and it shows up as an embedded preview meme with its creator, title, image, and number of likes/comments/shares displayed
• Clicking on the embed preview takes you to the actual meme page
• Added chat replies so when you click on the reply button next to your friend’s message, a box shows up above the input field showing the message you’re currently replying to
• When you send the message, a reply bar/message preview similar to Discord’s shows up above the message, and clicking on it scrolls the page to the original message and briefly highlights it, similar to Discord’s
• Messages are grouped together so message header info (sender, time, profile image…) only shows under certain circumstances (similar to Discord) for a cleaner and better UI
• Refactored how messages and their components are rendered/structured for better optimization and performance
• Added an API route for client components to fetch meme data from the database
• Updated schema and types
• Updated the styling of different chat pages
• I forgot to make devlogs, so this devlog is pretty long
• Sorry again for the terrible layout in the video, my lazy bum hasn’t started on responsive styling yet, so the windows are compressed

Massive update: chat

• Added realtime chat where you can send and receive text messages with almost no latency to/from your friends on MemeBoard!
• The base layout of all the chat pages has a sidebar of the left that displays all your friends, and clicking on them takes you to the different direct message channels
• On each chat channel page, you can see your friend’s profile picture, username, and number of followers/following at the top, similar to TikTok’s chat
• Your friend’s messages show up on the left while yours are highlighted and on the right, similar to texts, and each message has a timestamp
• Integrated a Redis database for quick message retrieval, caching, and ease of use for the Upstash realtime library that uses Web Socket under the hood to push realtime updates/events to send and update messages in realtime
• I already made a much simpler chat app but with a slightly different backend stack a while ago, so it wasn’t that difficult rewriting everything in Next.js and adding additional features
• There are actually a lot of considerations and logic that go into making a chat app that you normally wouldn’t think of unless building your own chat, so this was an interesting and fun experience coming up with solutions for unexpected problems
• Updated schema and types
• I’ll actually optimize the site and implement responsive design after the main app is finished, so the current layout looks terrible on small screens and I apologize for the terrible layout in the video

Searching, sorting, and filtering memes

• Added a search bar, a sorting dropdown, a filtering by time and creator dropdown, a tag dropdown (doesn’t work yet, coming soon), and a number of items dropdown on the explore memes page to make finding and browsing new memes a lot more easier
• The search bar searches by the meme’s title and only searches when you submit the form to improve performance
• You can sort by best, which sorts by positive/negative vote ratio, top, which sorts by raw upvote count, and new, which sorts by recency
• You can filter by time range (now, day, week, and all), memes your friends posted, and memes you posted
• You can choose to show 5, 10, 25, or 50 memes at a time
• Added a custom dropdown component for the dropdowns with nice UX
• MemeBoard is now even closer to being a Reddit clone, I took a lot of inspiration from its features except my sorting/filtering is mainly frontend, which is not good practice but I’m too lazy to implement API endpoints for fetching memes
• Refactored the upvoting/downvoting component and logic so it directly communicates with the backend rather than using a hook to make it more modular and performant
• Meme cards now show the voting component and vote count
• I’m almost finished with the meme aspect of this project, the next big part is the realtime chat and sharing with friends and MemeBoard will be finished!
• I should probably stop using aura monster as the test meme, it’s starting to become corny :(

Comment likes and replies

• You can now like meme comments (and comment replies since they’re counted as normal comments) by clicking on the heart icon on each comment
• You can also see how many people liked the comment
• When you click on the reply option on a comment, an input field for your reply and post/cancel buttons show up for you to post your reply
• The replies show up as nested inside their parent comments to show the discussion flow, and you can technically thread replies infinite levels deep
• Spent a ton of time trying to figure out how to generate the threaded tree structure, tried recursion and loops and ended up using hashmaps and pointers to nest parent/child comments (I was not locked in while making the algorithm because of the finals I was going to have the next day)
• Updated schema and styling

Collection pages, sharing, and reporting

• Added a main collection tab that displays all the meme collections users created (not just yours), and you can access the page with a header link on the profile page
• Each collection card either shows a gray rectangle if there’s no meme or a stack of images with a preview image on top if there’s multiple memes
• When you click on a collection, it takes you to its own page where its name, creator, and all the memes are displayed
• Collections a user created are also displayed on their profile page in a new section
• The share button shows a sharing modal where you can either share the meme to your friends (doesn’t work yet, will be integrated with chat), copy the link and send it somewhere else, or report it
• If you choose report or click on the report option, another modal shows up where you can select report reasons and provide additional feedback
• Added new schemas and types
• Updated navigation and styling

Additions & Changes

• Added saving memes to collections so other than voting you can curate, organize, and categorize your own custom lists of memes!
• When you click on the save option, a modal pops up showing collections you created and a button that lets you add new collections, as well as a search bar for the collections
• You can also see how many memes are currently saved in the selections
• When you click save, the option shows the saved state and displays how many collections the meme is saved in
• You can only save memes to collections you created
• Added a new user profile section for collections, but it currently doesn’t show anything yet
• Updated schema and types and learned some new relational database and Prisma concepts

Additions & Changes

• Added a voting system for memes (sort of like a rip off Reddit) where you can upvote, downvote, or remove your vote by clicking on the arrows
• You can also see the total vote count of the meme in real time to see its popularity
• The upvote/downvote buttons are displayed below the meme, along with the save and share buttons that will work soon
• Added an optional original source field for posting a meme to link where you got the original image from
• A link icon now shows up on the meme page if you provided the source link so people can see the original post and author
• Updated styling and navigation
• Updated schema and types

Additions & Changes

• When you click on a user’s followers and following on their profile page, a new modal pops up with 2 tabs, followers and following, that shows the accounts they’re currently following/being followed
• There’s also a search bar that lets you search through the listed users to find people more easily and makes it feel a lot more like Instagram
• If you are following someone who follows you back (mutual follows), you are automatically added as friends, which shows up as a section on the main profile display area
• You will be able to send messages through a real-time chat with friends in the future!
• Added the chat tab that’s just a placeholder page for now
• Added dynamic SEO
• Updated navigation and styling

Additions & Changes

• You can now edit your account information and customize your own profile by clicking on the edit profile button on the page, which shows a edit form modal!
• You can change your display name to anything you want, your username to anything that’s not already taken (since it’s used as the param account identifier), and upload a custom profile image (PNG, JPG, and GIF are all accepted)
• You can also follow and unfollow other users by clicking on the follow button on their profile page, making the platform feel more like a social media/community
• If you and another account are following each other mutually, you will become friends and unlock additional features (coming soon!)
• Refactored some code to make everything more modular and optimized

Additions and Changes

• Added the tags tab which displays all the tags created on the platform, and each tag has a number showing the number of memes it has and takes you to its own page with its memes displayed
• Added individual tag pages that shows all the memes categorized under a tag and the user that created it
• Added the meme card component that shows the meme’s title, author, upload date, and image, and clicking on it takes you to the meme page
• Features like filtering, sorting, and searching for memes for a specific tag are coming soon!
• Added user pages that takes in a user’s username as the param and displays the account’s memes and other data
• If you’re viewing your own profile, you can see options for signing out, deleting the account (with a confirmation dialog), and editing the profile
• Username is used as param instead of user id to be more human friendly
• Added static and dynamically generated SEO for the new pages
• Updated the navigation bar and footer links
• Removed the profile page since it got replaced by the user page

Additions & Changes

• This is a pretty big update, so a lot of stuff has been added and improved :)
• Added comments so signed in users can post plaintext comments using the comment field under every meme
• Comment threading and liking will be added soon to milk more hours improve community engagement features
• You can also see other people’s comments, see when it’s posted, and go to their profile
• A signin button is shown instead of the comment box if you’re not signed in
• Improved tags a lot, you can now add custom tags and use either the main ones (marked by a star icon) or custom tags other people or you created to make categorization easier
• Added input validation and required fields for posting memes to prevent errors
• Added and updated a lot of models and types to make everything more type safe and complete
• Updated navigation and styling
• This is my 5th time trying to post this devlog, I had to compress the video hopefully it works this time

Additions & Changes

• Added file storage/upload and made the backend for posting a meme work so you can now actually upload an image, give it a name and description, assign it tags, and post it as its own public page!
• Learned how to work with UploadThing and used it as MemeBoard’s file storage service
• Added the meme page that fetches and shows all the meme’s data as well as who posted it, with a link to their profile (to be implemented)
• The meme page also generates SEO dynamically
• Added the memes page that’s just a placeholder for now where you will be able to browse through and explore all the memes
• Added a meme Prisma model with a user relation as well as custom types
• Improved navigation, redirects, and overall user experience
• Happy birthday daniel (I’m not a larper I watched the entirety of Peak:Zero)

Additions & Changes

• Added a post page with a beautiful form where you can input a title, select tags, upload PNG, JPG, or GIF, and provide a description for your meme
• You can search for tags in the custom tag selection modal that pops up when you click on the select tags button or one of the tags
• Added the meme type and updated some other types and auth stuff
• Added a simple footer with credits, navigation links, and the GitHub link
• The post page doesn’t work yet, it’s just a pretty frontend component (for now)
• Updated styling
• My future devlogs will all follow this bullet list format (hopefully the markdown layout turns out alright) to improve readability and storytelling :)

Basically finished the entire auth system with the Better Auth library, and users can now both sign in and sign up with credentials (email, username, display name, and password) or from a social provider using OAuth (Google and GitHub). I haven’t set up this library or the OAuth services in quite a while so I had to spend some time refiguring everything out and configuring all the different stuff. A username is also automatically assigned if you sign up with email. Added a backend and connected the Neon Postgres database as well.

My first devlog on Stardance!!! Time to work my butt off this entire summer :) I’m making this meme exploring/sharing platform where you can browse the most popular memes or upload them yourself. I set up the basic Next.js project and the dependencies, added some pages and components, and made a pretty nice login/signup form (nothing works right now). Also deployed the site on Vercel.