BrainFlix Project

BrainFlix is an innovative video streaming platform prototype, designed to showcase a modern, user-friendly interface for viewing and uploading video content. This project is structured in three sprints, each focusing on different aspects of the application, culminating in a fully functional front-end coupled with a custom-built API.

The platform aims to provide an intuitive experience for users, featuring a responsive design, dynamic video content, and interactive elements, all developed using the latest web technologies.

Check out the BrainFlix API here: arjun-sahjpaul-brainflix-api

Problem Statement

The market needs a contemporary video streaming platform that prioritizes user experience, offering intuitive navigation, immediate content updating, and easy content management.

Solution

BrainFlix addresses this need by delivering a sophisticated yet user-friendly interface, facilitating seamless video swapping, and content interaction, all backed by a robust, custom-built API that ensures a dynamic and engaging user experience.

Project Overview

BrainFlix Sprint 1

Objective

Create a responsive and functional app prototype based on provided designs, ensuring the foundation is set for future development and integration with a backend API.

Key Deliverables

• Develop dynamic components for real-time user interaction without hardcoding.
• Implement a responsive layout that adheres to the provided design mockups.
• Utilize React for building the application, ensuring modularity and reusability of components.
• Employ SASS for styling, leveraging its capabilities for maintainable and scalable CSS.

BrainFlix Sprint 2

Objective

Enhance the prototype with additional functionality, integrating a mock API for dynamic data retrieval and introducing new pages for enriched user interaction.

Key Enhancements

• Introduce routing to enable navigation between the main video display and the video upload page.
• Fetch video data dynamically from the provided mock API, updating the UI in real-time.
• Implement the ability to post new comments and render them instantaneously, enhancing user engagement.

BrainFlix Sprint 3

Objective

Transition from a mock API to a custom-built API, refining the application’s functionality and ensuring all data interactions are fully operational and persistent.

Final Touches

• Develop a custom API to handle video data operations, ensuring seamless data flow and storage.
• Enable video upload functionality, allowing users to add new content to the platform.
• Ensure the application is robust, responsive, and mirrors the initial design specifications closely.

To Run:

Server:

Clone/download the BrainFlix API Server

VSCode/terminal: run node server in project folder

Navigate to http://localhost:8080/ in your browser

Client:

VSCode/terminal: run npm i / npm install in project folder

VSCode/terminal: run npm start in project folder

Navigate to http://localhost:3000/ in your browser

Screenshots