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:

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