React Native Video Classroom App

A simple, interview-friendly React Native Video Classroom application inspired by Zoom-style online classes.
This project includes a call list, profile screen, video call room, chat system, and camera/microphone permission handling.

---

Features

• Call list screen
• Profile screen
• Video classroom room UI
• Chat system
• Camera and microphone access
• Redux Toolkit state management
• Expo Router navigation
• Simple and clean code structure
• Easy to explain in interviews

---

Tech Stack

• React Native
• Expo
• Expo Router
• TypeScript
• Redux Toolkit
• React Redux

Optional real-time upgrade:

• LiveKit for video/audio room
• Socket.IO or LiveKit data channel for real chat

---

Application Screens

1. Call List

Shows all available classes with:

• Class title
• Teacher name
• Class time
• Live/upcoming status
• Join classroom action

2. Call Room

A simple video classroom UI with:

• Teacher video area
• My video area
• Mute / unmute
• Camera on / off
• Open chat
• Leave room

3. Chat Screen

Room-based classroom chat with:

• Message list
• Sender name
• Message input
• Send button

4. Profile Screen

Displays:

• User name
• Role
• Simple user info
• Placeholder for future settings

---

Project Structure

video-classroom-app/
├─ app/
│  ├─ _layout.tsx
│  ├─ index.tsx
│  ├─ calls/
│  │  ├─ index.tsx
│  │  └─ [roomId].tsx
│  ├─ chat/
│  │  └─ [roomId].tsx
│  └─ profile/
│     └─ index.tsx
├─ src/
│  ├─ components/
│  │  ├─ AppButton.tsx
│  │  ├─ ClassCard.tsx
│  │  ├─ VideoControls.tsx
│  │  ├─ ParticipantTile.tsx
│  │  └─ ChatMessageBubble.tsx
│  ├─ features/
│  │  ├─ auth/
│  │  │  └─ authSlice.ts
│  │  ├─ classes/
│  │  │  └─ classSlice.ts
│  │  ├─ call/
│  │  │  └─ callSlice.ts
│  │  └─ chat/
│  │     └─ chatSlice.ts
│  ├─ hooks/
│  │  ├─ useAppDispatch.ts
│  │  ├─ useAppSelector.ts
│  │  └─ usePermissions.ts
│  ├─ lib/
│  │  └─ store.ts
│  ├─ mock/
│  │  └─ classes.ts
│  ├─ types/
│  │  ├─ class.ts
│  │  ├─ user.ts
│  │  └─ message.ts
│  └─ utils/
├─ assets/
├─ package.json
└─ README.md