React Practice
Update Notice
I am in the process of revisiting the React framework. Expect changes to the repository, with a review of existing projects and the possibility of removing demos altogether.
2021 04 22
react-tutorial
Recreate the demo from the tutorial on reactjs.org.
showcase
Provide a container for the projects created in this repository (currently only in UI, awaiting for React demos to actually showcase).
nextjs-tutorial
Recreate the demo from the tutorial on nextjs.org.
Previous Projects
| Name | Goal | Keyword |
|---|---|---|
| 01 - Who's That Pokemon? | Play a simple game inspired by the pokemon anime | styled-components, react-spring, API |
| 02 - FreeCodeCamp Podcast App | Listen to the freeCodeCamp podcast with style | styled-components, RSS |
| 03 - SVG Watch | Relate the current number of seconds, minutes and hours through vector graphics | svg |
| 04 - Timer Application | Count down to arbitrary amount of time | styled-components, react-spring |
| 05 - Double Slider Form | Slide between a sign up and a sign in form | form, css transition |
| 06 - F1 Quiz | Test your knowledge of an F1 grand prix. | styled-components |
| 07 - Tickets Booking App | Reserve seats in an hypothetical movie theater | theme, styled-components, grid |
| 08 - F1 Play | Predict a few results for an upcoming F1 race. | carousel, styled-components |
| 09 - Books by Title | Fetch books from the openlibrary API and display them through SVG elements. | useState, useRef |
| 10 - Concentration | Create a memory-based game in which cards are flipped and matched in pairs. | useState, styled-components, react-spring |
| 11 - Smart Watch | Create a series of independent applications for a hypothetical smart watch | useState, useRef, useEffect |
| 12 - React Abstraction(s) | Practice with the framework to create a reusable component through different layers of abstraction. | createElement, jsx, component |
| 13 - Generative Data Viz | Recreate and improve this visualization. | d3, svg, data |
| 14 - Game of Life | Using a canvas element and requestAnimationFrame recreate the basic structure of the game of life | canvas, requestAnimationFrame, previousState |
| 15 - Traffic Jam | Highlight the change in traffic with two visualization: a bar chart and an SVG illustration. | d3, svg, generative |
| 16 - Surf World League | Highlight the number of championship won by countries and through various surfing competitions. | d3, svg, generative |
| 17 - Star Wars Opening Crawls | Fetch the opening crawls for Star Wars movies and animate the text with React Spring. | api, spring |
| 18 - Contact US | Create an interactive form to check for a valid US phone number. | hooks, svg, animation |
| 19 - Exact Change | Develop a game in which you are tasked to find the exact change, in coins, for a random sum. | svg, grid |
| 20 - Binary Counter | Count in binary with a class component and a series of light bulbs. | class, componentWillUnmount, interval |
| 21 - Line Charts | Practice with hooks, fetch and d3. | useEffect, fetch, d3 |
| 22 - Tomorrow's List | Practice with hooks, useState and useReduce. | useState, useReduce |
| 23 - Mobile Usage Stats | Highlight key statistics for an hypothetical, almost random cellphone plan. | d3, svg |