Visit LEDU token page

How to build a Time Tracking Web App with React.JS

How to build a Time Tracking Web App with React.JS

  • English
  • Programming
  • React.jsReact.js
  • (827)
  • Project length: 2h 08m

In this project, we are gonna build a Time Tracking Web App using ReactJS. This is going to be a very fun project. if you want to learn ReactJS, the best way is to build real applications. We will be building a timer application that can time things like a stop watch or function as a count down timer.

Overview

Project Name: How to build a Time Tracking Web App with React.JS

Introduction

This tutorial will cover all the details (resources, tools, languages) necessary to build a complete and operational Time Tracking Web App. You will be guided through all the steps, starting from setting up the environment to creating a scalable react application. By the end, you will be able to create your own Timer app without much difficulty.

What are the requirements?

  • HTML/CSS
  • JavaScript (ES6)
  • Bootstrap 4
  • React.JS
  • Your creativity

What is the target audience?

  • You want to learn more about building applications with React and Redux
  • Your interested in building a timer based application like pomodoro
  • You haven’t looked into frontend frameworks that much and wanted to see if React may be the right one for you.

When are the streaming sessions (streaming schedule)?

Weekly 11 AM EST on Mondays and Wednesdays

Note: Some sessions will be uploaded

Project Outline

Session 1: Setting-up the Environment

  • Installing the libs
  • Create the basic app with Create React App
  • Adding Bootstrap 4
  • Adding Font Awesome Icons

Session 2: Basic Timer

  • Create the Shell of the timer view
  • Render the current time passed on the timer
  • Add start, stop, reset buttons

Session 3: Basic CountDown Timer

  • Create shell of countdown timer view
  • Render the current time passed on timer
  • Add start, stop, reset buttons
  • Add Input to specify the minutes for the count down timer
  • Trigger an alert when the countdown finishes

Session 4: Record Times

  • Add functionality to record times
  • Display recorded times as a list
  • Go over future steps to extend the application

Reviews

Average rating

4(827 Reviews)