Interactive Media Toolbar Enhancement Challenge Using React.js

Objectives: Develop an enhanced version of the platform's toolbar by incorporating new features that boost user interaction and provide a seamless experience.

Tasks:

Interactive Rating System:

Create a RatelovieButton component that allows users to rate a movie from $1$ to $5$ stars.

Implement functionality to display a confirmation message once a rating is submitted.

Commit: "Implement RateMovieButton with user feedback."

Dynamic Movie Selector:

Add a movie selector dropdown to the toolbar that lists available movies.

Ensure that selecting a movie dynamically updates the movie details in the toolbar and appropriately adjusts the RateMovieButton to reflect the selected movie.

Commit: "Add dynamic movie selector to toolbar."

Simplified Upload Feedback:

Modify the

component to alert users when an image is being uploaded upon button click, removing the need for a separate progress indicator.

Commit: "Enhance UploadButton with simplified user feedback."

Customization & Styling:

Apply CSS styles to enhance the toolbar's appearance, focusing on responsiveness and a user$-$friendly design.

Ensure that the styling is consistent with the platform's overall design language.

Commit: "Style toolbar components for improved user experience."

Submission Guidelines

Start from scratch or utilize an existing codebase to integrate the enhanced toolbar functionality.

Organize your code efficiently, with comments explaining the logic where necessary, adhering to best React.js practices.

Test your application thoroughly to confirm all features are functioning as expected and provide an intuitive and engaging user interface.

Submit your App.js file and any other relevant files $($such as CSS files$)$ to Canvas before the deadline.

Evaluation Criteria

Functionality: All features should be correctly implemented and function as described.

Code Quality: Code should be clean, well$-$commented, and follow React.js best practices.

User Experience: The toolbar and its new features should be intuitive, easy to use, and enhance the overall user experience.

Design: The application should be visually appealing, with new features integrated smoothly into the existing design.