'StreamHub' operates as a single-page website, leveraging the TV Maze open API to access comprehensive information about a wide array of movies and television series. This platform welcomes anyone to explore the showcased shows and films, enabling them to express their appreciation through likes and provide insightful comments based on their viewing experience. It serves as a user-friendly hub where individuals can interact with their favorite content and engage with the community by sharing their thoughts and reactions.
- Technology: HTML, CSS & JS
- Tools: VS Code, GIT, GITHUB
Client
Involvement API Integration:
Utilizes the Involvement API to record user interactions such as likes, comments, and reservations. Ensures seamless data synchronization with the Involvement API for real-time updates.
User-Friendly Interfaces:
Home Page: Presents a user-friendly interface displaying a list of items retrieved from the selected API. Comments Popup: Offers a detailed view of selected items with associated comments. Reservations Popup (For Groups of 3 Students): Provides a reservation feature tailored for group interactions.
Efficient Data Retrieval:
Loads data from the selected API to populate the home page with a list of items. Fetches data from the Involvement API to display item likes, comments, and reservations.
Minimized API Requests:
Ensures optimized performance by limiting API requests to only two: One to the base API for data retrieval. One to the Involvement API for user interaction recording and updates.
Interactive User Actions:
"Like" Interaction: Allows users to express their appreciation by clicking the "Like" button, recording interactions in the Involvement API, and updating the screen accordingly. "Comments" Interaction: Enables users to view and post comments with a seamless popup interface. "Reservations" Interaction (For Groups of 3 Students): Facilitates group reservations with an intuitive popup.
Consistent UI Design:
Adheres to the provided wireframes for layout while allowing for customization of design elements including colors, typography, and spacing. Maintains a cohesive design language across all interfaces.
Header and Navigation:
Home Page Header and Navigation: Provides a familiar and structured navigation experience consistent with the provided mockup. User-friendly navigation aids in seamless exploration of the platform's content.
Footer Design:
Home Page Footer: Mirrors the design of the provided mockup, ensuring a polished and professional appearance.
Counter Functionality:
Displays item counts across all interfaces: Home Page: Shows the number of items. Comments Popup: Reflects the number of comments. Reservations Popup (For Groups of 3 Students): Displays the number of reservations.
Unit Testing with Jest:
Implements unit tests using the Jest testing library to verify the accuracy of counter functions. Ensures robust and reliable functionality across the application.
Version Control and Collaboration:
Sets up a GitHub repository and follows Gitflow for efficient version control and collaborative development.
Webpack Configuration:
Configures Webpack to streamline the development workflow, including bundling and asset management. These key features collectively create an engaging and efficient web application, StreamHub, which empowers users to interact with content, leave comments, and make reservations while maintaining a consistent and visually appealing user interface.
To get a local copy up and running, follow these steps.
You have to use this tools in your local machine.
- NPM
- GIT & GITHUB
- Any Code Editor (VS Code, Brackets, etc)
Clone this repository to your desired folder: Example commands:
cd my-folder
git clone https://github.com/Goldinium/StreamHub.git
cd StreamHub
npm install # to install dependenciesTo run the project, execute the following command:
Open live server on you editor
To run tests, run the following command on terminal: Example commands:
Test for webhint errors
npx hint .Test for stylelint errors
npx stylelint "**/*.{css,scss}"Test for eslint errors
npx eslint .Trigger the build process of the project
npm run buildStart the project
npm start👤 Shinn Thant Swam Ye
- GitHub: @Pi1998
👤 Ben
- GitHub: @Goldinium
- Limit the number of like that a user can give to a single movie
- Enable unlike feature which has been liked
Contributions, issues, and feature requests are welcome!
Feel free to check the issues page.
Your support is crucial to the success of this project! There are ways you can contribute and show your support:
-
Provide Feedback: If you've tried out the project or have any suggestions for improvement, we would love to hear from you. Your feedback is invaluable in shaping the future direction of the project.
-
Give a ⭐️ if you like this project!
Remember, your support matters! Whether it's spreading the word, providing feedback, reporting issues, contributing code, or making a donation, every action makes a difference. Together, we can make this project even better.
Thank you for your support and for being a part of this journey!
I would like to give credit to list of contributors:
- Microverse Team
This project is MIT licensed.