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
Added an emoji picker (using the library Emoji Mart) next to the custom status input field on the edit profile page where you can choose an emoji for your status as well as a status text (both are optional)
Below the emoji picker and status input field, there are a few preset combinations of emojis and statuses for common situations, making setting a custom status a lot easier. There is also an option to clear your status
Added a few new tabs in the user route group that are all just empty placeholders for now
Added actual SEO and Open Graph metadata information for all pages on Codeliver
Made a placeholder layout for chat pages (for both channels and direct messages) with a left sidebar listing all the channels you’re in and all your direct messages (all the items are just placeholders for now), similar to Slack and Discord’s layouts
Added a message textarea/input field on the main chat area with options for formatting the text, inserting code and emoji, and uploading files. A “send” button also shows up when you type a message. None of these buttons work yet, I only made the layout
Added a profile customization page where you can customize your profile information (everything except for changing your profile picture works) that shares a layout with the other tabs
When you’re logged in and click on your user icon on the nav bar, an animated menu shows up where you can go to profile, settings, switch light/dark mode, or sign out, but only profile and sign out work
Added actual auth flow for both email/password and OAuth providers so you get signed in and redirected to chat automatically
Set up Google and GitHub’s OAuth tokens and stuff
Added backend server actions for auth and customization
Added a landing page for non logged in users to learn more about the app
The hero section has a title, description, and two call to action buttons for logging in and reading more information
There are also a few sections on the landing page that just display placeholder images and text for now since the app doesn’t actually exist yet
Added an animated faq component at the bottom that’s a collapsible accordion
Added a login page with a form where you can either sign up, sign in with email/password, or sign in with OAuth providers (Google and GitHub coming soon)
While working on my previous project MemeBoard, I got a bit too addicted with the realtime chat part of the app and overengineered it way too much, so I decided to build an app focused on chatting and sharing code with other people
This is also an excellent opportunity for me to learn more about WebSockets, Socket.io, Node, and Linux server configuration/management since I’m planning to host this app on a dedicated DigitalOcean VM instead of the serverless Vercel
In this update, I set up the basic project structure with an empty backend directory and a frontend directory for the Next.js frontend, installed the necessary dependencies, and set up the Prisma database for auth
You can now search, sort, and filter collections on the collections page to browse and explore public collections other people created! You can filter your friends’ and your own collections to make managing them easier
You can now add an optional description describing what your collection is about, either on the add or edit collection modal
You can now change the visibility of your collection to be either public or private, where public collections are displayed on your profile and the collections page for everyone to see, and only you can see your own private collections
Added a new private collections section on your profile that only you can see it
Added a create collection modal that shows up when you click on the button on the collections page to make creating collections easier
Added a create tag modal that shows up when you click on the button on the tags page, but unlike collections you can only put the name of the tag since that’s the only thing a tag has
Added MemeBot to everyone’s chat, so even if you haven’t friended someone on the platform you can still try out all the chat features since MemeBot also sends messages in realtime
MemeBot isn’t actually another AI chatbot or anything, it just responds with a random hardcoded string message (very intelligent, i know) from the backend whenever a user sends it a message after a certain delay to simulate realtime chatting
Since MemeBot isn’t actually a user, I had to modify the chatting system quite a bit and put a lot of extra conditionals and logic to ensure it works properly for both MemeBot and real users, and that was quite annoying to figure out
Fixed an annoying caching bug where you had to refresh the entire chat page for realtime interactions to work properly when chatting with someone for the first time, otherwise the chat just froze. This took a long time to fix, but the UX is finally smooth and works well
Fixed some issues of the chat related to auth and not being logged in
I think I’m almost finished with MemeBoard, so now I’m just making random small features that I skipped over earlier
Added realtime chat message previews for each of your chats that shows the last message and who sent it on the left sidebar so it feels more like Discord and Slack
Added a tag filtering dropdown on the Memes page where you can see all the tags, search for them, and choose one to see all the memes labeled with that tag. This makes it a lot easier to browse, filter, and find similar memes
Added an options menu button to the tag page (that only shows if you’re the one who made the tag) similar to the button I added to a bunch of other pages. When clicked, it shows a menu with just a delete option that deletes the tag and removes its label from all the memes after a confirmation modal
Added both dynamically generated SEO and static SEO to some pages that didn’t have it
Similar to the meme page, when you view the page of a collection you created, there is an options icon that when clicked, opens a menu where you can edit or delete the collection
If you press on edit, an edit modal pops up where you can edit the name and select which memes should be in the collection
If you press on delete, a warning modal shows up, and if you press delete the collection will be permanently deleted
Added a search bar on the main collections page where you can search for your own or other people’s collections
Added the collections tab to the main nav bar and the footer to improve navigation
You can now add a short public about me bio on your profile by clicking on the edit profile button that shows an input edit modal
When you hover over your own messages, a delete button now shows up that lets you delete the message for both of you after a confirmation modal just like all the other delete functionalities
You can undo the deletion by pressing on the undo button that shows up, which restores the message for both of you
I spent most of my time on MemeBoard developing while logged in, so I wasn’t aware most of my pages were completely broken and returning errors if someone visited them while not being logged in, so I implemented a ton of conditionals and permission stuff for auth to make sure every page works properly or redirects to the login page
When you’re not logged in, you can still use the app and browse memes, it’s just that a lot of features are unavailable
Finally added responsive design to all pages on the platform so MemeBoard works properly and the layout stays organized and visually appealing for all screen sizes!
Added a menu button that shows up when the screen size is smaller than a certain width, which when clicked opens a sidebar that slides in from the left containing all the links. This declutters the layout while improving the UX of the app
Added a search bar to the tags page where you can search all the tags people created and browse memes more easily
Refactored code for some UI elements to make everything more optimized and clean
Fixed chat layout UI breaking with excessively long messages
)
stuff for 
