Software Architecture of Increaser App

Image for post
Image for post

Introduction

Plan

  1. Front-end(React, Redux, Redux-Saga, Styled-Components)
  2. Back-end(NodeJS, Express, DynamoDB, S3)
  3. DevOps(AWS, Terraform)

Front-end

Technology Stack and First Lesson

Create-React-App and Redux/Saga

Pages

First, we have a file with all the pages listed. And it looks like this:

To decide which page to render we have root component that looks like this:

And the function we use to connect to the state is a little wrapper that simplifies imports.

We didn’t need URLs, but after some time we decided that we need to work with browser history API to make browser back and forward buttons work. And it is especially important if you want your app used on mobile phones. To implement this functionality, we upgraded our navigation reducer to update history state after we change the page component.

Fast Statistics

Image for post
Image for post

Each day a user makes some Pomodoro sets, and he can have thousands of sets after some time. The reason why statistics is so fast is that we have ready for fast rendering data on the back-end and we are saving statistics in the browser, so when the user goes to the statisticcs page we only need to request part of data. To show statistics, we using a recharts library. And recently we start implementing our own charts library specifically for Increaser since we weren’t able to achieve the result we want with existing ones.

Increaser components

  1. TimePicker
  2. Timer
  3. TimeLine

Back-end

Technology Stack

Database

Table With Users

Image for post
Image for post
average user item

We keep finished projects/tasks and projects/tasks in different arrays so that it will be easier to take what we need from the database.

Image for post
Image for post
project
Image for post
Image for post
task

As soon as the user finish Pomodoro set we update the task item with new data. And then we use this information to determine how much time a user spends on this task, what is an average set and the percentage of stopped ones.

Image for post
Image for post
task statistics on front-end

We can’t save all Pomodoro sets in one item since DynamoDB has an item size limit. So when the number of sets becomes more than the specific number we are moving them to S3 bucket. We are planning to provide some useful insights for the user about how to improve his productivity based on this data.

Table With Statistics

Image for post
Image for post
month statistics

DevOps

Technology Stack

Infrastructure project

Image for post
Image for post
project structure

Resources for front-end and back-end

CI/CD

Conclusion

Reach the next level of focus and productivity with increaser.org.

Image for post
Image for post
Increaser

Written by

Software engineer, creator of increaser.org. More at geekrodion.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store