I finally finished making MemeBoard after periodically working on it over the past 3 months! MemeBoard is an accessible and easy to use fullstack online social platform for posting, sharing, and exploring all kinds of memes. There are many different post interaction features such as voting, commenting, saving, reacting, and sharing, it’s essentially a simple Reddit clone that’s exclusively for memes. You can browse, filter, and search through memes easily by choosing different sorting options and exploring the different tags and collections. It also has social features like following users and customizing your profile, as well as a full-featured realtime chat (mini Discord clone) where you can send content and chat with your friends or interact with MemeBot (which is not an LLM, it’s just a random thing I thought was fun to implement)! The entire website is also fully responsive and functional on all screen sizes with smooth loading and transition animations, and you can toggle between dark and light modes. I got bored of the project halfway through it to work on other stuff, but I ended up coming back more than a month later to finally finish everything and polish it to ship, and the final result is definitely very satisfying and rewarding for me, hopefully you’ll like it :)
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
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!!!
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
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
I’m working on making a fullstack personal blog site mission for Stardance right now, so I decided to submit the demo blog I’m making to test my guide as a project as well, because why not
For the mission, you basically just have to follow along the hopefully not too long or complicated guide and set up a Next.js + MongoDB/Mongoose project for a simple blog site and customize its appearance, so it should be pretty fun
Since customization and creativity are the two most important parts of this mission, I decided to make the demo site kinda boring to prevent people from blindly copying and not building their own thing
In this update, I just set up the project and basic dependencies, made a few pages, added a post submission form, created the basic UI layout, and set up the backend so everything works
You can give the new post a title and add paragraphs to it, and you’ll get redirected to the post page after submitting. Because most of the boilerplate code is already in the guide, making everything work was pretty quick and simple
Hopefully this will be an interesting mission, and I’m pretty excited to see what people build with the guide!
I finally finished building the 8-Bit Jam website for the game development hackathon that I hosted with my friends on 8/22 in Virginia!!! The event was a ton of fun and I learned a lot of stuff from this entire experience. This website is basically the central platform for the entire event, including pages with general information about the hackathon like the homepage, rules, about, schedule, sponsors, and winners pages, the auth/account system for the registrants and judges, the project management and submission site, and the judging portal and results pages for both our in-person and remote judges. I really enjoyed building this project because I literally dedicated maybe 100 hours of my summer break and my blood and sweat, so it was an amazing feeling to see everything come to life myself. I was super busy these past few days especially when school was also starting, so I only had the time to make 2 devlogs documenting this project :(
8-Bit Jam, the game development hackathon I hosted last Saturday, 8/22, in Great Falls, Virginia, is finally over after more than 3 months of hardwork, emailing, worrying, calling, writing, marketing, building, and doing a hella ton of other stuff (I already said this in my last devlog so I won’t be repeat too much)
Most of this massive 7 hour devlog’s time was spent a few days before the actual event when I was rushing and working on the site for 2 hours per day (on top of emailing sponsors, judges, participants, and preparing for the event) getting the project submission, judging, algorithmic weighing, auth, and other workflows ready for production
Finished the project submission form by adding a new field for technology used in the project and tooltips explaining what to put in each field (and some people were still confused during the event )
Judges can now actually submit their ratings for each judging criterion and submit their constructive feedback (at least 30 words) for the project on the judging page
Added an admin result summary page that only my account can access which displays a table with all the projects’ scores for each category, as well as their overall scores. The scores can be sorted by clicking on each table headers (project names are censored in the devlog for privacy reasons because the event took place and the scores are all real from our 100+ ratings from 12 judges)
Took quite a bit of time coming up with and implementing a fair and balanced algorithm to calculate each project’s overall scores for the categories since in-person and remote judges are weighed differently. I felt so smart and stupid at the same time for making the final weird algorithm
Added the winners page after the hackathon showing pictures of winners with their certificate, award, and team name, as well as photo highlights from the event
Added the logo redesign submission page when the event was happening since I still had some free time in the entire 10 hours, where you can upload your 8-Bit Jam logo ideas that show up on my admin summary dashboard page for the sidequest
A ton of stuff happened, this was definitely the most fun I’ve experienced in one day in a very long time, and I’m really excited to finally write a blog post about it to organize my wonderful memories of 8-Bit Jam 🥹
Updated project submission form styling and content
Updated a lot of outdated info across the website both during and after the event
Fixed some project form edge case bugs related to AI usage entries and saving projects
Fixed many other visual and backend bugs to improve overall UI and UX
8-Bit Jam, the game-themed high school hackathon, is finally happening in less than 3 days in Virginia !!!
I’ve been working on hosting this event, including finding venues, getting sponsors, marketing, contacting judges, improving the website, managing registrations, and doing a hella ton of work along with my team (genuinely took up all my free time this entire summer )
I already made the basic website with event information listed and a simple account system a while ago near the end of Flavortown, but this time I’m finishing it for the event since it will be used as the project management and judging platform for our participants and judges
I didn’t plan on devlogging the website on Stardance because I thought it would only take a few hours, but it’s turning out to be quite complicated, so might as well just document everything on here. I’ve been working on this periodically over the past few months and somehow accumulated almost 10 hours, so this devlog will be pretty massive
Participants can now go to their dashboard and start managing their project information by clicking on the manage project options
On the project form, they can fill in their project’s name, description, gameplay instructions, demo/repo links, team name, team members, log their AI debug usage (because generative AI is prohibited 🥹 , only debugging with AI is allowed), and upload a banner for judges to know everything about their project
Judge accounts can see all submitted projects from the dashboard, and clicking on one brings them to the rating page where they can get a comprehensive overview of the project, as well as put their ratings for each criterion and provide constructive feedback in the rubric section (I definitely didn’t take inspo from the Stardance voting page )
I still need to clean up the database and put dynamic time constraints to make sure people don’t cheat the system, submit early/late, or do something else, so figuring out all the edge cases would be a pain
Updated the account auth system so signing in/signing up with either credentials or OAuth actually works. Added judge accounts as well that give them access to the project rating dashboard and individual pages
Updated the website with a lot of new information including our prizes, team members, judges, sponsors, detailed schedule, rules, and a bunch of links for our registration and volunteering forms
Updated backend database schema and types
Updated styling and page layout
Fixed a lot of bugs/outdated info here and there so it’s slightly presentable to the professional audience
I probably did a lot more on the website that I don’t remember, because managing a hackathon website is genuinely very tedious
Added a dedicated page for each project that is its own file browser where you can open/interact with the contents, view their information and metadata, and search, filter, and sort through them so you can better manage and view your projects
Added an option on the project page that opens a modal displaying all your folders, task lists, tasks, and notes grouped into 4 different tabs. Each item is a checkbox so you can select exactly which items to add to or remove from the project
You can also search through each tab’s results and see their names and icons to make finding the right item quick and easy
This seemed like a simple feature to implement but getting to cooperate was a nightmare since each item has its own data type, so organizing the data structure for both the frontend and backend required a lot of annoying unions and conditionals
There is now a top bar in the project browser with the name, type, modified, and created labels which you can click on to sort the contents accordingly
Each item also shows its type and modified & created times, as well as an icon where you can change the item’s emoji directly, making browsing and managing your stuff more convenient
You can also edit the project’s name and description directly by clicking on the page title and text
Updated styling and layout
I procrastinated on this devlog for 2 days and got no work done, so I think this might be a sign for me to take a break from Stardance for a few days since I also need to work on hosting 8-Bit Jam (awesome game jam, if you live near nova plz go register ) and other stuff, so there won’t be new devlogs in a while
Added a project browser/file explorer to the project dashboard where you can search, view, and open projects and folders to browse their content !
I decided to build this file explorer instead of just a simple dashboard because I got bored and wanted to make something different, and it would make more sense to do this for projects since they are essentially just folders
This file explorer is pretty similar to Google Drive and other cloud storage services, you can double click a project or folder to change directory and view its content (tasks, task lists, notes, other folders), and go back/navigate to other levels with navigation breadcrumbs
I thought this would be difficult to implement and would need some kind of breadcrumb library and it turned out to be pretty simple
Only projects are styled and can be opened right now, but folders and other stuff will be added in the next update!
Added a menu option for adding task/note folders to projects. It opens a modal where you can view and select all the projects you’re adding the folder to, and it’ll show up in the project explorer
Added more note management features for editing, deleting, starring, and moving notes, as well as a dashboard for the notes page (similar to the one for tasks)
You can now move notes in/out of different folders by selecting the move option and choosing the folder in the modal popup menu. You can also edit which notes are in a folder by clicking on its edit option, where you can check all the notes you want in a folder
Added a top tool bar to each note page (similar to the tool bar for task lists) with the note’s emoji (clicking it opens the emoji menu where you can choose or clear the icon), name (clicking on it renamed the note), description (clicking on it also makes it editable), and current folder information displayed
The tool bar also has options to upload a custom background image with an upload modal (similar to task lists), choose a custom theme (not implemented yet), star/unstar, or delete after confirming
Added a sidebar for the projects page where you can create, manage, view, add icon, rename, star/unstar, and delete your projects (basically the same as the notes and tasks sidebar)
Since many of the features are basically identical or very similar to tasks/task lists, I just used the existing components and copied and modified some stuff, so all these features were pretty easy and quick to implement
Added recent, starred, and organized by tag sections to the notes dashboard so you can view and manage your notes more easily. You can also customize the dashboard by selecting the sections in the settings panel
Updated schema and types
Updated styling and layout
Fixed background shadow overlay and a few other display/styling issues
I coded for 5 hours yesterday and made a lot of progress but completely forgot to devlog , so this devlog will be a bit longer (as if my usual devlogs aren’t already long enough) to hopefully keep my storytelling good 🥺
Added the notes tab, which is the second major part of MacIdeas (the other being tasks and projects) that shares a basically identical layout with tasks, so I only had to copy a few components, modify some variables, imports, and database operations, and add new schema models and server actions to make note management work properly, though it still took quite a bit of time
Currently only the sidebar is implemented for notes (instead of the actual note taking/editing part), but you can create new notes, rename them, choose their custom emojis, delete them, create and manage folders, and create notes inside folders from there
You can also navigate to each note by clicking on it, but the page is blank for now. Notes share folders with tasks, so folders you make in notes also show up in tasks, and vice versa, although the specific tasks/notes in the folder aren’t displayed on the notes/tasks tab to keep organization simple (hopefully I didn’t phrase this too confusingly , maybe I’ll add an option to show both in settings)
Also added projects (the third major part of MacIdeas), which are basically labels/folders that you can put tasks, task lists, folders, and notes in to conveniently keep everything related to a big project in one place
Right now you can only create projects through the create project button on the sidebar and can’t do anything else with them, since I’ll only start working on projects after I finish notes
Added buttons where you can upload a custom background image or select a color theme (not implemented yet) for each individual task list to make customization even better and personalized!
When you click on the custom background option, an upload modal appears where you can upload a png/jpg/webp <4MB to be the background!
I originally tried using uploadthing since it was the only object storage service I worked with, but I just couldn’t get the event hooks to load or work at all despite copying stuff from my old project and wasting an hour researching , so I decided to settle with Vercel Blobs (because it’s already hosted on Vercel) and it’s actually so much faster and easier to set up/integrate
Some of the components are opaque, so they look kind of weird with a custom background, so I’ll be fixing that soon, but for the most part custom backgrounds actually look decent somehow
Task lists without a custom background have a black overlay shadow that’s out of place, so that has to fixed too
Also added a bunch of random small quality of life features and adjustments that I don’t remember without looking at my commits
Added settings for customizing your personal tasks page dashboard, where you can select which tasks to show and which task filter sections to display on your main tasks page to make it completely customized
You can access the settings modal by clicking on the gear icon on the top right of the tasks page, where you can select the checkboxes that you want to show on the page. You can reset the settings defaults as well by clicking on the reset option and confirming
Dashboard tasks now also show their priority and tags
All your homepage settings and customization are automatically saved to the account backend so the settings are synced across all your devices
Added the “My Day” page that shows all your tasks that either start or due today (in your local timezone, refreshes daily automatically), or you can add custom tasks for the day here without putting it in any task list to help plan out your day better
My Day is essentially a special task list and you can do all the stuff you can do with normal tasks and task lists (browsing, sorting, managing, etc.), and it shows up as its own tab on the left sidebar. I thought this would be hard to implement architecturally, but I just had to add a few fields and conditionals to make it work properly
Added the tags dashboard section where you can view all the tasks with a certain tag
Updated the data fetching logic for the dashboard to be more efficient, optimized, and customized according to the settings
Added a few interactive widgets to the task dashboard showing tasks grouped in different categories so you can browse all your tasks quickly and easily
The different task widgets, each with a different icon, are starred, priority, upcoming, starting soon, recent, and tag tasks. The widgets basically act like filters for all your tasks across all task lists so you don’t need to manually dig through them to find what you’re looking for
You can now add subtasks to your tasks! Subtasks are basically just very simple tasks without any of the fancy features (since that would be annoying to implement and it’s just pretty impractical) that are just smaller steps broken down from the main task
You can add, view, and manage (completing, renaming, or deleting) each task’s subtasks sorted by completion status in the task details panel, and you can see each task’s subtasks directly displayed below the main task
You can also mark subtasks as completed by clicking on the circle on the task item, and the text will be striked through and grayed out
Added a home/task dashboard link to the left sidebar
Updated schema and types
Updated styling and layout
Updated README with more detailed info and specific features
You can now assign an importance priority flag for each task to better keep track of your most important todos and manage/view them more easily with this feature !
You can change the priority of a task by clicking on one of the 4 options in the priority dropdown that appears when you hover over the task. Each priority has a different color (none-transparent, low-green, medium-yellow, high-red) to help distinct them visually. If a task has a priority, the status is permanently stickied on the task so it’s always visible
You can sort and filter tasks by priority as well to automatically group and view your most important tasks
You can customize the new task’s priority by changing the new task input field’s priority dropdown menu. You can also edit a task’s priority in the task details panel
You can now create custom folders to group and organize your task lists by clicking on the create folder option on the task sidebar !
Clicking on the folder toggles the visibility of its task list content, and hovering over it shows an options icon that opens a menu where you can edit, rename, change the folder icon color, or delete the folder
The edit option opens a modal where you can search and select the task lists to add or remove from the folder
The rename option turns the folder name into an input that saves on blur, the color option shows a color picker for the icon color, and the delete option deletes the folder and its task lists after confirmation
You can also directly create new task lists inside a folder by clicking on the add option on the folder. You can move task lists in/out of folders as well by clicking on the move option, which opens a similar modal where you can search and select which folder to move the task to
Drag and drop for moving task lists in/out of folders isn’t implemented yet, because it’s actually quite a challenging thing to do (for me) , but hopefully I’ll have time to try to implement it
You can now add due dates and start dates to tasks to better keep track of them and remind yourself when to stop procrastinating and actually get to work !
When you click on the calendar icon on a task, a modal shows up with 2 fields where you can pick the precise date and time for when the task starts/dues. I used the kind of outdated library Flatpickr for this since I was too lazy to build my own calendar time picker thing
You can also clear/remove the selected time by clicking on the x icon next to the date field. Save the changes by clicking on the save button
You can edit/select the times by clicking on the date fields in the task details panel as well. Start and due dates show up as a small text below the main task on the page so you can easily see when each task is due
Added options to sort tasks by due and start dates so you can see which tasks are coming up soon! Also added a separate section in the filter dropdown for filtering by your own tags to better organize and view your different tasks
The pen edit/rename option on the task list is now finally implemented! Clicking on it turns the task text into an input field that you can edit, and the new name is saved when you click away from it
The tag, calendar, and star icons on the task input field now do something for the new task! Similar to task items, the tag and calendar options both open a modal for you to select the options for the new task, and the star icon marks it as starred. This makes it a lot easier to customize the task before actually adding it to the list
Updated schema and types
Updated styling and UI components
Fixed a legacy dependency (Emoji Mart is unmaintained ) compatibility issue that caused a few previous commits to fail in production build
Not gonna lie I’m pretty proud of the UI and layout all the different options and components actually sort of make MacIdeas look like a legit app
There seems to be an issue with Firefox screenshots that fails to capture the modal’s background blur for the screenshot so it’s kinda weird
Added task tags that you can customize and assign to different task items to better categorize and organize them! You’ll be able to group/sort by tags in the future as well, making browsing and managing tasks even more convenient
When you click on the tag icon while hovering over a task item, the tag modal appears listing all the tags you created, a search bar for the tasks, as well as options to create new tags and save your selection
Each tag on the modal is a checkbox, meaning you can simply check/uncheck the tags to assign them to the task
Clicking on the create option displays an input where you can add a new tag that gets added to the revalidated menu
Each tag also has an icon that opens a menu of options to rename, select an emoji, pick a color, and delete the tag. The rename option turns the tag into an input that you can edit, the emoji option opens the emoji picker (you can clear an existing emoji as well) so you can choose a custom icon for the tag, the color option opens a color picker where you can edit the tag’s background, and the delete option deletes the tag after confirmation
There’s an option on the modal to clear all the currently assigned tags from the task item as well
Up to 3 tags are displayed for each task on the task list page, and you can view all the tags a task has in the details panel (where you can open the tag modal and edit the tags too)
You can now also choose an emoji for each task list by either clicking on the sidebar icon or the top bar icon! It opens an emoji picker with an option to clear the existing emoji as well
You can now browse and filter through tasks to view and manage them more easily with the new sorting and filtering options! You can also finally mark tasks as completed once you finish them
On the task list page tool bar, there’s a search bar that searched through tasks by their name and description, dropdown menus for sorting (by name, created, updated, due date, etc., some aren’t implemented yet), filtering (by starred, completion status, etc.), and ascending/descending display order to help you find and browse tasks more easily !
There’s also a checkbox that toggles the visibility of completed tasks, since they are hidden by default to avoid cluttering the page
You can mark a task as completed by either clicking/checking the circle icon on each task item or selecting the completed checkbox on the task details page
Incomplete and completed tasks are each grouped together regardless of sorting order to avoid confusion
Completed tasks are striked through and grayed out to help with distinction. You can remark them as incomplete again any time by clicking on the icon again
Fixed an annoying container height overflow display layout issue (implementing responsive design on this will be a pain in the butt )
Updated styling and layout
I accidentally closed the window while recording the video so I had to rewrite this entire devlog again from memory , Stardance team please make a save devlog button like with Flavortown 🥺
You can now actually add, view, and manage your tasks in MacIdeas! You can add tasks, view details, edit, star, and delete them by clicking on the task item icons
When you add a task, a task item gets added to the task list page, which when hovered shows icons/buttons to edit, manage tags, change due date, star, or delete the task. There’s also a circle on the left where you can mark the task as completed (none of these buttons work yet other than star and delete )
Clicking on the task item itself opens an animated panel on the side (similar to a lot of todo apps and the Slack profile panel) with input and textarea fields for editing the task and its description, as well as checkboxes to mark/unmark the task as completed or starred
The task item details panel also shows the task’s precise created and updated timestamps, as well as its ID in the backend database (for debugging purposes)
You can save the changes in the details panel by clicking on the save button, which updates and revalidates the task automatically. You can also delete the task item by clicking on the delete button and confirming the warning modal
You can close the details panel by clicking on the same task item again or by clicking on the close button
If a task item is starred, the star icon shows even when you’re not hovering over the task item. You’ll be able to filter and group task items by stars in the future as well
Updated the task list page layout to give more space to the main section and make sure everything’s aligned and positioned nicely without any display/styling issues
) I finally forced myself to come back and finish up/ship my old projects one by one 
(I already said this in my last devlog so I won’t be repeat too much)
)
to cooperate was a nightmare since each item has its own data type, so organizing the data structure for both the frontend and backend required a lot of annoying unions and conditionals
and got no work done, so I think this might be a sign for me to take a break from Stardance for a few days since I also need to work on hosting 
) and other stuff, so there won’t be new devlogs in a while 
!
