Each day I will attempt to make one React webapp. Wish me luck! 🍀

I used these resources to get me started with React:

• Free Code Camp's JavaScript exercises
• exercism
• React Documentation
• Mozilla Developer Network
• material.io

** The project is hosted at th1rty.herokuapp.com. **

🎨 The art is made with:

• Watercolours
• Piskel Sprite Editor to create the digital art and gifs.
• CSS.

• Collect the Pocky for Mags the Kitten.
• Basic React states.

• Save Toby from being turned into a Goblin by Jareth.
• Super basic React states.

• Cat rolls a dice on click.
• Used every-dice npm package

• Pepper robot becomes angry.
• Uses alerts.

• Used CSS to make the virtual pet.
• Uses a switch case for the cat's emotions.

• Used switch case for player direction.
• Created a grid.

• Frame CSS by Chris Smith
• Bronze styling for the plaque by Alex Bezuska

• Used Interval
• Moon spinner idea from @ddrscott

• Created form using React's Controlled Components.
• Uses a switch case for fortunes.

• Remake of my old Ruby Magic 8 ball app in React.
• CSS used for the illustration.

• Slightly more complex React states
• Continuous animations

• Using Canvas to render a background and moon shape.
• Using Canvas to make Kiki fly around.
• Utilising requestAnimationFrame

• Used fetch to consume Nasa APIs.

• Used fetch to consume the Giphy API.
• Uses parameters to limit the gifs and rating.

• Testing controlled components.
• Using fetch to return the top gif for a search query.

• Used Canvas to render a background with many stars.
• User can add stars with onClick handler.

• Used states & forms to create a to do list.
• Items can be deleted.

• Used states to create a countdown.
• Can be reset.

• Used fetch to retrieve API data.
• Used Promise.all to retrieve multiple things at once.
• Used loading spinner from npm.

• Used states to turn a light on and off.

• Used setInterval and states to type out words one letter at a time.
• Prompt gets user name.

• Used remarkable npm package to render Markdown.
• Used Flexbox to style it.

• Used basic states
• GIMP to create gif.

• Spent the weekend working on The Definitely Ending Story for React Riot hackathon.
• Our team created a point-n-click puzzle story book using React and original watercolour paintings.

• Used CSS to animate layers of an image.

• Harry Potter themed game
• Pick-a-door game.

• Owl can be moved with keyCodes and event listeners.
• Owl can deliver post and eat rats.

• CSS animations
• Uses timers
• Whack-a-Mole Australian Millenial edition

• Use drag and drop and touch handlers for mobile.

• z index for layers
• Youtube embedding with URL parameters.