I had been focusing on web development and back-end projects since the beginning of 2023, so I decided to shift focus in December and practice ReactJS, the pouplar JS library to build user interfaces. It took me a while to get acquainted with concepts like props and state, but after developing several practice projects I feel much more comfortable. Following are the apps I developed during these last few weeks of intense and deliberate React practice:
Random Quote Generator
Certification project from freeCodecamp. This app shows you a random quote and it’s author. You can request a new quote by clicking a button. It also features a button that lets you tweet the quote.
Specs | View and try out the project in Codepen
Markdown Previewer
Certification project from freeCodecamp. Use React to build an app that let’s you input raw markdown text and and output the text as you would see it on the browser, with all the proper styling.
Specs | View and try out the project in Codepen
Drum Machine
Certification project from freeCodecamp. Build a user interface with React that outputs different drum sounds when the user clicks on drum pad elements displayed on the screen. Each drum pad is marked with a letter. The sound must also be triggered and the name of the sound displayed when the user presses the key on the keyboard that corresponds to the letter on the drum pad.
Specs | View and try out the project in Codepen
JavaScript Calculator
Certification project from freeCodecamp. Build a basic calculator that adds, subtracts, multiply and divides. Use React to keep track of state. The calculator must handle several corner cases like the user typing several operands together, or starts a number with a zero.
Specs | View and try out the project in Codepen
Build a 25-5 Clock
Certification project from freeCodecamp. This one was quite a challenge, and took me several days to complete. Build a 25-5 clock for those who want to follow the Pomodoro technique of time management (25 minutes of work followed by a 5 minute break). The project also supports modifying the session and break times to make them more or less than 25 or 5 minutes. You need to use React to keep track of state and props and also use some React life cycle methods.
Specs | View and try out the project in Codepen
To Do List
Challenge project from CS50 Beyond.This is the canonical app to develop when you start learning React concepts. This app let’s you add and delete tasks, and summarizes how many tasks are on your task list at all times.
Flashcard App
Challenge project from CS50 Beyond. This app is slightly more elaborate than the To Do app. It features two main views: Card Editor and Card Viewer. You can toggle from one to the other by pressing a button. Similarly, in the Viewer mode, you can click on a question to reveal the answer (like turning around a real flashcard). You can also click a button to go to another card. In the Editor mode, you can add new cards via two input fields (one for the question and one for the answer), or delete a card by pressing a button.
Currency Exchange App
Challenge project from CS50 Beyond. As the other two, this app makes extensive use of props and state, and also makes an API call to an external website that serves currency exchange information. The user interface shows two input fields: one, where you input the quantity of the base currency, and the other where the app shows you automatically the conversion to any currency found in a drop down menu. Since this app uses my own API key and I have removed it before pushing to Github, the Live Demo will not work (it will only show you how the user interface looks). You will need to add your own key if you want to make it work.