Skip to content

Banter is a feature-rich Discord clone built with React, Redux Toolkit, Next.JS, TypeScript, styled-components, Tailwind CSS, and uses Firebase to communicate with the back-end.

License

Notifications You must be signed in to change notification settings

DevlinRocha/banter

Repository files navigation

Banter - A Discord Clone

Banter is a feature-rich Discord clone built with React, Redux Toolkit, Next.JS, TypeScript, styled-components, Tailwind CSS, and uses Firebase to communicate with the back-end.

Join the conversation! 👈

Features

  • Send messages with gifs, images, videos, or text.
  • Customize profile avatar, banner, bio, username, and more.
  • Use a guest account or register to save credentials.
  • Chat with people around the world in global server.
  • Create a server and invite others with a unique code.
  • Customize the server icon, name, and moderation content filter for gifs.
  • Create separate channels within the server to discuss different topics.
  • Create and customize different roles to assign members of the server.

Getting Started

Instructions to run the project locally are below! A Firebase account is required.

  1. Clone the repository:
git clone https://github.com/DevlinRocha/banter.git

# or

git clone [email protected]:DevlinRocha/banter.git
  1. Go into the directory and install the modules:
cd banter/

npm install

# or

yarn install
  1. Create a new project on Firebase.
    • Go to Firebase → Get Started / Go to console → Add project
    • You can name it anything you want. Analytics are not recommended.
  2. Enable Firestore.
    • Go to Firestore Database → Create database
  3. Register a web app for the project.
    • Go to Project Overview and select the </> (Web) icon.
    • You can name it anything. Hosting is not required.
  4. Take each config value given and create a new .env.local file in banter/ root folder.
    • Can be found in Project settings → General → Your apps → SDK setup and configuration → Config
  5. Paste the following into the new file. Replace each value with given values from Firebase web app config.
NEXT_PUBLIC_FIREBASE_API_KEY = apiKeyValue
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN = authDomainValue
NEXT_PUBLIC_FIREBASE_PROJECT_ID = projectIdValue
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET = storageBucketValue
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID = messagingSenderIdValue
NEXT_PUBLIC_FIREBASE_APP_ID = appIdValue
  1. Run the development server:
npm run dev

# or

yarn dev

Open http://localhost:3000 with your browser.

Development