MacForms
- 13 Devlogs
- 37 Total hours
MacForms is a simple and easy to use form creation tool with a ton of cool features and customization!
Individual responses and form options
- 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 
A bunch of small additions and changes!
- 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
- Updated styling and layout
- Fixed a few display bugs
MacForms is back: form settings and light mode!
- 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!
Publish & share form
- You can now publish and share your forms for the rest of the world to see and fill out! Clicking on the publish button on the tool bar now opens a modal where you can either publish/unpublish the form or copy the link and send it to people
- If the form is already published, you can see its public link and an option to shorten it. Shortening it creates a unique 8-digit shortcut id for the form that redirects you to the main form (I’m planning on shortening it even more by buying a cool short domain or something, but that’s probably not gonna happen any time soon)
- You can also unpublish the form after a confirmation warning by clicking on the unpublish button
- If the form hasn’t been published yet, you can publish it by clicking on the publish button (in case this isn’t already obvious )
- Updated some permissions so collaborators can also manage the form’s publication visibility status (instead of only the owner)
- Updated schema and types
Score distribution & autosave
- Added a quiz results summary section on the responses tab that shows some useful statistics about the scores as well as a histogram showing the score distribution if your form is a quiz
- It dynamically calculates scores based on the latest updated quiz, then organizes them and calculates their mean, median, min, and max in percentages
- It also renders a custom histogram with bins of 10 ranging from 0 to 100 so you can visualize how well your respondents did in one glance (server rendered + no Chart.js or external libraries = almost instantaneous load time)
- The histogram also shows the percentages of scores, and you can see how many responses are in each bin by hovering over the bar
- There’s also a view scores button that displays a modal showing each individual score
- Added autosave for editing forms that autosaves the entire form in the background every minute without revalidating the frontend to ensure smooth UX. The bar also shows the autosave status for a few seconds telling you it autosaved
- Added collaborator access so they can actually edit and manage the form and view responses without getting redirected. Updated some backend operations to ensure permissions are correct as well
- Fixed form editing so it actually updates the form and each question individually instead of creating a completely new set of it and neglecting the originally existing relations (~50 lines of code for one database transaction , but Prisma is actually so nice 🥹)
- Added filters and sort methods for shared forms vs forms you own (shared forms now display on the forms page)
Invite collaborators & update form
- You can now invite collaborators that will have access to edit the form, see its responses, and manage its settings! Only the form owner/creator can delete the form and invite and remove people, but invited people can basically do everything else
- On the invite modal page, you can search for MacWeb accounts by their name, email, or about through an API endpoint I added, and select multiple people to invite to the form at once
- Once you send out the invitation, you’ll see the users added to the form on the modal, and you can remove their access by clicking on the trash icon as well
- There isn’t real time form collaborative editing (at least not yet, though I don’t plan on overcomplicating a simple form app to be like Google Forms ), but changes you make to the form are revalidated the moment you click on save
- You can now actually edit and update your form by going to the edit tab and editing the form and its questions. This was actually fairly easy to implement since I just had to use the component used for the form creation page and update a few things
- Optimized database operations and API calls
- Updated schema and types
- Updated styling
Edit form & response pages
- Finally added the form editing page where you’ll be able to edit the entire form (title, description, questions, etc.), view response summaries and statistics, and configure its submission settings and other defaults
- When you click on one of your forms on the forms tab, you get redirected to the edit page that has a top utility bar with the form’s name displayed (you can rename the form by clicking on it) and 3 tabs for you to switch between edit, response, and settings modes
- On the right of the bar, there’s also an invite button, a preview form button, and a publish button (currently doesn’t work yet )
- Clicking on the invite button opens a modal where you can either invite another MacWeb account to be a permanent collaborator (of course it doesn’t work yet), or generate a one-time single-use invite link/code that allows anyone (with or without an account) with the access code to edit the form using a custom access token cookie that expires after an hour
- Making this cookie access thing work was actually a bit more complicated than I thought, so I spent some time debugging the logic but it was pretty fun
- When you use the access code to edit a form, a page shows up confirming the access, and invalidates the code after confirming
- When you click on the responses tab, you can see all the responses and answers grouped by question to make visualizing and summarizing people’s responses a lot easier (definitely didn’t take inspo from Google Forms
) - If the question is multiple choice, it shows how many responses each option got with percentages and presents it in sort of a bar graph
- If the question is free responses, it just lists each response
- Added placeholder tabs for editing and settings
- Added SEO for these tabs
- Updated types and schema
- Updated styling
Sorting & filtering
- Added sorting, filtering, and ordering dropdowns to the forms page so you can better browse and search through your forms!
- You can sort the forms by name, date created, type, starred, and more, and you can filter them by quiz, starred, private, and open. You can change the display order between descending and ascending as well
- Added form starring so you can now star/favorite/pin your most important forms directly by clicking on the star icon on the form card, or by clicking on the star option in the popup menu
- Added icons to form cards to better display the form’s information and attributes
- Added an access lock page for private forms that prompts for the access code, and it only shows the questions and allows you to fill out the form after verifying successfully
- Added a form not open page that shows if a form isn’t open (isn’t published), but if you’re the owner you can still see it with preview mode
- Updated schema and types
- Updated layout and styling
Form management & quizzes
- Added the Forms page where you can browse, search, view, and manage all the forms you created (you’ll be able to filter and sort them to browse and search through them more easily in the future)
- Each form is displayed as a card with a placeholder icon, title, shortened description preview, and creation date listed
- When you click on the 3 dots option button a menu shows up where you can edit the form (takes you to edit page), preview it (takes you to submission page but in preview mode), or delete it
- Preview mode only activates when you own the form, are logged in, and the link has the preview search param. In this mode, you can fill out the questions but can’t submit it, and you can go back to the edit page by clicking on the x icon
- When you click on delete, a confirmation modal shows up, and only deletes your form after confirmation so you don’t accidentally delete stuff
- Added quiz mode to forms so you can create quizzes with correct answers (for both multiple choice and free response questions) and see how your respondents do!
- On the quiz creation page, you can check the quiz checkbox to turn the form into a quiz, and you can customize each question individually to either accept a correct answer (multiselect coming soon) or to allow all choices
- If you fill out a form that’s a quiz, you will be able to see your score and accuracy (but not the correct answer) after submitting it
- Implementing the logic and types for quizzes was kind of a pain but I still managed to fix all the weird edge case bugs
- Added both static and dynamically generated SEO metadata across all pages on MacForms to make the site more accessible and user friendly
- Added a placeholder settings page
- You can now delete questions after a confirmation modal on the form creation page if you have multiple questions
- Updated styling and types
- Updated README
- This is a pretty big update that covers a ton of features, so the video is 3 minutes long and I had to compress it like 2 times…
Form responses
- Added an actual public facing form submission page where anyone (regardless of whether or not they’re logged in) can fill out a form and submit their response
- On the response submission page, you can see the form’s title, description, creation date, all the questions and their choices/inputs rendered correctly, a submit button that submits your response, and a clear button that will clear everything you filled in after showing a confirmation modal
- If you haven’t filled out all the required fields before submitting, it shows a helpful warning message that tells you to fill out the options
- You can deselect your choice for a multiple choice question if it’s not required by clicking on the same choice again (but this isn’t allowed for required questions because duh )
- Public/private forms aren’t implemented yet so the moment you create a form it’s respondable by anyone
- Once you submit your response, a response confirmation page will display confirming your submission, and it also shows an edit response option, as well as a submit another response option
- Response editing works by adding a search param with your response id after the form page path, so it dynamically fetches your response data and fills it in automatically
- The submit another response option just refreshes the page to create a new blank response state object
- Added a different layout for the form submission page (since nav and footer aren’t needed), so I had to reorganize the routes and folders into logical groups to make different layouts work
- Added schema and types for response data
- Updated styling and navigation
Form submission & auth
- Finally added backend form submission so when you click on save on the form creation page after filling in all the values, it gets created and added to the database
- When you click on save, MacForms validates all your new form’s values (title, description, etc.), as well as each question’s choices to make sure everything’s filled out properly
- If you’re missing fields or something isn’t validated, a helpful error message will appear telling you what to fix
- Once you successfully submit the new form, you get redirected to the form editing page where you will be able to edit it, change its settings, check the preview, and publish it (the page isn’t implemented yet)
- You can also delete options/choices for multiple choice questions, as long as there’s at least one available choice
- If you’re logged in, you can see your profile icon displayed on the right of the nav bar, and clicking on it opens a menu where you can view your account profile (redirects you back to MacWeb), toggle light/dark mode (doesn’t work yet), and log out
- I spent a ton of time trying to debug and make the log out thing work because of this entire cross subdomain auth thing that just makes everything super complicated and frustrating, but I figured it out and fixed it by changing a few auth configs
- Designed and added the MacForms logo (just a list icon on a green background) to the nav bar and the site favicon. The design is pretty terrible, hopefully I’ll come up with a better design
- Also spent a lot of time testing to ensure the app, especially auth, works both locally in dev environment and in production
- Added a helper function to fetch form data from Prisma, destructure and sanitize the data, and do some conditional typing to match the types and ensure type safety
- Updated README to be more informative on dev setup since there’s quite a few steps for setup and I don’t wanna forget them in the future
- Updated schema and types
Form creation & homepage
- I forgot to add devlogs for a couple days, so this devlog will be a bit long and cover a ton of changes
- Added a basic homepage with a hero that has a title, description, and some call to action buttons, and a few sections that are just placeholder text and images for now to fill the layout
- Added a navigation bar at the top with links to a few pages and an interactive search bar that doesn’t actually work yet (since there’s nothing to search)
- Copied the MacWeb footer and changed some links and styling to add the footer
- Auth isn’t completely set up yet, so a few things aren’t being displayed properly. Even if you’re not logged in, you can still access the form creation page, it just doesn’t do anything yet
- On the form creation page (that is a form itself), you can fill in the form’s name, description, visibility (making it private requires an access code, which you can generate or type in manually), and whether it’s accepting responses
- You can add new questions by clicking on the add question card, which shows a new question where you can select its type (only multiple and text are supported right now), set the question and description, set it as required/optional, and add answer choices or set the input placeholder depending on the question type
- The backend for making and publishing forms isn’t set up yet, so it’s only the frontend that doesn’t actually do anything
- Adding types for the form, questions, and answer choices was a huge pain because I had to set up a type map, extract its keys, and use them to dynamically construct type unions and some other advanced
stuff for to dynamically infer option types based on the question type, and it was a huge headache to figure out - Updated Prisma schema and added other types
- Updated styling and navigation
MacForms: simple but customizable form creation tool
- I’m building MacForms, an easy to use form creation tool with a lot of features and customization! This is actually a subapp of my online platform MacWeb with many different apps you can try out
- I started this app because I have to make a form for a few people to fill out, and instead of using Google Forms or Notion like a weirdo, I decided to make my own form tool and use it to make the form like a totally normal person
- Since this is a subapp of the main platform, it shares the same auth and database system with the other apps, so I had to update and migrate a ton of stuff on the root domain before I could start working on this app
- The auth system was also challenging to configure properly, but I figured out how to share cookie sessions across subdomains for my account system after a few hours of painful debugging
- After the root domain was migrated and updated properly, I could finally start working on MacForms and set up the project and its dependencies
- Currently there isn’t much since auth took so much time to work, but the hardest part is finished, so hopefully the rest of development will be smoother
- Also set up some DNS and Vercel records for the real domain to work
