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.