MacForms
By
@tonymac129
- 10 Devlogs
- 27 Total hours
MacForms is a simple and easy to use form creation tool with a ton of cool features and customization!
1h 56m 1s logged
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
2h 3m 17s logged
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)
2h 54m 48s logged
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
3h 24m 47s logged
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
1h 17m 34s logged
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
2h 57m 9s logged
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…
2h 41m 24s logged
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
3h 1m 13s logged
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
5h 10m 49s logged
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
1h 21m 4s logged
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
