# Project Structure ``` ├── backend │ ├── src │ │ ├──...

Prompt

# Project Structure ``` ├── backend │ ├── src │ │ ├── config │ │ │ ├── db.config.ts │ │ │ └── env.config.ts │ │ ├── controllers │ │ │ ├── auth.controller.ts │ │ │ └── meeting.controller.ts │ │ ├── middlewares │ │ │ ├── auth.middleware.ts │ │ │ ├── errorHandler.ts │ │ │ └── validatePayload.ts │ │ ├── models │ │ │ ├── meeting.model.ts │ │ │ └── user.model.ts │ │ ├── routes │ │ │ ├── auth.routes.ts │ │ │ └── meeting.routes.ts │ │ ├── types │ │ │ ├── meeting.types.ts │ │ │ └── user.types.ts │ │ ├── utils │ │ │ ├── asyncHandler.ts │ │ │ ├── bcrypt.ts │ │ │ ├── constants.ts │ │ │ ├── data.ts │ │ │ ├── jwt.ts │ │ │ ├── logger.ts │ │ │ └── responseHandler.ts │ │ ├── validations │ │ │ ├── meeting.validation.ts │ │ │ ├── user.validation.ts │ │ │ └── validate.ts │ │ ├── app.ts │ │ └── index.ts │ ├── package-lock.json │ ├── package.json │ └── tsconfig.json └── frontend ├── public │ ├── favicon.svg │ └── icons.svg ├── src │ ├── assets │ │ ├── hero.png │ │ ├── react.svg │ │ └── vite.svg │ ├── components │ ├── hooks │ ├── pages │ │ ├── Dashboard.tsx │ │ ├── Home.tsx │ │ ├── Lobby.tsx │ │ └── Room.tsx │ ├── types │ ├── utils │ ├── App.css │ ├── App.tsx │ ├── index.css │ └── main.tsx ├── eslint.config.js ├── index.html ├── package-lock.json ├── package.json ├── README.md ├── tsconfig.app.json ├── tsconfig.json ├── tsconfig.node.json └── vite.config.ts ``` # Project Structure ``` └── backend └── src └── models ├── meeting.model.ts └── user.model.ts ``` # File Contents ## backend/src/models/meeting.model.ts ```typescript import mongoose, { type Document, Schema, Types } from 'mongoose'; import { MEETING_STATUSES, PARTICIPANT_ROLES, type IMeetingSettings, type IParticipant, type MeetingStatus } from '../types/meeting.types.js'; export interface IMeeting extends Document { title: string; description?: string; meetingCode: string; hostId: Types.ObjectId; status: MeetingStatus; isInstant: boolean; scheduledStartTime?: Date | null; startedAt?: Date | null; endedAt?: Date | null; participants: IParticipant[]; settings: IMeetingSettings; createdAt: Date; updatedAt: Date; } const participantSchema = new Schema<IParticipant>( { user: { type: Schema.Types.ObjectId, ref: 'User', required: true, }, role: { type: String, enum: PARTICIPANT_ROLES, default: 'participant', }, joinedAt: { type: Date, default: Date.now, }, leftAt: { type: Date, default: null, }, }, { _id: false } ); const meetingSchema = new Schema<IMeeting>( { title: { type: String, required: true, trim: true, }, description: { type: String, trim: true, default: '', }, meetingCode: { type: String, required: true, unique: true, lowercase: true, trim: true, index: true, }, hostId: { type: Schema.Types.ObjectId, ref: 'User', required: true, index: true, }, status: { type: String, enum: MEETING_STATUSES, default: 'ongoing', }, isInstant: { type: Boolean, default: true, }, scheduledStartTime: { type: Date, default: null, }, startedAt: { type: Date, default: null, }, endedAt: { type: Date, default: null, }, participants: { type: [participantSchema], default: [], }, settings: { waitingRoom: { type: Boolean, default: false }, allowScreenShare: { type: Boolean, default: true }, allowChat: { type: Boolean, default: true }, muteOnEntry: { type: Boolean, default: false }, }, }, { timestamps: true, } ); const Meeting = mongoose.model<IMeeting>('Meeting', meetingSchema); export default Meeting; ``` ## backend/src/models/user.model.ts ```typescript import mongoose, { type Document, Schema } from 'mongoose'; import { USER_ROLES, type UserRole } from '../types/user.types.js'; export interface IUser extends Document { name: string; email: string; password: string; avatar?: string; role: UserRole; refreshToken?: string | null; createdAt: Date; updatedAt: Date; } const userSchema = new Schema<IUser>( { name: { type: String, required: true, trim: true, }, email: { type: String, required: true, unique: true, lowercase: true, trim: true, index: true, }, password: { type: String, required: true, select: false, }, avatar: { type: String, default: '', }, role: { type: String, enum: USER_ROLES, default: 'user', }, refreshToken: { type: String, default: null, select: false, }, }, { timestamps: true, } ); const User = mongoose.model<IUser>('User', userSchema); export default User; ``` # Project Structure ``` └── frontend └── package.json ``` # File Contents ## frontend/package.json ```json { "name": "frontend", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build": "tsc -b && vite build", "lint": "eslint .", "preview": "vite preview" }, "dependencies": { "@hookform/resolvers": "^5.9.1", "@tailwindcss/vite": "^4.3.3", "axios": "^1.20.0", "react": "^19.2.8", "react-dom": "^19.2.8", "react-hook-form": "^7.90.0", "react-icons": "^5.7.0", "react-router-dom": "^7.18.4", "tailwindcss": "^4.3.3", "zod": "^4.6.7" }, "devDependencies": { "@babel/core": "^7.29.7", "@eslint/js": "^10.0.1", "@rolldown/plugin-babel": "^0.2.3", "@types/babel__core": "^7.20.5", "@types/node": "^24.13.3", "@types/react": "^19.2.18", "@types/react-dom": "^19.2.7", "@vitejs/plugin-react": "^6.1.1", "babel-plugin-react-compiler": "^1.0.0", "eslint": "^10.10.0", "eslint-plugin-react-hooks": "^7.1.1", "eslint-plugin-react-refresh": "^0.5.6", "globals": "^17.12.0", "typescript": "~6.0.2", "typescript-eslint": "^8.69.0", "vite": "^8.3.0" } } ``` i gave you project structure and my models. and also i gave you the package.json which has dependencieds that you should use. i am creating an video meeting application in mern. i want you to generate ui on the basis of this data structure/schema on installed dependencies. right now i want simple ui and then later i will add other functionalities. I want an Home, dashboard, lobby and room page. add form validation & handling using react hook form & zod and use only react icons and setup recommended routing using react-routerdom and i will decide later that how to call apis - via tanstack query or socket

A system prompt was added to support web rendering