hub / github.com/GetStream/discord-clone-nextjs
github.com/GetStream/discord-clone-nextjs @main
Chat with this repo
67 symbols
165 edges
38 files
0 documented · 0%
What it actually does AI analysis from the code graph — generated when you open this
loading…
README
Discord Clone using NextJS, TailwindCSS, and Stream
This repository accompanies the series of blog posts published on the Stream Blog about creating a Discord clone using NextJS, TailwindCSS, and the Stream Chat and Video SDKs.
The series will have five posts at the end (we'll have the links updated once they are published):
- Part 1: Setup Project
- Part 2: General Layout and Server List
- Part 3: Channel List UI (coming soon)
- Part 4: Message List UI
- Part 5: Adding video and audio calling
Running the project
Prerequisites
First, a machine running Node.js and the option to clone the repository. The rest of the setup is explained in Part 1.
Second, an account with Stream. We have a free tier, and we can create an account for free using this link.
Running locally
The first thing to do is install dependencies:
npm install
# or
yarn
Then we can run the project on our machine in development mode:
npm run dev
# or
yarn dev
Use the Stream SDKs yourself
You can get started with the Stream SDKs today for free.
Find our React documentation here:
Core symbols most depended-on inside this repo
useDiscordContextcalled by 7
contexts/DiscordContext.tsx
buttonDisabled
called by 2
components/ServerList/CreateServerForm.tsx
buttonDisabled
called by 2
components/ChannelList/CreateChannelForm/CreateChannelForm.tsx
getUserToken
called by 2
app/page.tsx
checkIfUrl
called by 1
components/ServerList/ServerList.tsx
formatDate
called by 1
components/MessageList/CustomMessage/CustomMessage.tsx
formatDate
called by 1
components/MessageList/CustomDateSeparator/CustomDateSeparator.tsx
userChanged
called by 1
components/ChannelList/CreateChannelForm/CreateChannelForm.tsx
Shape
Languages
TypeScript100%
Modules by API surface
components/ChannelList/Icons.tsx26 symbols
components/ServerList/CreateServerForm.tsx4 symbols
components/ChannelList/CreateChannelForm/CreateChannelForm.tsx4 symbols
contexts/DiscordContext.tsx2 symbols
components/ServerList/ServerList.tsx2 symbols
components/MessageList/CustomMessage/CustomMessage.tsx2 symbols
components/MessageList/CustomDateSeparator/CustomDateSeparator.tsx2 symbols
app/page.tsx2 symbols
middleware.ts1 symbols
hooks/useVideoClient.ts1 symbols
hooks/useClient.ts1 symbols
components/ServerList/UserCard.tsx1 symbols
For agents
$ claude mcp add discord-clone-nextjs \
-- python -m otcore.mcp_server <graph>