This is my 30 apps in 30 days project.

What is this project?

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.

---

Day 1: Collect Pocky 😋

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

Day 2: Escape the Labyrinth/Save Toby 👶

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

Day 3: Dice 🎲

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

Day 4: Pepper 🤖

• Pepper robot becomes angry.
• Uses alerts.

Day 5: Good Egg 🥚

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

Day 6: Game Gal - mini food collecting game. 🎮

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

Day 7: Moving Picture 🖼️

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

Day 8: Werewolf 🐺

• Used Interval
• Moon spinner idea from @ddrscott

Day 9: Fortune 🔮

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

Day 10: Magic 8 Ball 🎱

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

Day 11: L'eggo my Eggo!

• Slightly more complex React states
• Continuous animations

Day 12: Kiki 🎃

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

Day 13: APOD API ✨

• Used fetch to consume Nasa APIs.

Day 14: Giphy API

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

Day 15: Giphy Search

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

Day 16: Starry Night

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

Day 17: To Do List

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

Day 18: Countdown

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

Day 19: Cats - Studio Ghibli API

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

Day 20: Light goes on, Light goes off.

• Used states to turn a light on and off.

Day 21: Hogwarts Letter.

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

Day 22: Markdown Input & Output

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

Day 23: Clover 🍀

• Used basic states
• GIMP to create gif.

Day 24: React Riot entry: The Definitely Ending Story.

• 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.

Day 25: Blush

• Used CSS to animate layers of an image.

Day 26: Trapdoor

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

Day 27: Owl Post game

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

Day 28: Avocado Smash! 🥑

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

Day 29: Donut Drop 🍩

• Use drag and drop and touch handlers for mobile.

Day 30: Watch TV with Ruby & Mags 📺

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