Yeasir0032 · KanishkChhajed · May 19, 2024 · Aug 4, 2024 · Aug 10, 2024 · Aug 19, 2024
diff --git a/Dockerfile b/Dockerfile
@@ -0,0 +1,17 @@
+FROM ubuntu
+
+RUN apt-get update
+RUN apt-get install -y curl
+RUN curl -sL https://deb.nodesource.com/setup_20.x -o nodesource_setup.sh 
+RUN apt-get upgrade -y
+RUN apt-get install -y nodejs
+
+
+
+COPY package-lock.json package-lock.json
+COPY package.json package.json
+COPY app/(setup)/page.tsx  app/(setup)/page.tsx
+
+RUN apt-get install -y npm
+
+ENTRYPOINT [ "node", "page.tsx" ]
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,12 +1,9 @@
-import "./globals.css";
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
-import { ClerkProvider } from "@clerk/nextjs";
-import { ThemeProvider } from "@/components/providers/theme-provider";
-import { cn } from "@/lib/utils";
-import { ModalProvider } from "@/components/providers/modal-provider";
-import { SocketProvider } from "@/components/providers/socket-provider";
-import { QueryProvider } from "@/components/providers/query-provider";
+import "./globals.css";
+import '@radix-ui/themes/styles.css';
+import { Theme } from '@radix-ui/themes';
+
 const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
@@ -16,26 +13,16 @@ export const metadata: Metadata = {
 
 export default function RootLayout({
   children,
-}: {
+}: Readonly<{
   children: React.ReactNode;
-}) {
+}>) {
   return (
-    <ClerkProvider>
-      <html lang="en" suppressContentEditableWarning={true}>
-        <body className={cn(inter.className, "bg-white dark:bg-[#313338]")}>
-          <ThemeProvider
-            attribute="class"
-            defaultTheme="dark"
-            storageKey="discord-theme"
-            enableSystem={false}
-          >
-            <SocketProvider>
-              <ModalProvider />
-              <QueryProvider>{children}</QueryProvider>
-            </SocketProvider>
-          </ThemeProvider>
+    <html lang="en">
+      <body className='bg-[url("/background.svg")] bg-cover bg-repeat overflow-x-hidden scroll-smooth scroll-m-0 scroll-p-0'>
+        <Theme>
+        {children}
+        </Theme>
         </body>
-      </html>
-    </ClerkProvider>
+    </html>
   );
 }
diff --git a/components/home-layouts/LandingPage.tsx b/components/home-layouts/LandingPage.tsx
diff --git a/components/home-layouts/LoginPage.tsx b/components/home-layouts/LoginPage.tsx
diff --git a/components/home-layouts/QRcode.tsx b/components/home-layouts/QRcode.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { useQRCode } from 'next-qrcode';
+
+const QRcode = () => {
+    const { Image } = useQRCode();
+  return (
+    <>
+    <div className="rounded-lg">
+    <Image 
+    text={'https://discord.com/login?redirect_to=%2Flogin%3Fredirect_to%3D%252Fchannels%252F%2540me'}
+    options={{
+        type: 'image/jpeg',
+        quality: 0.3,
+        errorCorrectionLevel: 'M',
+        margin: 3,
+        scale:4,
+        width: 150,
+        color: {
+            dark: '#000000',
+            light: '#ffffff',
+        },
+    }}
+    />
+    </div>
+    </>
+  )
+}
+
+export default QRcode
diff --git a/learn.md b/learn.md
@@ -1,54 +1,116 @@
-# Project Setup
-
-### Fork the repo:
-
-To contribute to this Discord-Clone, you must first fork the [Discord-Clone](https://github.com/Yeasir0032/Discord-Clone) repo.
-
-### Clone the repo:
-
-1. Clone your GitHub forked repo:
+# Discord-Clone
+<!-- TABLE OF CONTENTS -->
+
+<details open="open">
+  <summary><h2 style="display: inline-block">Table of Contents</h2></summary>
+  <ol>
+    <li>
+      <a href="#1 Introduction">Introduction</a>
+    </li>
+    <li>
+      <a href="#2 Key Features">Key Features</a>
+    </li>
+    <li>
+      <a href="#3 Tech Stacks">Tech Stacks</a>
+    </li>
+    <li>
+      <a href="#4 How to set up?">How to set up?</a>
+    </li>
+    <li>
+      <a href="#5 Snaps">Snaps</a>
+    </li>
+  </ol>
+</details>
+
+# <a name="1 Introduction">Introduction:</a>
+
+A clone of Discord with features like realtime chat app, roles, file sharing, servers...etc,
+- React is used along with Redux to power front-end.
+- Redux to manage state along with Redux Saga.
+- React Routing with Error handling and Discord Loading between pages.
+- Firebase is used for authentication and firestore to store messages, users and servers.
+- Material UI is used along with SASS with a little of styled components for UI.
+
+# <a name="2 Key Features">Key Features:</a>
+
+- Server Channels
+
+  i)   Create channels
+
+  ii)  Delete channels
+
+- Message Management
+
+  i) Server owners can delete any message
+
+  ii) Message author can delete and edit their own messages
+
+- Member Management
+
+  i) Kick members as the server owner
+
+  ii) Easily leave the server by right clicking the server
+
+  iii) Join servers with an invite code
+
+- Server Management
+
+  i) Create servers as you would in Discord
+
+  ii) Edit server name, and icon URL in the server settings
+
+  iii) Delete your server in the server settings
+
+- User Management
+
+  i) Manage your account by clicking the settings icon
+
+  ii) Change your username, and avatar
+
+  iii)Delete your user and prevent it from being used to login
+
+# <a name="3 Tech Stacks">Tech Stacks:</a>
+
+- TypeScript: 97.9%
+
+- Javascript: 1.3%
+
+- CSS: 0.8%
+
+# <a name="4 How to set up?">How to set up?</a>
+
+1. Clone the repository: git clone
 
    ```sh
    git clone https://github.com/<github_username>/Discord-Clone
    ```
 
-2. Go to the Discord-Clone directory:
+3. Go to the Discord-Clone directory:
 
    ```sh
    cd discord-clone
    ```
 
-3. To install the dependencies, run:
+4. Install the dependencies in the root of the repo:
 
-   ```sh
-   npm install
+    ```sh
+   npm install # install dependencies
    ```
-
-4. To start the development server, run in terminal:
+    
+5. Copy the example `.env.local.example` to `.env.local`
 
    ```sh
-   npm run dev
+   .env.local.example
    ```
 
-Note : The project's backend is based on nodejs, so make sure you have node version 20 or above installed in your machine, if not refer to this: https://nodejs.org/en/download.
+# <a name="5 Snaps">Snaps:</a>
 
-# Setup environment variables
+<img src="https://github.com/Yeasir0032/Discord-Clone/assets/128183101/cc30726b-78e0-455b-864a-89ce2b31b2a0" align="center" height="500" width="800">
 
-## Supabase setup:
 
-### 1. Project API setup
+<img src="https://github.com/Yeasir0032/Discord-Clone/assets/128183101/e6e87662-33e6-4e29-ab3a-333e20ff00d4" align="center" height="500" width="800">
 
-1. Go to [Supabase Dashboard](https://supabase.com/dashboard/projects) (create your account if you have not).
-2. Create a new project.  
-   ![Screenshot 2024-05-12 122005](https://github.com/meAyushSharma/file-converter--md-html/assets/146171218/b2332b87-9014-444e-847e-0edddfd41508)
-3. Get your project url and anon api key.  
-   Note : You should not reveal this api key as this works as a bridge between your database and project.
-4. In your forked repo create a `.env.local` file, copy the contents from `.env.local.example` and paste the credentials in it:
-   ```sh
-   NEXT_PUBLIC_SUPABASE_URL=https(:)//some-string-here.supabase.co
-   NEXT_PUBLIC_SUPABASE_ANON_KEY=anon-api-key-here
-   ```
-5. Setup your tables. Refer to [Table Setup Documentation](./table-setup.md)
 
-Supabase is an open source firebase alternative, that provides Postgres database, Authentication, instant APIs, Edge Functions, Realtime subscriptions, Storage, and Vector embeddings.  
-Refer to this [Documentation](https://supabase.com/docs), for more information.
+## 🙏 Support
+
+This project needs a ⭐️ from you. Don't forget to leave a star ⭐️
diff --git a/public/background.svg b/public/background.svg
diff --git a/public/download.svg b/public/download.svg
diff --git a/public/logo.svg b/public/logo.svg
diff --git a/public/whitedownload.svg b/public/whitedownload.svg
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,76 +1,32 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  darkMode: ["class"],
   content: [
-    './pages/**/*.{ts,tsx}',
-    './components/**/*.{ts,tsx}',
-    './app/**/*.{ts,tsx}',
-    './src/**/*.{ts,tsx}',
-	],
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+
+    // Or if using `src` directory:
+    "./src/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
   theme: {
-    container: {
-      center: true,
-      padding: "2rem",
-      screens: {
-        "2xl": "1400px",
-      },
-    },
     extend: {
-      colors: {
-        border: "hsl(var(--border))",
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
-        primary: {
-          DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))",
-        },
-        secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))",
-        },
-        destructive: {
-          DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))",
-        },
-        muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))",
-        },
-        accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))",
-        },
-        popover: {
-          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))",
-        },
-        card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))",
-        },
-      },
-      borderRadius: {
-        lg: "var(--radius)",
-        md: "calc(var(--radius) - 2px)",
-        sm: "calc(var(--radius) - 4px)",
-      },
       keyframes: {
-        "accordion-down": {
-          from: { height: 0 },
-          to: { height: "var(--radix-accordion-content-height)" },
-        },
-        "accordion-up": {
-          from: { height: "var(--radix-accordion-content-height)" },
-          to: { height: 0 },
-        },
+        moveLeft: {
+          '0%': { transform: 'translateX(0%)' },
+          '100%': { transform: 'translateX(-100%)' },
+        }
       },
       animation: {
-        "accordion-down": "accordion-down 0.2s ease-out",
-        "accordion-up": "accordion-up 0.2s ease-out",
+        'move-left': 'moveLeft 100s linear infinite ',
+      },
+      animationDelay:{
+        '200ms': '200ms',
+        '400ms': '400ms',
+        '600ms': '600ms',
+        '800ms': '800ms',
+        '5000ms': '5000ms', // For the "HANGOUT" text
       },
     },
   },
-  plugins: [require("tailwindcss-animate")],
+  plugins: [],
 }