Guess the Animal is an online interactive children’s game platform where a user matches a sound to a corresponding animal image. The web platform has additional interactive components, such as favoriting an animal, playing with flashcards, and a dashboard where a user can view their contact information and see a list of their favorite animals.
Existing users will be able to login to the site using their email and password credentials
New visitors will be able to register for an account using the Registration form
The Dashboard will appear in a default state where the user has not favorited any animals and their profile picture will not be populated.
The favorite animals list will display a list of animals that the user has stared from the animal flashcards page
A user will be able to edit their profile information by clicking the pencil icon.
From the editing view, a user can upload a profile image and change any contact information in the editable fields.
The floppy disc icon will enable the user to save their info.
Flashcards of animal facts will be available to the user. If the user is logged into their account, they will be able to star their favorite animal from the flashcards view.
If a user does not have an account, the star will disappear.
All of the flashcards have a front and back view. The front view will display an image of the animal with its name. The back of the card will display the animal fact.
The Game component will display an image of an animal in which the user will listen to the audio samples by clicking the sound buttons. Based on what they heard, they will have to select the correct answer.
Correct Answer View
Incorrect Answer View
Finished View with Score Summary
The Finished view will render a Score Summary that will display the amount of correct answers and incorrect answers the user selected. The total score is calculated 5 points for every correct answer chosen.
Perform the following steps to download the project and run it on your local dev environment
Fork the repository
Clone the repository
Execute the following command:
Install Dependencies
Execute the following command:
- npm i
Create a db instance
Execute the following command:
- createdb animals
Run the seed file
Execute the following command:
- npm run seed
Then Run Dev Environment
Execute the following command:
- npm run dev
- https://www.youtube.com/watch?v=sVYrH166LXM&ab_channel=GreatAdib
- https://www.npmjs.com/package/multer
- https://www.youtube.com/watch?v=UX5HIrxbRUc
- https://www.npmjs.com/package/confetti-js
- https://codepen.io/arronhunt/pen/WWOOeO
- https://www.joshwcomeau.com/animation/3d-button/
- https://blog.hubspot.com/website/css-hover-animation
- https://lodash.com/docs/4.17.15#shuffle
- https://cssgradient.io/
- https://box-shadow.dev/