You can now actually add, view, and manage your tasks in MacIdeas! You can add tasks, view details, edit, star, and delete them by clicking on the task item icons
When you add a task, a task item gets added to the task list page, which when hovered shows icons/buttons to edit, manage tags, change due date, star, or delete the task. There’s also a circle on the left where you can mark the task as completed (none of these buttons work yet other than star and delete )
Clicking on the task item itself opens an animated panel on the side (similar to a lot of todo apps and the Slack profile panel) with input and textarea fields for editing the task and its description, as well as checkboxes to mark/unmark the task as completed or starred
The task item details panel also shows the task’s precise created and updated timestamps, as well as its ID in the backend database (for debugging purposes)
You can save the changes in the details panel by clicking on the save button, which updates and revalidates the task automatically. You can also delete the task item by clicking on the delete button and confirming the warning modal
You can close the details panel by clicking on the same task item again or by clicking on the close button
If a task item is starred, the star icon shows even when you’re not hovering over the task item. You’ll be able to filter and group task items by stars in the future as well
Updated the task list page layout to give more space to the main section and make sure everything’s aligned and positioned nicely without any display/styling issues
Added more task list management features so you can organize and view
your tasks more efficiently!
Added a top tool bar on task list pages where you can rename the task
list by clicking on the name, add a description, mark/unmark it as
starred, and delete it
When you click on delete, a confirmation warning modal shows up asking you to confirm
You can also star/unstar a task list by clicking on the star icon on the left sidebar or in the options menu
Starred task lists show up in a different section at the top of the sidebar to make accessing them easier and quicker
Added a dropdown button that shows an additional menu for creating
folders and projects (not implemented yet) next to the create task list
button
Added a pick emoji button for each task list on the sidebar that, of
course, still doesn’t work yet
Added the new task input field on the task page with a few placeholder
buttons and a submit button. This where you’ll be able to add tasks,
but nothing works so far
Added a message screen that shows up when all the tasks are completed/there are no tasks
Added dynamically generated SEO metadata for task list pages to make the site more accessible and responsive
I’m starting a new project in the MacWeb collection of online apps and platforms called MacIdeas, which is basically Notion (task, note, and project management) but significantly more inferior
Hopefully this project will turn out to be pretty complex so I can milk invest more hours on making and polishing this app
In this pretty big initial update, I set up the Next.js project, installed its required dependencies, added a few basic pages and layouts, added a lot of UI components, and added task list management
Spent quite some time configuring auth and the account system backend again since MacIdeas is hosted on a subdomain of the main macweb.app root domain which handles auth and accounts, so it was annoying setting up CORS, subdomain cookies, and user schemas (I’m not even sure if it works in production yet )
Added a nav bar and footer that were just copied from other MacWeb apps so they look consistent and updated a few links
Added placeholder homepage layout and sections with images and text that don’t mean anything yet
Added the main tasks page layout with a left sidebar listing all your task lists (folders and other organization stuff coming soon) and the main page displaying your actual tasks and information
You can create new task lists by clicking on the create task list button on the sidebar, which creates and redirects you to the new task list that’s automatically titled “Untitled List”
When you hover over a task list on the sidebar, an options icon appears that shows a menu of list management options, including rename, star (not implemented), and delete
When you click on rename, the task list becomes an input where you can input the new name, and clicking out of it saves and revalidates the data
When you click on delete, a confirmation warning modal appears, and the app will be redirected and revalidated after you confirm and delete the task list
Once you’re signed in, your profile icon will be displayed on the nav bar and clicking on it lets you view your profile on the main domain, toggle light/dark modes (coming soon), and sign out (does this even work ?)
Added static SEO for a few pages to improve accessibility and the site’s metadata
Added the MacIdeas logo as the favicon and site icon
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)
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)
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
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 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
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…
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
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
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
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
MacWeb is my biggest project so far that I’ve worked on periodically in the past 2 years, and ever since I rewrote it from scratch for like the third time to migrate to Next.js and fullstack during Flavortown, I have not touched it at all
I didn’t plan on starting it again any time soon, but I actually needed to make a form for a hackathon I’m hosting, and while I could’ve used Google Forms or something else, I decided making my own form creation tool was the best option
I wanted the tool to be part of MacWeb, meaning it had to connect to the original auth and database system, but those were outdated and I wanted a more modern stack, so I decided to completely migrate this platform before even starting with the form tool
The database was the easiest to migrate since I just had to set up Neon and Prisma, rewrite a few server actions and APIs, build a clean, new schema and type system, and run a few migrations
Auth was the actual pain because not only did I have to replace all the original structure with the new framework and generate new OAuth clients, I also had to make cross origin subdomain cookie session sharing work because the other apps are on their own subdomains. This meant reading a ton of docs and changing the auth config way too many times
Every time I had to change the config to see if the subdomain CORS/whatever error was fixed, I had to commit, push, and redeploy on the actual domain since cookies and auth behave differently in local dev environment
I ended up repeating this frustrating cycle of endless commits to fix that one bug for like 2 hours before realizing I made a typo for an environment variable and then everything got fixed…
I’ve been pretty busy this past week and haven’t been able to spend a lot of time on Codeliver or Stardance in general until now. Hopefully I’ll have more time the rest of the summer do get more hours and actually finish my projects
In this update, I added channel settings, some channel ownership and user management features for each channel, as well as the ability to delete channels
When you click on the new channel settings icon in a channel (that only shows if you’re the owner), a settings modal pops up, currently only with 2 options, transfer ownership and delete channel
When you click on transfer ownership, another modal pops up where you can search for a user already added to the channel, select them, and transfer channel ownership after confirmation
If you try to leave a channel when you’re its owner, Codeliver prompts you to transfer the ownership to someone else first to avoid orphaned relations in the database
When you press on delete channel, a confirmation modal pops up and the channel and all its data will be deleted after confirmation
When you click on browse users, your permissions are also displayed and you are able to see who the owner is
I forgot to make a devlog for 2 days straight and I got a ton of stuff accomplished, so this devlog is gonna be a pretty long one with a ton of changes that make Codeliver one step closer to being a significantly inferior Slack clone!
You can now add users to a channel (doesn’t matter if you’re an owner or a member), but only the owner can remove people. There are probably still some permission edge cases I need to test and fix, but for now it works pretty well
When you click on the add member icon, a modal pops up where you can search for all Codeliver users, grouped into added users and people not in the channel, so you can search for them and manage them easily
Added an API endpoint for the user lookup with channel integration to improve frontend data fetching and backend performance
When you click on the edit channel icon a modal pops up, where you can edit its name (must be unique), description, and visibility (more channel settings coming soon)
When you click on the leave channel button, a warning modal pops up for you to confirm the change
When you click on browse channels from the channel management menu, a modal pops up (this entire update is about modals) where you can search for all the channels on Codeliver to view, join, or leave
Added an API endpoint for channel lookup, with respect to user and channel permissions, to make the searching process easier
When you visit a public channel that you haven’t joined, it shows a join message section instead of the message field similar to slack
When you visit a private or nonexistent channel, it just redirects you to the chat homepage
Your sidebar now actually shows the channels you’ve joined, and shows the browse channels button if you don’t have any
Every backend or data state change is revalidated and updated in realtime to ensure smooth and responsive UX
Updated database/backend schema and types
Updated styling and navigation
Fixed deployment issues (the demo site still doesn’t work yet because the Express backend is a mess and hasn’t been set up)
Optimized the Socket.io broadcast events and listeners a lot by using the library’s rooms feature so users viewing different channels will listen to different events
Every time you click and view a new channel, you automatically “leave” the original channel room so you no longer receive messages from it (because you’re not viewing the channel despite still being in the channel). You also “join” the new channel and receive its messages because you’re viewing it
This took a frustratingly long time to implement and debug because I have to track the currently viewed channel on the frontend and communicate with the backend reliably
Added backend revalidation to make the UX of creating new channels smoother
The channel you’re currently viewing is now highlighted on the left sidebar of the chat layout
Updated types
Updated navigation
Updated styling
Because this is mostly a refactor with minimal feature changes, I’ll just put a screenshot of chatting in a channel
This took a surprisingly long time to implement (Tailwind and Framer
Motion are really annoying), but I finally made a channel creation
feature where you can create your own chat channels on Codeliver
When you hover over the Channels category on the left chat sidebar,
you’ll see a menu button option that appears, and when you click on it,
it opens a channel management menu
You can choose to either create a channel, browse/search for available
channels to join (not implemented yet), or click away to close the menu
If you choose create a channel, a modal will pop up where you can put
its name (must be unique and made of lowercase characters and dashes),
description, and set its visibility with the cool toggle
If you create the new channel successfully, you’ll be automatically
redirected to it where you can start chatting in it!
The browse channels options currently just shows an empty modal with a
search bar that doesn’t do anything yet
Updated schema and types for channels and messages
Finally added a backend to Codeliver! I’m using the WebSocket node library Socket.io to handle realtime events and messaging, so I had to set up an Express server to handle the different requests and events
The backend also has to access the auth user data and the shared Prisma Postgres database, so it took me a while to make both the Next.js frontend and Express backend to be able to read and write to it properly (since they are technically their own repos)
Also implemented Socket.io client to the Next.js frontend so whenever you send a message it either creates a new Chat object and sends the message or finds an existing one and adds a new message
Added Prisma schema and frontend types for chats, messages, and reactions
Added persistent message storing for each chat channel and removed the placeholder messages
Figured out how to send a Better Auth JWT token from the frontend and verify the session on the backend to authorize messaging features
I had to deal with a lot of annoying CORS, environment variable, and auth stuff, so that was not fun but the result was worth it
Added the chat messages frontend UI that looks like a combination of Slack and Discord with buttons and components for features like replying, reacting, and other chat stuff. Because the realtime Socket.io backend isn’t implemented yet, these are just placeholder elements for now and are not functional
For each message, you can see the sender’s profile picture, name, localized and human readable timestamp, message, reactions and their counts, and a bar displaying message options that shows up when you hover over the message
Added date separators/horizontal rules to separate chat messages from different dates, improving readability and ease of use
Added temporary placeholder data to simulate chat messages
When you press on reply, a bar now appears above the message input field that shows you’re replying to someone’s message with its preview. You can also cancel the reply by closing the bar
Updated UI behavior of the emoji selection menu to ensure it works for all screen sizes
)
)
?)
types
)
)
)
