Renewal·마흔의 생활코딩

Discord Clone Coding

October 3, 2023·5 min read

cover image

update 3/14

PlanetScale's pricing policy changed, so I 1) moved the DB (MySQL ) to Railway, and 2) moved the deployment from Railway to Vercel and redeployed it.
team-chat-application-sage.vercel.app

Team Chat Application

team-chat-application-sage.vercel.app

At long last, I was finally able to deploy the result of my new "day job, night study" project (Discord clone coding). With many things starting at once, after various twists and turns I was only able to ship it today. It feels rushed and there are still many things to fix, but in any case it was a meaningful stretch of time during which I got to experience new tools and new issues.

~~https://teamchatapplication-production.up.railway.app/~~

Along with that, I'll also leave a link in this post to one article that caught my eye during the deployment process.

https://ritza.co/articles/gen-articles/render-vs-heroku-vs-vercel-vs-railway-vs-fly-io-vs-aws/

render vs. heroku vs. vercel vs. railway vs. fly.io vs. aws - Ritza Articles

Comparing PaaS and hosting providers

ritza.co

As of yesterday, I'm about halfway through, all the way to deployment. Working on it for 30–60 minutes a night after my day job is taking longer than I expected. In the past I would have just blocked off a day and binged it like a Netflix marathon, but lately I get this feeling that doing it that way is somehow pointless, so I haven't been pushing it that hard.

For these night-study examples I'm trying to find ones that are built around the latest specs as much as possible. On top of that, I'm picking ones whose features include parts that could be borrowed for actual production work, and as much as possible things that produce a result that can actually stay deployed, not just a pile of code.

This time the example is Discord. Lately, communication and community channels between individuals and companies seem to be ~~moving~~ increasingly extending onto Discord as well. The new(?) thing is that this is less a simple migration and more a parallel use that doesn't quite feel parallel — kind of like sitting on the living-room couch, with the TV on, watching Netflix on a tablet, and shopping on a smartphone all at once. With the hope that it would be a chance to structurally understand this kind of channel that is at once kitsch and yet not quite kitsch, and out of a personal desire for digital ownership of a deployment demo built on the T3 stack, I decided to do this exercise.

I set up a basic T3 stack on Vercel, used Clerk for the authentication flow, and built most of the GUI on top of shadcn. For the DB I used MySQL via PlanetScale.

I've already implemented logging in, managing one's own profile (CRUD), managing one's own channels (CRUD), generating an invite link to invite others into a channel, and channel search (as of 10/08, 51%). I'm tracking the detailed process in the Notion link at the bottom and on GitHub.

Environment Setup

Over the long holiday I've been working on a Discord clone-coding project.. Between the holidays and binge-watching dramas.., I'm only about a third of the way through, so for now let me first organize the libraries and APIs I'm using.

shadcn
Built with Radix UI and Tailwind CSS. It provides reusable components. But because it isn't a library, dependency on it is low. Thanks to that, you can selectively pull in just the components you need and easily and freely customize them.

shadcn/ui

Beautifully designed components built with Radix UI and Tailwind CSS.

ui.shadcn.com

nextjs
A React framework for building full-stack web applications. It improves developer experience by abstracting away and automatically configuring the tools React needs (bundling, compilation, etc.) so that developers can focus on building applications.

Next.js by Vercel - The React Framework

Next.js Boilerplate A Next.js app and a Serverless Function API. Image Gallery Starter An image gallery built on Next.js and Cloudinary. Next.js Commerce An all-in-one starter kit for high-performance e-commerce sites.

nextjs.org

https://nextjs.org/docs/app/building-your-application/routing	A file-system based router built on top of Server Components, supporting layouts, nested routing, loading states, error handling, and more.
https://nextjs.org/docs/app/building-your-application/rendering	Client-side and server-side rendering using Client and Server Components. Further optimized with static and dynamic rendering on the server using Next.js. Streams on the Edge and Node.js runtimes.
https://nextjs.org/docs/app/building-your-application/data-fetching	Simplified data fetching using fetch and async/await in Server Components, plus an extended API for request memoization, data caching, and revalidation.
https://nextjs.org/docs/app/building-your-application/styling	Support for your preferred styling method, including CSS Modules, Tailwind CSS, and CSS-in-JS.
https://nextjs.org/docs/app/building-your-application/optimizing	Image, font, and script optimizations to improve your application's Core Web Vitals and user experience.
https://nextjs.org/docs/app/building-your-application/configuring/typescript	Improved TypeScript support, with better type checking, more efficient compilation, custom TypeScript plugins, and a type checker.

clerk
An API that implements user authentication (login etc.) and management.

Clerk | Authentication and User Management

The easiest way to add authentication and user management to your application. Purpose-built for React, Next.js, Remix, and “The Modern Web”.

clerk.com

prisma
A TypeScript ORM (Object Relational Mapping). Intuitive data model, automated migrations, type safety, and auto-completion.

Prisma | Next-generation ORM for Node.js & TypeScript

Prisma is a next-generation Node.js and TypeScript ORM for PostgreSQL, MySQL, SQL Server, SQLite, MongoDB, and CockroachDB. It provides type-safety, automated migrations, and an intuitive data model.

www.prisma.io

planetscale
A MySQL platform.

PlanetScale: The world’s most advanced database platform

PlanetScale is the MySQL-compatible, serverless database platform.

planetscale.com

uploadthing
File Uploads For Next.js Developers. Authorize users on the server. Manages file hosting (similar to S3, but simpler). Provides an open-source React client library — upload files from the front-end with handy components, hooks, and so on.

uploadthing

An easier way to upload files.

uploadthing.com

Axios
An HTTP async-communication library that uses the Promise (ES6) API (for browsers and Node.js).
For ajax, in vanilla JavaScript it's the fetch API; in frameworks, axios.

시작하기 | Axios Docs

시작하기 브라우저와 node.js에서 사용할 수 있는 Promise 기반 HTTP 클라이언트 라이브러리 Axios란? Axios는 node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트 입니다. 그것은 동형 입니다(동일한 코

axios-http.com

zustand ('state' in German)
A state management library. React is structured around independent components. With the useState hook you can manage state in a single component and pass state up and down between parent and child via props. Zustand is a small, fast, scalable state-management solution that uses simplified Flux principles. It provides a convenient API based on Hooks.

Zustand

zustand-demo.pmnd.rs