PHiscord

My First ElectronJS + Vite React Typescript Simple Discord Clone

Table of Contents

1. Project Overview
2. Mockup Screenshot
3. Prerequisite
4. How to Run Project Locally

Project Overview

Project Name

PHiscord

Explanation

Note that this repository is the code with ElectronJS integrated, so it's not the source code of the deployment PHiscord (you can access via https://phiscord.vercel.app). Also for the voice call feature can't be shown in the demo because it access API from Agora Service and only can be done locally

Mockup Screenshot

• Dashboard

• Text Chat Page

• Voice Call Page

• Settings Page

Technology and Infrastructure

This project is built using modern web development tools and frameworks:

• Frontend Framework: Vite + React (Fast and optimized frontend development with TypeScript support)
• Desktop Application: Electron (For building cross-platform desktop applications)
• Styling: TailwindCSS (Utility-first CSS framework for fast UI development)
• Backend Database: Firebase (Realtime database and authentication services)
• Programming Languages: TypeScript
• Package Manager: npm (For managing dependencies and scripts)
• Deployment: The application is designed primarily as a desktop app using Electron, but Firebase can also be used for hosting static assets if needed.

Prerequisite

Before running this project, ensure the following tools are installed on your system:

1. Node.js and npm:

   • Install Node.js (version 16.x or newer) which includes npm.
     Download Node.js from here.

   • Verify installation by running:

     node -v
     npm -v

2. Git:

   • Install Git to clone the repository from GitHub.
     Download Git from here.
     Verify installation using:

     git --version

3. Code Editor:

   • Install Visual Studio Code (VS Code) or any editor of your choice.
     Ensure you have the following extensions for VS Code:
     • ESLint
     • Prettier - Code formatter
     • Python
     • TailwindCSS IntelliSense

4. Browser:

   • Use a modern browser like Google Chrome or Firefox.

How to Run Project Locally

Follow these steps to set up and run the project locally on your machine:

---

Frontend (Next.js)

1. Install Dependencies

• Run the following command in the project root directory to install all required dependencies:

  npm install

• Also install dependencies inside the frontend folder:

  cd frontend
  npm install

2. Start the Application in Development Mode

• Run the command below to start the Vite + React website:

  cd frontend
  npm run dev

3. Start Electron

• Run the following command to run Electron App / Desktop:

  cd ..
  npm start

• Make sure to go to the root folder / outside frontend folder.