Added a landing page for non logged in users to learn more about the app
The hero section has a title, description, and two call to action buttons for logging in and reading more information
There are also a few sections on the landing page that just display placeholder images and text for now since the app doesn’t actually exist yet
Added an animated faq component at the bottom that’s a collapsible accordion
Added a login page with a form where you can either sign up, sign in with email/password, or sign in with OAuth providers (Google and GitHub coming soon)
While working on my previous project MemeBoard, I got a bit too addicted with the realtime chat part of the app and overengineered it way too much, so I decided to build an app focused on chatting and sharing code with other people
This is also an excellent opportunity for me to learn more about WebSockets, Socket.io, Node, and Linux server configuration/management since I’m planning to host this app on a dedicated DigitalOcean VM instead of the serverless Vercel
In this update, I set up the basic project structure with an empty backend directory and a frontend directory for the Next.js frontend, installed the necessary dependencies, and set up the Prisma database for auth
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
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
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
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
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
I made Slowfetch, a simple, lightweight, and fast (slow) Fastfetch/Neofetch alternative for Linux operating systems that fetches and displays a list of organized useful system and hardware information and runtime metrics, as well as an ASCII logo of the distro. This is my first Rust project, and I didn't have any ideas for what to build since I barely knew anything, but through this project, I gained a ton of experience working with Rust basics, interacting with the Linux file system, using Cargo and Rust libraries, and deploying the program as a working executable release on GitHub. I'm really proud of how everything turned out, especially the ASCII logos and the colors, that the program looks very polished and functional. Building this project also taught me a lot about how the kernel and command line programs actually function under the hood.
Slowfetch is now finally finished; the logos are colored and print out properly and all the statistics are organized and displayed accurately!
Thanks to @crushedflea’s contribution, the ASCII logo constants are now merged with the main file and a few other display bugs are fixed
Adding a “–censor” or the shorthand “-c” flag now censors the public IP
Added a GitHub release so you can actually download and use Slowfetch as an executable program!
Updated the README so it’s more informative and contains instructions for setting up the development environment for Slowfetch or downloading the GitHub release
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 :)
Added a disk storage usage list item that has a similar format as the memory display (used, total, and percentage) and correctly converts to the most appropriate unit. This was a lot harder to set up than fetching the memory since I had to use an external library and do some extra stuff
Added private and public IPs, current locale, and current battery percentage
Added new correctly colored and sized ASCII style logos for Ubuntu and Fedora. I just started VMs for these, copied Fastfetch’s output logos, colored them and slightly modified them to better fit Slowfetch
Added the color blocks from Fastfetch that render 10 different colors at the bottom of the list so you can see the colors your monitor displays
Slowfetch now automatically detects the current distro and renders the correct ASCII logo, and if it isn’t Debian, Arch, Fedora, or Ubuntu the default Linux logo is the fallback (since Slowfetch only supports Linux)
Cleaned up the colors and reorganized the list items into sections for better organization and readability
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
Added the iconic ASCII distro logos from fastfetch/neofetch so you can better flex your operating system and nerdiness!
Currently only Arch, Debian, and Linux ASCII logos are added with the symbols mostly correctly color coded
I had to edit the logos quite a bit instead of just copying them from fastfetch’s output since they need to fit in my number of lines and keep the correct formatting
Slowfetch can’t detect the distro and render the correct logo yet, so right now you can only pass it as a flag (with either arch, debian, or linux) to see the output, otherwise it doesn’t show a logo
Added some placeholder list items (ip, locale, display), will be implemented soon
I decided to only make Slowfetch support the major 4 distros I mentioned above since it’s too much of a pain (is it even possible?) to access Windows and macOS’ info
Slowfetch now displays the current memory usage out of the device’s total RAM and shows the usage percentage. It also converts the unit automatically; GB is the default and only uses MB/KB if current usage is less than 500 MB/KB
It also reads the CPU’s info, model, and specifications from the /proc directory and displays the information alongside memory
Current shell and the number of packages installed on the OS are also displayed using some string manipulation
Getting the GPU info is a bit trickier since it has to run the lspci command, capture its output, and filter through it to get the exact name of the chip
Added a README to better document the script’s features
I’m starting a new project, Slowfetch, which is basically a simple CLI fastfetch/neofetch copy that reads system files and runtime metrics and outputs them in an organized and visually appealing list
This is my first Rust project too, so I spent a good chunk of this time learning and getting familiar with its basic concepts, Cargo, the documentation, and how it actually works
I’m currently only running it in a Debian VM for testing (it will be available for other distros and Windows/macOS in the future), so I also spent some time setting up VS Code’s remote ssh and installing packages in the VM
Right now it only reads username, hostname, and OS info from the /etc directory and runtime metrics from /proc and outputs a simple list that’s somewhat color coded
Rust is actually not as hard as I thought it would be once I got kinda used to it, so I’m pretty excited to implement a ton of other features for this project!
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
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 :(
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)
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 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
