Skip to content

A sample project showcasing how to build a custom React-based frontend for AVideo. Ideal for developers looking to create their own layout using React.

Notifications You must be signed in to change notification settings

WWBN/AVideo-React-Sample

Repository files navigation

AVideo-React-Sample πŸŽ¬βš›οΈ

AVideo-React-Sample is an open-source project demonstrating how to build a custom React-based frontend for AVideo. This serves as a reference implementation for developers looking to create their own layout while integrating with AVideo’s API.

πŸ‘‰ Live Sample: https://react.tutorials.avideo.com/

🌟 Features

βœ” Fully responsive React-based layout
βœ” Uses TailwindCSS for styling
βœ” Supports Dark Mode and Theme Switching
βœ” Includes User Authentication (Login/Logout)
βœ” API integration with AVideo’s backend
βœ” Example video listing, playback, and user interactions
βœ” Easily extendable to support additional AVideo API features


πŸ“Œ Getting Started

1️⃣ Clone the Repository

git clone https://github.com/WWBN/AVideo-React-Sample.git
cd AVideo-React-Sample

2️⃣ Install Dependencies

npm install

3️⃣ Configure Your AVideo Instance URL

To set up your own AVideo instance, create a .env file in the project root:

touch .env

Then, open the .env file and add the following line, replacing your AVideo URL:

VITE_BASE_URL=https://your-avideo-instance.com/

This will ensure that the React app connects to your AVideo backend dynamically.


4️⃣ Run the Development Server

npm run dev

Your React-based AVideo frontend will now be available at:
πŸ‘‰ http://localhost:3000


πŸ›  Tech Stack

  • React βš›οΈ - Frontend framework
  • TailwindCSS 🎨 - Styling
  • Vite ⚑ - Fast development server
  • Fetch API πŸ“‘ - Handles API requests
  • LocalStorage πŸ’Ύ - Stores authentication info

πŸ”Œ API Integration

This project interacts with the AVideo API to fetch videos, handle user authentication, and manage playback.

Example API Call (Login)

const response = await fetch(`${import.meta.env.VITE_BASE_URL}/get.json.php?APIName=signIn`, {
    method: "POST",
    body: JSON.stringify({ user: "admin", pass: "1234" }),
    headers: { "Content-Type": "application/json" },
});
const data = await response.json();

πŸ’‘ Note: API calls use import.meta.env.VITE_BASE_URL, which is set in the .env file.


πŸ“‘ Expanding API Support

Looking to enhance the sample project with more AVideo API functionalities? The AVideo API provides various endpoints for:
βœ… User management (register, profile, subscriptions)
βœ… Live streaming (start/stop live streams, WebRTC integration)
βœ… Monetization (Pay-Per-View, ads, memberships)
βœ… Analytics & Reports (video views, user engagement)

Check out the official AVideo API documentation for a full list of available endpoints:
πŸ“– AVideo API Wiki


πŸ”— Useful Links


πŸ“œ License

This project is open-source and follows the MIT License.


🀝 Contributing

Contributions are welcome! Feel free to submit pull requests or open issues.

πŸ‘¨β€πŸ’» Developed by: Daniel Neto

About

A sample project showcasing how to build a custom React-based frontend for AVideo. Ideal for developers looking to create their own layout using React.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published