You can now also see, select, and manage each individual response to view in detail instead of only seeing summary graphs/tables of all the responses combined
There’s a new dropdown on the form responses page where you can either view the summary stats/answers of all responses (default), or select every individual response to view its answer to each question, submission/edit date and time, accuracy (if the form is a quiz), as well as an option to delete the response after confirmation to make viewing responses easier and more useful
If you make your form a quiz and designate certain questions as having correct answers, you can now finally select one or multiple options to all be correct for each question! This took a surprisingly long time since I had to fix a lot of bugs based on the old system
Added sorting, filtering, and ordering dropdowns and options to the public form browse page to make finding and viewing different forms a lot easier
I just realized there are a few bugs in prod while recording the video, so looks like more fun bug fixing in the next devlog
Updated types and backend schemas to accept the new options
Updated styling and colors
I am now dedicating most of my time on (really amazing event btw), so I can only work on trying to finish and ship my Stardance projects on the little time I have on weekends, so hopefully I’ll be able to ship MacForms this weekend and finally finish my other Stardance projects before it ends
Added the Browse tab where you can see all the published public forms that other people made on MacForms! You can explore all the different forms easily with the search bar
Finally added a nav search bar that actually works (instead of the old placeholder) by querying the new API endpoint for either your own forms or other people’s public forms so you can access everything faster and more easily
Search results are matched by both title and description to be more useful, and your own forms take you directly to the edit page while others’ forms take you to the form filling page
Added a bunch of smooth animations and transition effects for page loads, interactions, and search/filter results to improve user experience and interactivity
Added responsive design on all the pages and components so MacForms is accessible and functional on all screen sizes
Added feature description sections, icons, and buttons on the home landing page
I have no idea why this was even a thing before, but now you can actually access the form pages and fill out the forms without being logged in Apparently my thought all get requests had to pass the auth gate or something, but now it’s fixed
Removed the Settings tab (not form settings), because I couldn’t figure out anything to put there since I already have account settings on MacWeb, a separate form settings tab, and a dark/light mode toggle
After taking a break from working on MacForms for 2 months to work on other projects, prepare for school, and do a lot of other stuff, I’m finally back to developing this project and getting it ready to ship before Stardance ends in 9 days! (plz extend the end date )
In this pretty massive devlog, I added a new settings tab to the form editing page where you can customize the published form’s presentation and many other options here are the settings I implemented, there might be other important stuff I forgot:
whether to shuffle questions randomly
whether to shuffle the multiple choice options for each question
a custom background color for the top banner
allow respondents to submit another response
allow respondents to edit their submitted responses
Because I couldn’t figure out a way (if there is one) to implement the last 2 without using accounts or cookies, if a form has either of the 2 enabled, you’ll need to sign in first to fill out the form
Added a light/dark mode toggle option to the nav user dropdown menu for you to easily customize the site’s appearance and switch between light and dark modes
Since I had to manually go through basically every component and page of the entire platform to modify the elements’ Tailwind classes for this, it also gave me a chance to refresh my memory of the project’s structure and how it works because I was gone for so long
Going through all the files and testing the 2 modes was a long and tedious process, but the result turned out pretty well, both are consistent and visually appealing, and there’s also a smooth color transition
Added a top loading indicator bar to improve the UX since some pages take a bit to load and the site may look unresponsive without the loading bar
Fixed a few math bugs with 0s and NaNs and display bugs with the colors, layout, placeholder, and other styling
Because Stardance is ending so soon and because of my procrastination and laziness, I’m going to have to cut a lot of the originally planned features before shipping since I have another big project to ship, so hopefully I can finish some last few features and polish MacForms and ship it soon!
MacIdeas is a fullstack online platform for managing, organizing, and keeping track of your work, including tasks, notes, and projects! Now, before you think this is just another generic boring todo list app and give me a 1 star in originality…, well, it kind of is a todo app, but with a ton of many different features, customization, and settings, as well as notes with a complete, functional rich text editor, folders for convenient organization, and projects for organizing your different tasks, notes, folders, and everything else into manageable groups that you can easily browse through. You can edit and assign tasks priorities, due/start dates, tags, subtasks, projects, folders, links, completion, star them, and view all the info from the details panel. There are also features like search, sort, filter, tags, views, star, emojis, and other options that make browsing, navigating, and finding items a lot easier and more efficient. To make the website accessible to everyone, MacIdeas has smooth transitions and animations, fully supports both dark and light modes (and your own background images or colors), as well as responsive design for (nearly) all screen sizes, and complete SEO metadata for each page. All you need to do is to sign in with MacWeb, the central platform for my projects’ auth and account info (since MacIdeas is one of its many apps), and you’ll be redirected back and have access to try out all those features! It has everything you would expect from a real task manager and text editor, so hopefully you’ll like my project :)
MacIdeas is finally finished and ready to ship! In this last massive devlog, I added a few new quality of life features, did a ton of general/styling/auth bug fixes, and polished the entire project !
Added note content persistence, meaning you can actually save each note’s content to your account data, including its text, formatting, and everything. Autosave automatically does this every 30 seconds, but you can also manually save with ctrl+s or by pressing the save button
Added a few new editor features from Tiptap for typography and general formatting to make note taking more powerful and complete
You can now select custom background colors (along with custom backdrop images) to customize the appearance of each task list and note page !
The nav search had been there doing nothing ever since the first devlog , so I finally added a powerful search bar to the nav bar that uses a new API endpoint to search through all the information in all your task lists, tasks, notes, projects, and folders and displays the results as a list of links for convenient browsing and navigation!
Added section descriptions and icons for the major features on the homepage
Updated styling, content, code, and layout
Updated the README with a demo screenshot and updated info about features
Fixed a lot of bugs related to general usage, empty user data, styling issues with modals, auth redirect, and many other things I don’t want to remember to improve the overall user experience
I took a one week break in this last stretch, so there was probably other stuff I did that I forgot, so hopefully my storytelling isn’t that bad
Added a complete, feature-rich, and easy to use rich text editor for creating and editing your notes! This means you can now actually take notes with features like text formatting, links, headings, lists, inline components, and a lot of other features you would expect from tools like Google Docs
There is a top tool bar with a ton of options, buttons, and dropdowns organized into different functional sections (I definitely did not just copy GDocs ) to format/edit/modify your current content selection easily
Most of the features support keyboard shortcuts (because of Tiptap), which you can see by hovering over the option and reading its tooltip
I tried making my own web based rich text editor from scratch before, and it turned out to be a nightmare of dom manipulation and other headaches, so this time I decided to just use the library Tiptap, which itself is based on the library ProseMirror, to handle this pain in the butt
Since Tiptap is completely headless, I still spent a lot of time going through its docs, installing useful extensions, learning their commands, and building, testing, and tweaking all the features to make everything work smoothly
I don’t know why I’ve been neglecting actually adding notes for so long (before each note was just a blank page saying “Untitled note” that you couldn’t even edit ), but this actually turned out to be super fun to implement and the result was very rewarding
Note saving doesn’t actually work yet (despite the fake “Note saved” autosave message ) since there are still some things about the editor to fix, but hopefully that’ll be implemented soon and MacIdeas will be almost ready to ship!
The text editor also works with light mode, and I also updated some styling to improve the UI
The mode option in the nav user menu now 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, as well as accounting for all most of the display color edge cases, so this took quite a long time but the result was worth it, both modes look pretty consistent and visually appealing
I am finally back to developing MacIdeas after taking a one month break, so I spent some time familiarizing myself with the codebase again. Hopefully this time I’ll be able to finish and ship it soon!
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
(really amazing event btw), so I can only work on trying to finish and ship my Stardance projects on the little time I have on weekends, so hopefully I’ll be able to ship MacForms this weekend and finally finish my other Stardance projects before it ends 
thought all get requests had to pass the auth gate or something, but now it’s fixed 
)
and because of my procrastination and laziness, I’m going to have to cut a lot of the originally planned features before shipping since I have another big project to ship, so hopefully I can finish some last few features and polish MacForms and ship it soon!
) to format/edit/modify your current content selection easily
(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 other stuff, so there won’t be new devlogs in a while 
