Stardance is ending in 7 days , and I’ve been coming back to finish some of my abandoned temporarily paused projects from a few months ago, and now it’s time for me to finally complete and ship my final project on Stardance: Codeliver!!!
I already logged a few hours before moving on from Codeliver to another project and abandoning it for like 3 months, but I can’t remember exactly what I did so this devlog will only cover the 2 hours I logged recently
In this update, I dockerized the entire application into a docker compose of 2 containers, express.js backend and Next.js frontend, and configured the environment variables, ports, and build and setup instructions to make the fullstack app a lot easier to deploy or self host in case anyone wants to run their own instance of Codeliver
Added complete support for light mode for the entire platform, which is basically my method of refamiliarizing myself with an abandoned code base after a long time since this basically means going through the entire app again to modify every file and component’s styling/Tailwind classes
Added message replies, where you can hover over a message and click on the reply button, and if a message is replying to another message it’ll show a thread linking back and highlighting the original message when clicked (similar to Discord’s reply)
Fixed some display issues and permission bugs
Hopefully I can quickly finish Codeliver (there are still a TON of stuff to be done before it’s functional and shippable ) and ship it in time, or maybe even have time to ship another project(?), especially since I’m also doing right now and am super busy with school…
I finally finished MacForms, an extensive, customizable, and feature-rich form creation tool for you to create surveys, forms, and quizzes with question options like multiple choice, multiple select, short answer, long answer, and more! To use it, simply sign in to a MacWeb account or select guest mode (which hopefully reduces voting friction). There are also a lot of different form settings for presentation, response management, quiz accuracy, visibility, and public/private forms, as well as options to invite collaborators to work on and manage the form together. You can browse other people’s forms and search your own forms as well. You can also visualize and view response statistics and individual responses with graphs and question response lists. The entire platform supports light/dark mode, smooth animations and transition effects, responsive design, accessibility, and SEO, as well as other quality of life improvements that hopefully make the website’s UI and UX more intuitive and user friendly. The codebase is surprisingly complex (and poorly organized :( , but I somehow managed to make everything work as expected. I really had a lot of fun working on and trying out this project myself, so hopefully yall will like it too :)
I finally finished all the features, customization, and everything else I planned to implement for MacForms after working (but mostly procrastinating) on it for more than 3 months !
I have no clue why this wasn’t done earlier, but I added a multiple select option for multiple choice questions to allow respondents to select multiple options (which also works with quizzes and other edge cases)
Similarly, I also added an option to mark free response/text questions as having a long answer to render a textarea instead of the normal input field for more customization
I already added most of these features while planning out the types and schemas, but somehow never implemented it, so it was kind of confusing but I was able to create them more quickly and easily that I’d expected
Added guest mode so yall can actually try out the form engine without signing up (is that low enough friction for you guys )
Updated styling and readme
Polished some other stuff for shipping!
I’ve already wasted so much of Stardance’s extension not shipping any of my projects , so I panicked when I realized there was only 10 days left and forced myself to actually get to work and finish this project, hopefully you’ll enjoy and like it as much as I do :)
As a sysadmin for my school, I’m responsible for making, updating, and maintaining some of the school’s websites, including the Q Lab website, which has projects, information, and other stuff about our quantum physics senior research lab!
Some alumni of the lab already made most of the website, so in this update I just focused on adding some quality of life features and applying a redesign
Added new darker colors and some UI improvements, as well as new icons, logos, layouts, and content throughout the platform
Added project keywords and search to better explore and browse through different projects
Added options to delete and edit project assets
Fixed a few bugs related to the UI and updated the admin panel
Note that some of the admin/management features require our internal auth, but most of the stuff is publicly viewable
Since the entire website was written in Django (one of my least favorite frameworks) like 6 years ago, I spent a ton of time setting up a local dev env because of compatibility issues and refamiliarizing myself with the framework again, so I thought why not also put it on stardance now that I’ve accumulated quite some hours
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