Explore the live demonstration of the project: BrandVid
Description
BrandVid is all about providing a bespoke video hosting platform that emphasizes brand consistency, content control, and a professional user experience. It caters to businesses, educators, and creative professionals who need a reliable and customizable solution for hosting and sharing their video content.
Key Features and Descriptions User Authentication
Signup & Login: Users can create accounts and log in using their email and password, ensuring secure access to the platform. Account Verification: New users receive an email to verify their account, adding an extra layer of security and confirming the user's identity. Password Reset: Users have the option to reset their passwords in case they forget them, ensuring they can always regain access to their accounts. Video Navigation
Video Pages: Users can easily browse and navigate through different video pages, each dedicated to a single video. Next/Previous Buttons: Navigate between videos using next and previous buttons. These buttons will be hidden if there are no more videos in that direction, providing a smooth user experience. Share Links: Users can share links to specific videos, allowing for easy dissemination of content across different platforms and media. Admin Controls
Video Upload: Admins can upload videos, providing a title and description for each. This feature ensures that videos are properly categorized and described. Video Management: Admins can manage the uploaded videos, including editing titles, descriptions, and other metadata to keep the content up-to-date and relevant. Video Page Features
Single Video Display: Each video page is dedicated to one video, ensuring a focused and distraction-free viewing experience. Navigation Controls: Next and previous buttons enable seamless navigation through the video library. These buttons are hidden if there are no more videos to navigate to. Video Controls: Common video controls (play, pause, volume adjustment, etc.) are available, giving users full control over their viewing experience. Branding: A prominently displayed business logo at the top of the video page reinforces brand identity and professionalism. Share Button: A share button allows users to share the link to the current video page easily, promoting the content and brand. Use Cases Business Branding
Companies can use BrandVid to host promotional videos, product demos, tutorials, and other content that aligns with their brand identity. Ensures all videos are consistently branded, providing a professional and cohesive look. Educational Content
Educators and institutions can use BrandVid to upload and manage lecture videos, tutorials, and other educational content. Provides a controlled environment for students and learners to access educational materials. Creative Professionals
Filmmakers, videographers, and other creatives can showcase their work in a branded environment, ensuring their content is presented professionally and consistently. Allows for easy sharing and promotion of their video content.
If you want to see the database schema, you can check the database schema file.
Folder Structure
app
├── admin
│ ├── courses
│ │ ├── _components
│ │ │ ├── columns.tsx
│ │ │ └── data-table.tsx
│ │ ├── [courseId]
│ │ │ ├── _components
│ │ │ │ ├── action.tsx
│ │ │ │ ├── course-update.tsx
│ │ │ │ ├── image-form.tsx
│ │ │ │ └── video-form.tsx
│ │ │ ├── page.tsx
│ │ │ └── video
│ │ │ ├── _components
│ │ │ └── [videoId]
│ │ │ ├── _compoenents
│ │ │ │ ├── videoId-action-form.tsx
│ │ │ │ └── videoId-form.tsx
│ │ │ └── page.tsx
│ │ ├── new
│ │ │ └── page.tsx
│ │ └── page.tsx
│ └── layout.tsx
├── api
│ ├── auth
│ │ └── [...nextauth]
│ │ └── route.ts
│ ├── courses
│ │ ├── [courseId]
│ │ │ ├── publish
│ │ │ │ └── route.ts
│ │ │ ├── route.ts
│ │ │ ├── unpublish
│ │ │ │ └── route.ts
│ │ │ └── video
│ │ │ ├── route.ts
│ │ │ └── [videoId]
│ │ │ ├── publish
│ │ │ │ └── route.ts
│ │ │ ├── route.ts
│ │ │ └── unpublish
│ │ │ └── route.ts
│ │ └── create
│ │ └── route.ts
│ └── uploadthing
│ ├── core.ts
│ └── route.ts
├── auth
│ ├── confirm
│ │ └── page.tsx
│ ├── error
│ │ └── page.tsx
│ ├── layout.tsx
│ ├── login
│ │ └── page.tsx
│ ├── new-password
│ │ └── page.tsx
│ ├── register
│ │ └── page.tsx
│ └── reset
│ └── page.tsx
├── courses
│ ├── _components
│ │ └── video-player.tsx
│ └── [courseId]
│ └── page.tsx
├── (dashboard)
│ ├── _components
│ │ ├── avatarImage.tsx
│ │ ├── course-card.tsx
│ │ ├── course-list.tsx
│ │ ├── logo.tsx
│ │ ├── navbar.tsx
│ │ └── usermenu.tsx
│ ├── layout.tsx
│ └── page.tsx
├── globals.css
├── hooks
│ ├── use-confetti.ts
│ └── use-debounce.ts
├── layout.tsx
├── providers
│ ├── confetti-provider.tsx
│ ├── provider.tsx
│ └── toast-provider.tsx
└── settings
└── page.tsxTable of Contents
BrandVid is built using the following technologies:
- TypeScript: TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.
- Next.js: Next.js is a React framework for building server-side rendered and statically generated web applications.
- Tailwind CSS: Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces.
- Prisma: Prisma is a modern database access toolkit that makes it easy to build type-safe, composable database access.
- React Hook Form: React Hook Form is a performant, flexible and extensible forms with easy-to-use validation.
- React Query: React Query is a data-fetching library for React that helps you fetch, cache, and update data in your React applications.
- ESLint: ESLint is a static code analysis tool for identifying problematic patterns found in JavaScript code.
- Prettier: Prettier is an opinionated code formatter.
- Shadcn-UI: Shadcn UI is a React UI library that helps developers rapidly build modern web applications.
- Zustand: Zustand is a small, fast and scalable bearbones state-management solution.
- NextAuth.js: NextAuth.js is a complete open source authentication solution for Next.js applications.
- useHooks TS: useHooks TS is a collection of reusable React hooks.
- NeonDb: NeonDb is a simple, fast, and lightweight database for your next project.
- Zod: Zod is a TypeScript-first schema declaration and validation library.
- Vercel: Vercel is a cloud platform for frontend developers, providing the frameworks, workflows, and infrastructure to build a faster, more personalized Web.
To get this project up and running in your development environment, follow these step-by-step instructions.
In order to install and run this project locally, you would need to have the following installed on your local machine.
Step 0:
Note: The application uses Prisma for ORM, therefore, you can read documentation of prisma here .env file.
Note: The application uses AuthJs for Authentication and User Management, therefore, you need to create Auth account here and sets the AUTH_SECRET environment variables in .env file.
Note: The application uses Uploadthing for file uploads, therefore, you need to create Uploadthing account here and sets the UPLOADTHING_APP_ID and UPLOADTHING_SECRET environment variables in .env file.
Note: The application uses MuxPlayer for image and video preload, therefore, you need to create Cloudinary account here and sets the MUX_TOKEN_SECRET, and MUX_TOKEN_ID environment variables in .env file.
Note: The application uses Github and Google for OAuth, therefore, you need to create Github here and Google OAuth account here and sets the GITHUB_CLIENT_ID, GITHUB_CLIENT_SECRET, GOOGLE_CLIENT_ID, and GOOGLE_CLIENT_SECRET environment variables in .env file.
Also, you need to create a JWT template in Clerk and define the JWKS Endpoint as a provider inside /auth.config.js file.
Step 1:
Download or clone this repo by using the link below:
git clone https://github.com/abudusamad/VideoPlatform.gitStep 2:
Execute the following command in the root directory of the downloaded repo in order to install dependencies:
npm installor install with legacy peer dependencies which fixes with incompatible peer dependencies
npm install --legacy-peer-depsStep 3:
Execute the following command in order to run the development server locally:
npm run devStep 4:
Open http://localhost:3000 with your browser to see the result.
All scripts are defined in the package.json file. Here is a list of all scripts:
| Script | Action |
|---|---|
npm install |
Installs dependencies |
npm run dev |
Starts local dev server at localhost:3000 |
npm run build |
Build your production site to ./dist/ |
npm run start |
Start your production site locally |
npm run lint |
Run ESLint |
Environment variables can be used for configuration. They must be set before running the app.
Environment variables are variables that are set in the operating system or shell, typically used to configure programs.
BrandVide uses . You need to create an accounts on Convex and Clerk and get the required credentials to run the app.
Create a .env file in the root directory of the project and add the following environment variables:
AUTH_SECRET=
GITHUB_CLIENT_ID=
GITHUB_CLIENT_SECRET=
GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=
NEXT_PUBLIC_URL=http://localhost:3000
RESEND_API_KEY=
MUX_TOKEN_ID=
MUX_TOKEN_SECRET=
UPLOADTHING_SECRET=
UPLOADTHING_APP_ID=You can create an optimized production build with the following command:
npm run buildThe easiest way to deploy this Next.js app is to use the Vercel Platform.
You can also deploy this Next.js app with Netlify.
Check out Next.js deployment documentation for more details.
- 🚀 Next.js 14 with server actions
- 🔑 Credentials Provider
- 🌐 OAuth Provider (Social login with Google & GitHub)
- 🔒 Forgot password functionality
- ✉️ Email verification
- 👥 User roles (Admin & User)
- 🔓 Login component (Opens in redirect or modal)
- 📝 Register component
- 🤔 Forgot password component
- ✅ Verification component
⚠️ Error component- 🔘 Login button
- 🚪 Logout button
- 🚧 Role Gate
- 🔍 Exploring next.js middleware
- 📈 Extending & Exploring next-auth session
- 🔄 Exploring next-auth callbacks
- 👤 useCurrentUser hook
- 🛂 useRole hook
- 🧑 currentUser utility
- 👮 currentRole utility
- 🖥️ Example with server component
- 💻 Example with client component
- 👑 Render content for admins using RoleGate component
- 🛡️ Protect API Routes for admins only
- 🔐 Protect Server Actions for admins only
- 🔔 Enable/disable two-factor auth in Settings page
- 🔄 Change user role in Settings page (for development purposes only)
- 🙋♂️Client form validation and handling using react-hook-form
- ✅❌Server error and success handling using react-toastisfy
- 📝Server form validation and handling using zod
- 🙎♀️Admin Can Create, Update, Delete, and View Videos.🙎♀
- Users can only view videos and share the link to other users
I'd like to express my gratitude to the following people who helped me with this project and made it possible:
- Shadcn UI
- Zustand
- useHooks TS
- Sonner
- Next Themes
- Emoji Picker React
- React Dropzone
- React Textarea Autosize
- Vercel
- Next.js Documentation
- Rea>ct Documentation
- Tailwind CSS Documentation
- Zustand Documentation
- useHooks TS Documentation
- Sonner Documentation
- Next Themes Documentation
- Emoji Picker React Documentation
- React Dropzone Documentation
- React Textarea Autosize Documentation
- Vercel Documentation
-Twitter -LinkedIn -Email -Github
This project is licensed under the MIT License - see the LICENSE file for details.
Please read the CODE_OF_CONDUCT for details on our code of conduct.
Please read the SECURITY for details on our security policy.