BrainFlix is a full-stack video streaming platform that mimics the functionality of popular video-sharing websites like YouTube. The app allows users to view, upload, and interact with videos, providing a dynamic and engaging user experience. This project was built to showcase modern development practices and seamless front-end and back-end integration.
This is an example of how to install the prerequisite softwares.
- npm
npm install npm@latest -g
Below is an example of how you can install and set up the Brainflix application.
- To start the front-end
- Change to "frontend" folder
cd client - Run the front-end
npm run dev
- To start the back-end (Local JSON storage)
- Change to "api" folder
cd api - Run the back-end
npm run start
- React.js: For building the interactive and responsive user interface.
- Node.js & Express.js: Backend server to handle API requests and routing.
- Local JSON Storage: The application uses JSON files as its backend to store video data, including video information and comments.
- RESTful APIs: For efficient data communication between the front-end and back-end.
- Sass: For styling and creating a visually appealing UI.
The BrainFlix Video Streaming App enables users to explore a variety of video content, leave comments, and upload new videos, simulating the experience of a professional video streaming platform. Key features of the app include:
- Video Upload and Management: Users can upload video files along with their titles, descriptions, and other metadata, which are stored in local JSON files within the backend folder.
- Commenting System: Integrated commenting functionality allows users to leave comments on individual videos, facilitating interaction and user engagement.
- Responsive Design: The UI, built with React.js and styled with Sass, ensures that the application is responsive and provides a consistent experience across different devices and screen sizes.
- Dynamic Video Player: The app features a custom video player that supports playback controls, displays video details, and shows a comments section.
By leveraging JSON files to manage the backend data, the BrainFlix app demonstrates how a full-stack application can be developed with local storage, providing a simplified yet effective solution for data handling and management.