Codeliver
By
@tonymac129
- 10 Devlogs
- 25 Total hours
Codeliver: sharing code, real-time chatting, and seamless collaboration made simple
2h 37m 30s logged
More channel & user management features
- 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
- Updated styling and navigation
- Updated API endpoints
- Updated README
5h 5m 34s logged
Channel and user management
- 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)
1h 28m 13s logged
Optimized chatting rooms
- 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
1h 59m 31s logged
Create your own channels
- 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
- Updated styling and navigation
2h 56m 52s logged
Realtime Socket.io + Express backend
- 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
2h 22m 26s logged
Frontend messaging UI
- 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
- Updated styling and UI
- Updated schema and types
- Fixed deployment issues with npm
1h 38m 31s logged
Custom status, new tabs, and SEO
- 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
- Added a placeholder favicon for the site
- Added input validation for profile customization
- Updated navigation and auth flow
- Updated schema and types
- Updated style
- Fixed a dependency deployment issue with npm
3h 21m 55s logged
Chat layout & profile
- 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
- Updated schema and types
- Updated styling
2h 13m 11s logged
Landing page & auth
- 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)
- Added a navigation bar on the landing page
1h 18m 32s logged
Codeliver: realtime code sharing chat app
- 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
