This is a React implementation of 50 projects in 50 days, a collection of 50 Javascript apps.
| React hooks | Other tech | ||
|---|---|---|---|
| 01 | Expanding Cards | useState | |
| 02 | Progress Steps | useState | CSS animation |
| 03 | Rotating Navigation Animation | useState | |
| 04 | Hidden Search Widget | useRef, useState | FontAwesome |
| 05 | Blurry Loading | useEffect, useState | |
| 06 | Scroll Animation | forwardRef, useEffect, useRef, useState | |
| 07 | Split Landing Page | useState | |
| 08 | Form Wave | useState | |
| 09 | Sound Board | Audio | |
| 10 | Dad Jokes | useEffect, useState | fetch icanhazdadjoke |
| 11 | Event Keycodes | useEffect, useState | |
| 12 | FAQ Collapse | useState | FontAwesome |
| 13 | Random Choice Picker | useCallback, useEffect, useRef, useState | |
| 14 | Animated Navigation | useState | |
| 15 | Incrementing Counter | useEffect, useState | |
| 16 | Drink Water | useState | |
| 17 | Movie App | useEffect, useState | fetch TMDB |
| 18 | Background Slider | useState | |
| 19 | Theme Clock | useEffect, useState | |
| 20 | Button Ripple Effect | useState | CSS keyframes |
| 21 | Drag N Drop | useRef, useState | |
| 22 | Drawing App | useRef, useState | |
| 23 | Kinetic Loader | CSS keyframes | |
| 24 | Content Placeholder | useEffect, useState | CSS keyframes |
| 25 | Sticky Navbar | useEffect, useRef, useState | |
| 26 | Double Vertical Slider | useEffect, useRef, useState | |
| 27 | Toast Notification | useState | |
| 28 | Github Profiles | useState | axios GitHub |
| 29 | Double Click Heart | useState | CSS keyframes |
| 30 | Auto Text Effect | useEffect, useRef, useState | setInterval |
| 31 | Password Generator | useState | |
| 32 | Good Cheap Fast | useState | CSS keyframes |
| 33 | Notes App | useEffect, useState | marked-react |
| 34 | Animated Countdown | useState | CSS keyframes |
| 35 | Image Carousel | useCallback, useEffect, useRef, useState | setInterval |
| 36 | Hoverboard | useState | |
| 37 | Pokedex | useEffect, useRef, useState | fetch pokeapi |
| 38 | Mobile Tab Navigation | useState | |
| 39 | Password Strength Background | useState | |
| 40 | 3D Background Boxes | useState | |
| 41 | Verify Account UI | useEffect, useRef, useState | |
| 42 | Live User Filter | useEffect, useState | |
| 43 | Feedback UI Design | useState | |
| 44 | Custom Range Slider | useRef, useState | |
| 45 | Netflix Mobile Navigation | useState | |
| 46 | Quiz App | useState | |
| 47 | Testimonial Box Switcher | useEffect, useRef, useState | CSS keyframes |
| 48 | Random Image Feed | Math.random | |
| 49 | Todo List | useEffect, useState | |
| 50 | Insect Catch Game | useState |
You can learn about the projects at 50 projects in 50 days.
The apps are deployed at 50p.vercel.app