View the Live Site
Explore the code »
Video Demos
·
Report Bug
·
Request Feature
Table of Contents
Welcome to QuizMoov! This web-application tests your movie knowledge by giving you a random movie quote and four multiple-choice options. See how high of a score you can get, and keep track of your results by creating an account.
What you can do with MyMoovs:
- Log in with Google or as a Demo User.
- Get quizzes on randomly generated movie quotes.
- Access you saved results and score.
- Use on a phone or any other device.
- See your score visualized on a bar graph created with Chart.js
- Sort your results by newest or oldest.
- Filter results by wins, losses, or all quizzes.
- View Profile summary on profile page.
Things I learned building this project:
- Practiced string manipulation; separated movie quotes from movie titles.
- Implemented useRef to update a state variable, then passing that state through props to change component rendering preferences.
- Bootstrap styling, focusing on develop a theme and aesthetic consistency.
- Used the Chart.js library to create responsive, interactive data visualizations.
- CSS animations in between quiz attempts (slide in, slide out).
Thank you for checking out QuizMoov!
Visit the QuizMoov web app here
Viewing/Sorting your Results
results-video.mp4
Taking Quizzes
quiz-video.mp4
- Created custom design theme
- Added ability to sort and filter quiz results
- Responsive design
- Quiz Data Visualization with Chart.js
- Connect with friends via email and see their results.
See the open issues for a full list of proposed features (and known issues).
Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/amazing-feature) - Commit your Changes (
git commit -m 'Add some amazing-feature') - Push to the Branch (
git push origin feature/amazing-feature) - Open a Pull Request
Distributed under the MIT License. See LICENSE.txt for more information.
Michael Murray - @LinkedIn - [email protected]
Personal Website - https://michael-murray.netlify.app
Here are some resources that I have found helpful: