Navigate back to the homepage

freeCodeCamp Pomodoro Clock 00: create-react-app Development Environment

Aryan Jabbari
January 19th, 2020 · 3 min read

freeCodeCamp Pomodoro Clock 00: create-react-app Development Environment

Congratulations on getting this far in your coding journey! You tackled HTML, CSS and JavaScript. You learned a front-end library or two and are ready to tackle the freeCodeCamp project. This is huge!

This tutorial is the first installment of a tutorial series where I cover the freeCodeCamp Pomodoro Clock project. I’ll be following the spec pretty closely including passing 100% of the tests in the freeCodeCamp test suite.

In this tutorial series, we’ll:

  • Stand up a new React application using create-react-app
  • Integrate the freeCodeCamp test suite tool
  • Build the freeCodeCamp Pomodoro Clock using React
  • Style the freeCodeCamp Pomodoro Clock using Tailwind CSS
  • Add TypeScript to your Pomodoro Clock code
  • Deploy our application to Heroku
  • Deploy our application to Netlify

In this specific tutorial, we’ll cover the first two bullets:

  • Stand up a new React application using create-react-app
  • Integrate the freeCodeCamp test suite

Lastly, if you are more of a video learner, please follow along with the video below.

Who Shouldn’t Use This Tutorial

This tutorial series is meant to get you started on the Pomodoro Clock. Funnily enough, I recommend you DON’T use this tutorial if you haven’t tried to tackle this project yourself. It’s best to try a project yourself and get off that tutorial treadmill.

Additionally, this tutorial series assumes you know the basics of HTML, CSS and JavaScript. Just the basics though. No expertise needed!

Who Should Use This Tutorial

If you tried to get started on the Pomodoro Clock but are completely at a loss for where to start then this is for you. However, as mentioned above, if you haven’t even tried, I suggest you bookmark this tutorial and give getting started a shot by yourself.

Stand Up a New React Project with create-react-app

We first need to bootstrap a new React application. create-react-app is a popular tool for doing just that. It sets up an entire development environment and is super easy to use.

Open your Terminal and navigate to the folder where you have your practice projects. Assuming you already have node.js and npm (which comes with node) installed, run:

1npx create-react-app pomodoro-clock

If run successfully, you’ll have a new directory in your practice projects directory called /pomodoro-clock. Awesome!

Running the Create React App Template

Now that you have the basic Create React App installed on your local computer, it’s time to stand up the development server.

Before we continue, let’s talk about the development server. Realize that it’s a development server which means it’s meant for developers like us. It has features that makes developers’ lives easier, such as hot reloading. With hot reloading, when we change a file, the application will reload itself so you can see the changes you made. It’s a pretty nifty tool.

To stand up your development server, go into your newly created directory with cd pomodoro-clock in your Terminal. From that directory, run npm run start. When that is finished running, visit http://localhost:3000/ to confirm everything was done correctly.

Give the development server a spin! Open up your project in your favorite text editor and open up src/App.js. Edit some text. Go back to http://localhost:3000/ and witness the magic of hot reloading.

Adding the freeCodeCamp Test Suite Tool

freeCodeCamp created a tool for running their test suite that can be easily integrated into your create-react-app template.

The freeCodeCamp test suite tool is located at https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js (only click if you can somehow read minified JavaScript 😝). We need this JavaScript code to run in our React application. To do this, we’ll use a <script> tag.

In your text editor, open public/index.html. This is the entry point to which the React application is loaded. The specifics about that are not very important at this very moment of your coding journey so I’ll leave them out.

We’ll link to the JavaScript script above right before the closing <html> of public/index.html. Your index.html should look as follows (comments deleted for brevity):

1<!-- /public/index.html -->
2<!DOCTYPE html>
3<html lang="en">
4 <head>
5 <meta charset="utf-8" />
6 <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
7 <meta name="viewport" content="width=device-width, initial-scale=1" />
8 <meta name="theme-color" content="#000000" />
9 <meta name="description" content="Web site created using create-react-app" />
10 <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
11 <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
12 <title>React App</title>
13 </head>
14 <body>
15 <noscript>You need to enable JavaScript to run this app.</noscript>
16 <div id="root"></div>
17 </body>
18 <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
19</html>

Since you have your development server running, you can go to http://localhost:3000/ and see the test tool at the top-left of your application:

Test Suite

Click the drop-down and check out the Pomodoro Clock tests. We already passed one! Only 28 to go! We’ll do one of them next!

Passing Your First Test

If you select “Pomodoro Clock” from the test suite dropdown (pictured above), click “Run Tests” then “Tests,” you’ll see a number of tests shown.

The first one reads: “1. I can see an element with id=“break-label” that contains a string (e.g. “Break Length”).” When I read this, I imagine any HTML element with a string inside of it. Now, since there’ll be a string inside of it, I’ll use the <p> HTML element.

I’ll delete most of App.js and insert the <p> element with a string that reads “Break”:

1// src/App.js
2import React from 'react';
3import './App.css';
4
5function App() {
6 return (
7 <div className="App">
8 <p id="break-label">Break</p>
9 </div>
10 );
11}
12
13export default App;

Go back to http://localhost:3000, click “Run Tests” and “Tests” again. Congratulations! You’re passing your first test!

👏 You Made It!

Your development server is all set up and you’ve passed one test. You’re ready to absolutely crush it! Go through the freeCodeCamp Pomodoro Clock project spec and attempt the rest of the project yourself. If you get stuck, come on back to get unstuck!

If you enjoyed this tutorial, follow me at:

If at any point you got stuck in this tutorial, please review the code on GitHub.

If you are interested in the freeCodeCamp Random Quote Machine implementation, please take a look at my videos on YouTube.

Fun Fact

When I made my Pomodoro clock four years ago, freeCodeCamp recommended Angular.js. You can view the code on my GitHub.

📧 Join my email list and get notified about new content

Stay updated with all my blog posts and future randomness!

More articles from The WebDev Coach

User Registration with a NestJS GraphQL Server and Prisma

User Registration with a NestJS GraphQL Server and Prisma Phew, it’s been a while. Let’s get back to creating our NestJS server leveraging…

January 13th, 2020 · 3 min read

Getting Started with the GitHub Package Registry

Getting Started with the GitHub Package Registry What is GitHub Package Registry? Like npm , the GitHub Package Registry hosts software…

January 1st, 2020 · 2 min read
© 2018–2020 The WebDev Coach
Link to $https://twitter.com/aryanjabbariLink to $https://www.youtube.com/c/thewebdevcoachLink to $https://dev.to/aryanjnycLink to $https://github.com/AryanJ-NYCLink to $https://www.linkedin.com/in/aryanjabbariLink to $https://www.instagram.com/thewebdevcoach/