BrainFlix

Youtube clone web app

This app is built with React for the UI, using functional components and hooks for state and lifecycle management. It uses React Router for client-side routing and Axios to handle RESTful API requests from a local backend.

Skills Used

Axios ・
RESTful API ・
Sass ・
Node ・
Express ・

View Site

This application is built using React for the frontend, leveraging React Router for client-side routing and dynamic URL-based video selection. It uses Axios to perform HTTP requests to a Node.js/Express backend API. The component structure is modular, with separate files for layout elements like Header, Hero, MainContent, and AsideContent, promoting reusability and maintainability. The app also manages video data using React’s useState and useEffect hooks, and ensures smoother user experience with features like useCallback for memoized fetching. Styling is handled using Sass, suggested by the use of BEM-style class names and structure.

The comments section component reads comment data directly from the selected video object and maps through each comment to render it in a styled layout, with consistent structure and BEM naming conventions

Developed a server using Express.js, which handles API requests for retrieving and managing video data. The server uses static assets from a public directory and exposes RESTful endpoints under the /videos route, making it easy to interact with video content, including uploading, fetching, and displaying data on the Front-End