Discord Clone Using Next.js and Tailwind - Part 3: Channel List

This page summarizes the projects mentioned and recommended in the original post on dev.to

Our great sponsors
  • SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
  • WorkOS - The modern identity platform for B2B SaaS
  • InfluxDB - Power Real-Time Data Analytics at Scale
  • discord-clone-nextjs

    Building a discord clone using NextJS, TailwindCSS, and the Stream Chat and Audio and Video SDKs.

    Although this article was long, we hope you enjoyed it and learned something from it. Let us know if you have questions or ideas. You can find the project on GitHub.

  • stylegan2-pytorch

    Simplest working implementation of Stylegan2, state of the art generative adversarial network, in Pytorch. Enabling everyone to experience disentanglement

    export default function ChannelListBottomBar(): JSX.Element { const { client } = useChatContext(); const [micActive, setMicActive] = useState(false); const [audioActive, setAudioActive] = useState(false); return (

    {client.user?.image && (
    User image div> )}

    {client.user?.name} span> {client.user?.online ? 'Online' : 'Offline'} span> p> button>

    setMicActive((currentValue) => !currentValue)} > button> setAudioActive((currentValue) => !currentValue)} > button> button> div> ); }

  • SurveyJS

    Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  • Tailwind CSS

    A utility-first CSS framework for rapid UI development.

    Welcome to our series about building a Discord clone using Next.js and TailwindCSS. In the previous posts, we covered setting up the project and adding the server list. This one will tackle the channel list that will look like this:

  • Next.js

    The React Framework

    Welcome to our series about building a Discord clone using Next.js and TailwindCSS. In the previous posts, we covered setting up the project and adding the server list. This one will tackle the channel list that will look like this:

  • heroicons

    A set of free MIT-licensed high-quality SVG icons for UI development.

    We start with the toggle button. We want icons for this that we get from heroicons. Let’s create a new file in the ChannelList folder called Icons.tsx and paste the code for the icons here to have a solid separation:

  • customdiscordrpc

    Customizable Discord Rich Presence Client for Windows.

    Welcome to our series about building a Discord clone using Next.js and TailwindCSS. In the previous posts, we covered setting up the project and adding the server list. This one will tackle the channel list that will look like this:

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts