Brain Flix

Description of this project

Main Page

The main page of the BrainFlix project is designed to allow users to explore videos and view detailed information for each video. It fetches the list of videos through the GET endpoint of the REST API, and users can also view specific video details based on the video's unique ID. The "like" button allows users to update the like count for each video, and there are features for adding and deleting comments. I used React hooks such as useState and useEffect to manage state, and I conducted API testing using Postman to verify data consistency.

The comment feature displays relative time formats like "just now" and "1 day ago." The page is fully responsive, providing an optimal user experience across various screen sizes. Additionally, Flexbox and the BEM methodology were used to maintain consistent design and layout.


Upload Page

The upload page allows users to upload new videos. Users can enter the title and description of the video and choose an image to use as the thumbnail. Then, through a POST request, the video data is stored in the server's JSON file, ensuring the data persists even after the server restarts. I implemented the feature to send video data to the API upon form submission using React's event handlers.

Additionally, form validation checks for errors and provides alerts to the user if necessary. The version control and collaboration were facilitated using the Git Flow strategy, and page transitions were implemented smoothly using react-router-dom. The entire page is responsive, ensuring stable functionality across various devices.


Overall

The BrainFlix project served as an opportunity to deepen my understanding of React, Git Flow, and the communication between frontend and backend. I gained experience in effectively managing state using various React hooks and exchanging data between the client and server through RESTful API design. Through this project, I was able to learn how to implement a fully functional full-stack web application.