- The Clickster is a web game application where users click images of adorable puppies in order to earn points. You win the game whenever you have clicked all 9 of the puppies. The only catch is that the puppies move in their location with every click...
- The puppy images were found at https://www.pexels.com/search/dog/.
- React.js- UI
- Bootstrap- CSS framework
First thing I did was create the React Client-side boilerplate by typing create-react-app Clicky-game in the command line. Next, I changed into that directory by typing 'cd Clicky-game' in the terminal. After that I typed yarn start to open the app in the browser.
Create-react-app gives you a public folder with a basic index.html page, some basic css for the react template, an App.js file, index.js file, and some other boilerplate files. I only had to alter two things in the index.html page: the title of my app and include a Bootstrap CDN link. I either altered or completely changed the rest of the files, adding my own style. The bulk of the code for this app was done in the src/components directory. I decided to make three total components for my app, however, it could have been made with much more or probably less.
- Card
The card component is where the puppy images are displayed.
- Score
The score component is where the score is displayed.
- Wrapper
The Wrapper component wraps the card component.
I chose not to do a separate header component but it could be done. In fact, you could have the header component include some of the score details.