MeetOn

High-quality meetings without the hassle. > Secure, fast, and free video conferencing for everyone.

About The Project

MeetOn is a modern video conferencing application designed to make connecting with others seamless and secure. Built with the MERN stack, it offers a clean, user-friendly interface for high-quality video calls.

Whether you are joining as a guest or registering for a secure dashboard, MeetOn prioritizes user experience and performance.

Key Features

• Modern UI/UX: A responsive landing page with glassmorphism effects and smooth animations.
• Secure Authentication: User registration and login powered by secure backend API (JWT/Cookies).
• Split-Screen Auth: Professional, accessible authentication pages using Material UI.
• Guest Access: Quick join capabilities without mandatory sign-up (Coming Soon).
• Real-time Video: High-quality video streaming (In Progress).

Tech Stack

Frontend:

• React.js
• Material UI (MUI) for component styling
• CSS3 with Flexbox/Grid & Custom Animations

Backend:

• Node.js
• Express.js
• MongoDB (Database)
• JWT (JSON Web Tokens) for Authentication

Screenshots

| Landing Page | | |

Getting Started

Follow these instructions to set up the project locally on your machine.

Prerequisites

• Node.js (v14 or higher)
• npm or yarn
• MongoDB (Local or Atlas URL)

Installation

1. Clone the repository

   git clone https://github.com/Rashi-AI7/MeetOn.git
   cd MeetOn

2. Install Frontend Dependencies

   cd frontend/meet-app
   npm install

3. Install Backend Dependencies

   cd ../../backend
   npm install

4. Configure Environment Variables Create a .env file in the backend folder and add:

   PORT=5000
   MONGO_URI=your_mongodb_connection_string
   JWT_SECRET=your_jwt_secret_key

5. Run the App

   • Backend: npm start (Runs on port 5000)
   • Frontend: npm start (Runs on port 3000)

Project Structure

MeetOn/
├── backend/            # Express & Node.js Server
│   ├── controllers/    # Route logic
│   ├── models/         # Mongoose Schemas
│   └── routes/         # API Endpoints
│
└── frontend/meet-app/  # React Application
    ├── public/         # Static assets
    └── src/
        ├── components/ # Reusable UI components (SignInCard, etc.)
        ├── pages/      # Main Pages (Landing, Authentication)
        └── utils/      # Helper functions