Connexus – Frontend

A modern video conferencing web application built with React.js

Live Demo(coming soon) • Report Bug • Request Feature

🌟 Overview

Connexus is a cutting-edge video conferencing platform that delivers seamless real-time video meetings with an intuitive user interface. Built with modern React.js, it offers secure authentication, meeting history tracking, and a responsive design that works perfectly across all devices.

✨ Features

🔐 Secure Authentication

• User registration and login system
• Protected routes with authentication context
• Secure session management

🎥 Real-time Video Conferencing

• High-quality video and audio calls
• Multi-participant meetings
• Screen sharing capabilities
• Real-time chat integration

📱 Responsive Design

• Mobile-first approach
• Optimized for desktop, tablet, and mobile
• Adaptive UI components

🗂 Meeting Management

• Meeting history tracking
• Schedule upcoming meetings
• Join meetings with simple codes/links

🎨 Modern UI/UX

• Clean, intuitive interface
• Custom CSS modules for component isolation
• Smooth animations and transitions

🛠️ Tech Stack

Technology	Purpose
React.js	Frontend framework
Context API	Global state management
CSS Modules	Component-scoped styling
WebRTC	Real-time communication
JavaScript ES6+	Modern JavaScript features
Vite/CRA	Build tool and development server

📁 Project Structure

src/
├── contexts/              # React Contexts
│   ├── AuthContext.js     # Authentication state management
│   ├── FlashContext.js    # Flash message system
│   └── RouteContext.js    # Route protection logic
│
├── pages/                 # Application pages & components
│   ├── authentication.jsx # Login/Signup interface
│   ├── Content.jsx        # Main content wrapper
│   ├── Footer.jsx         # Application footer
│   ├── history.jsx        # Meeting history dashboard
│   ├── home.jsx           # Homepage component
│   ├── landing.jsx        # Landing page
│   ├── Navbar.jsx         # Navigation header
│   ├── Scroller.jsx       # Custom scrollable component
│   └── videoMeet.jsx      # Video meeting interface
│
├── styles/                # Styling files
│   ├── footer.css         # Footer specific styles
│   ├── scroller.css       # Scroller component styles
│   └── videocomponent.module.css # Video component modules
│
├── utils/                 # Utility functions
│   ├── api.js            # API helper functions
│   ├── constants.js      # Application constants
│   └── helpers.js        # General utility functions
│
├── App.jsx               # Main application component
├── App.css               # Global application styles
├── index.css             # Global CSS reset and base styles
└── main.jsx              # Application entry point

🚀 Getting Started

Prerequisites

Before you begin, ensure you have the following installed:

• Node.js (v16.0 or higher)
• npm or yarn package manager
• Git for version control

Installation

1. Clone the repository

   git clone https://github.com/ashutoshpatrodevops/connexus-frontend.git
   cd connexus-frontend

2. Install dependencies

   npm install
   # or
   yarn install

3. Set up environment variables

   cp .env.example .env

   Edit .env file with your configuration:

   for the frontend you dont need anything for environment

4. Start the development server

   npm start
   # or
   yarn start

5. Open your browser Navigate to http://localhost:5173 to see the application running.

🔧 Available Scripts

Command	Description
npm start	Runs the app in development mode
npm test	Launches the test runner
npm run build	Builds the app for production
npm run preview	Preview the production build locally
npm run lint	Run ESLint to check code quality
npm run format	Format code with Prettier

📱 Usage

Starting a Meeting

1. Sign up or log in to your account
2. Navigate to the home page
3. Click "Start New Meeting" or "Join Meeting"
4. Share the meeting code with participants
5. Enjoy seamless video conferencing!

Joining a Meeting

1. Click "Join Meeting" from the homepage
2. Enter the meeting code or meeting link
3. Configure your camera and microphone
4. Click "Join" to enter the meeting

🎨 Customization

Theming

Modify the CSS custom properties in src/index.css:

:root {
  --primary-color: #4F46E5;
  --secondary-color: #10B981;
  --background-color: #FFFFFF;
  --text-color: #111827;
  --border-radius: 8px;
}

Component Styling

Use CSS Modules for component-specific styles:

/* videocomponent.module.css */
.videoContainer {
  border-radius: var(--border-radius);
  background: var(--background-color);
}

🧪 Testing

Run the test suite:

# Run all tests
npm test

# Run tests in watch mode
npm test -- --watch

# Generate coverage report
npm test -- --coverage

🏗️ Building for Production

1. Build the application

   npm run build

2. Preview the build

   npm run preview

3. Deploy the src/ folder to your preferred hosting service

Deployment Options

• Netlify: Drag and drop the dist folder
• Vercel: Connect your GitHub repository
• AWS S3: Upload the build files to an S3 bucket
• GitHub Pages: Use GitHub Actions for automatic deployment

🤝 Contributing

We welcome contributions from the community! Please follow these steps:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Development Guidelines

• Follow the existing code style and conventions
• Write meaningful commit messages
• Add tests for new features
• Update documentation as needed
• Ensure all tests pass before submitting

🐛 Issues and Support

If you encounter any issues or have questions:

1. Check the existing issues
2. Create a new issue with detailed information

📋 Features for future

• Mobile App - React Native implementation
• Advanced Chat - File sharing and emoji reactions
• Recording - Meeting recording and playback
• Breakout Rooms - Split participants into smaller groups
• Virtual Backgrounds - Custom background support
• Analytics Dashboard - Meeting insights and statistics

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• React Team for the amazing framework
• WebRTC for enabling real-time communication
• Open Source Community for inspiration and support
• Thanks to passprt team for helping me for smooth authentication
• special work is on videoMeet.jsx file which taught me mind blowing stuffs for production ready platform

---

Built with ❤️ by Ashutosh Patro

⭐ Star this repo • 🐛 Report issues •

📞 Contact & Support

📧 Get in Touch

• Email: coderashu7847@gmail.com
• Issues: Report bugs or request features
• Blogs: Join community articles

🌐 Connect With Us