How to build a Time Tracking Web App with React.JS
Intro Video - How to build a Time Tracking Web App with React.JS
with Mechasparrow|4 years experience
50097views
Intro Video - How to build a Time Tracking Web App with React.JS
Aug 2, 2018 | 7:41 AM4:2
Session 1: Setting-up the Environment
Aug 4, 2018 | 4:34 PM10:25
Session 2: Building the core timer component.
Aug 6, 2018 | 3:32 PM32:50
Session 3: Basic CountDown Timer
Aug 7, 2018 | 5:09 PM44:38
Session 4: Record Times
Aug 18, 2018 | 5:05 PM36:7
How to build a Time Tracking Web App with React.JS
- English
- Programming
React.js- 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