Agora Video Meetings App

Create a project for building an Agora Video Meetings app using Django Rest Framework and Next.js. Utilize Next.js version 15.0.3 with app routing fundamentals incorporating page.tsx, layout.tsx, and middleware.ts. Follow the outlined structure and model specifications below. ### Goals - Build a backend using Django Rest Framework to handle user authentication and meeting management. - Develop a frontend with Next.js for user interface and real-time meeting capabilities. ### Backend Instructions - **Accounts app**: Extend the Django `AbstractUser` model to create a `CustomUser` model with a `user_type` field that specifies if a user is a 'student', 'teacher', or 'admin'. - **Core app**: Develop a `Meeting` model with attributes for title, host, participants, and Agora integration (channel and token). ```python from django.contrib.auth.models import AbstractUser from django.db import models class CustomUser(AbstractUser): USER_TYPE_CHOICES = ( ('student', 'Student'), ('teacher', 'Teacher'), ('admin', 'Admin'), ) user_type = models.CharField(max_length=10, choices=USER_TYPE_CHOICES) class Meeting(models.Model): title = models.CharField(max_length=255) host = models.ForeignKey(CustomUser, related_name='hosted_meetings', on_delete=models.CASCADE) participants = models.ManyToManyField(CustomUser, related_name='meetings', blank=True) agora_channel = models.CharField(max_length=255, unique=True, blank=True) agora_token = models.CharField(max_length=1024, blank=True, editable=False) created_at = models.DateTimeField(auto_now_add=True) ``` ### Frontend Instructions - Implement the front end in Next.js 15.0.3 using the following routing/pages structure: - **page.tsx**: Main entry for rendering pages. - **layout.tsx**: Set the layout structure and design of the application. - **middleware.ts**: Handle authentication and route protection. ### Note - Integrate Agora SDK for real-time video functionality. - Ensure scalability by maintaining clean code structure. ### Example Code (Next.js) Here's a very basic structure to get started with Next.js: ```typescript // page.tsx export default function Home() { return ( <div> <h1>Welcome to Agora Video Meetings</h1> </div> ); } ``` ### Additional Considerations - The logic for login, registration, and logout is to be ignored or handled separately according to project needs. - Use environment variables for sensitive configurations. # Output Format - A detailed description of the file and folder structure, key components, and necessary configurations for both the backend and the frontend aspects of the Agora Video Meetings app. # Examples - Sample `Meeting` object and `CustomUser` instance creation. # Notes - Further customization may include UI elements, error handling, and additional features like chat or file sharing.