RSClone of TrackingTime App

8 min readFeb 3, 2021

Intro

For those who are not familiar with the Rolling Scopes School, this is a story about the final team project as part of the JavaScript Course (JS2020Q3)

…and for those lucky people who are a part of the community, our team wants to express gratitude to all people who are making this course,

especially to our mentors (fedarenchyk, Anastasiya Hushcha, and Aliaksandr Kavalenka 😍), who had taken us under their wing and put a part of themselves into us.

So, let begin the story by introducing our team!

Team

Artyom (Team Lead)

Hi, my name is Artyom and I love programming. My passion is web development (python, js/ts).
Unfortunately for me, I didn’t go to work as a developer after graduating from university. However, now is the time when I decided to change my profession and make software development the core of my career.
What has already been done? Behind several years of learning English (from Elementary to Intermediate), dozens of online and video courses (+ RSSchool), many projects, and, of course, thousands of pages of technical documentation and manuals.
What will happen next? Job search ahead.

Iryna

I’m 23 years old and I really enjoy learning JavaScript and developing Vanilla JS and React.js apps. I haven’t got any computer engineering education, but it doesn’t stop me to have a passion for programming. That’s why I’m here and study this course. And here is my final deploys of some tasks: GemPuzzle Game, English For Kids App, Covid-Dashboard App. What was the difficult one for me, is the algorithmic part, so needs some more practice 😉

Dzmitry

Frequenter of physics and mathematics classes. I studied at the radio engineering college and at the BSU on the mechanics and mathematics. I like to think and discover new things for myself.

Project Description and Features

RSClone TrackingTime is an attempt to make a useful application for time management and organizing everyday life. Users get the ability to keep tracking their to-do tasks, as well as mark the time they estimate to spend on tasks and deadlines. It’s possible to rank tasks by projects if needed. Users can create, edit and delete projects and tasks.

Features

Log In/Sign Up Modal.

Just usual Bootstrap Modal Component and Form Component inside. Two <input> elements of type="email" and "password". The value of the <input> element of type "email" is automatically validated to ensure it is a properly formatted e-mail address. As for password, to ensure that it is safe, we apply pattern attribute (viz. something like that pattern="(?=.*\\d)(?=.*[a-z])(?=.*[A-Z]).{6,15}").

Collapsible Sidebar. Users can rank tasks by projects and navigate to different task lists by clicking on project links represented by its title. This feature created using react-router-dom. For convenience, the user can hide the sidebar by clicking on the arrow icon.

Every Project fragment has a Dropdown with two buttons inside for deleting Project and opening form for editing Project.

Creating Projects. Users can add new projects to the list by filling a form in a modal window. The form contains the next fields that specify the new project: title, deadline, estimated time, and color to personalize the design. For greater user experience the special date-, time- and color-picker interfaces were implemented. They are: <input> elements of type=”date”, “time” and “color”. Such input types support built-in input value validation and provide the predictable resulting value format.

Creating, deleting, and editing to-do Tasks. Users can create new tasks, mark them as done/not done, delete tasks by clicking on delete button, and edit tasks by clicking on the whole task fragment.

Calendar is a special feature, which is created to allow users to choose task due date. It is more UX friendly by comparison with an input element.

Preparation for work

I believe that this information will be useful to those who are going to study in RSSchool or similar courses.

First of all, we collected the requirements for the project from all sources (GitHub repository and Youtube channel of the school, the channel in discord) in one place (wiki of our GitHub repo).

This is a really important part of the job because some requirements impose restrictions on the technologies used, and ignoring this fact can put an end to the project.

For an example of some project requirements: Airbnb code style, forbidden JQuery framework, using “Discord” as the main channel of communication, and also using conventional commits

2. After studying (1–2 days) the requirements during the call conference, we discussed what technologies we will use and finally chose the topic for our project

Important: during the development process, there was a lack of GitHub hooks and a configured prettier. Due to errors in the ESLint and IDE configuration — resolve conflicts in files when merging branches turned into a nightmare.

3. The next couple of days we devoted to studying similar applications and forming functional requirements (User story in Russian)

At the last call before starting the development of the application, we approved a list of requirements that we will implement in the first place, and which we will refuse.

5. All approved requirements have been added to GitHub Project.

I think it’s worth noting that here we ran into the first challenge: it turned out to be very difficult to separate tasks so that they are independent of each other when you don’t have a single file in your project.

As a result: Due to the delay in configuring the working Webpack configuration (ESLint, TS, React, Jest and etc.), we lost several days. The temporary solution was to use create-react-app to run the code under development.

6. From that moment, the development of the application began with periodic repetition of the next steps:

select the next set of functional requirements;
assign a task to a team member;
implement the functionality with consultation from each other and our mentors.

Team Workflow Organization

We choose the SCRUM framework for organizing work in our team and managing project progress. Among many popular instruments for agile-teams, we choose the GitHub Projects board with three columns: todo (backlog), in progress, done.

For communication and voice meetings, we have created a separate server on Discord with channels for different work issues: the main channel for common issues, the channel for questions concerning the git version control system, the channel for useful links on educational materials, and some others (that were not so popular 🙂 ).

Before we start coding we wrote a list of project stories for the main features.

Then our mentor helped us with converting them into issues on GitHub. That was the way, how our project backlog was created.

Dependencies and Project Architecture

TypeScript + React + Redux + Redux-thunk

We think, that many of you know the pros and cons of TypeScript and possibly have used it in your projects. As for us, it takes a lot of time to write all of types and interfaces, but it is really worth it. We can see in advance all potential bugs related to types coercion in JavaScript, and can prevent and control this with static typing provided by TypeScript.

React library gives an opportunity to split application layout into fragments or components, which is easy to re-use. It is less cost-effective in terms of performance, as well as JSX is more visually-friendly than common js.

React components have a built-in state object, which fields they can pass to child components as props. But there are child components, that are nested too deep in the component structure, so Redux solves this problem.

Redux thunk middleware allows to delay the dispatch of an action, in our case it was asynchronous requests to database.

Data Flow.

Root directory files structure.

Storing data. Data is stored in a cloud-hosted database (Realtime Database) provided by Firebase. Data is stored as JSON and synchronized in realtime to every connected client.

Authorization. As all clients connected to Firebase Realtime Database share one database instance, as our project requires authorization for privacy reasons, we integrated the Firebase Authentication SDK. Users can signup/login with their email address and password.

Deployment.

We used Travis CI Platform. NB Continuous Integration (CI) is the practice of merging in small code changes frequently — rather than merging in a large change at the end of a development cycle. The goal is to build healthier software by developing and testing in smaller increments. This is where Travis CI comes in.

As a continuous integration platform, Travis CI supports the development process by automatically building and testing code changes, providing immediate feedback on the success of the change.

Developing Progress

Developing process started with setting up the environment. We are lucky people because in our team there is a person, who knows almost everything about Webpack, and how to make a great project configuration (P.S. Artiom, you are really great!).

Main features we did in separate branches. Here is a list of all pull requests from these branches into develop branch.

All manipulations with git were strictly monitored by Artiom (second luck 😇), so we have a nice linear graph.