RTM - React Task Management tool

# Introduction

RTM is a tiny task management tool for the developer who wants to manage multiple projects. RTM provide NO DB NO AUTH functionality means You do not need any database to store data and No authentication process to access the workspaces.

So the question is, where will the data stored?

RTM built in React. There is no connection with the Backend server For that reason, the data will be store in localStorage. localStorage is limited to the browser only, so no one can access your workspace from another browser or device.

In Demo version, we set our database ENV credentials to data.so you will not see any changes after refresh the page. for more details. click here. also, it is okay if you don't know react too much. there will be no change required until you want to add some functionality

# Installation

After purchasing code from Envato market Download .zip file and extract it.

You will see 2 folders inside it.

  • Documentation
  • Resource

Documentation

This folder contains documentation of the project. (currently, you are reading that documentation)

Resource

This folder contains React-script of the project. Open this folder in VS Code or other editor use by you.

Follow below steps to start or setup the project in your desktop.

Step 1 : Install node modules

Install all require package for this project from node package manager using this command.

npm install

Step 2 : Configure database

Open .env file and look for REACT_APP_DATABASE

# There are 2 types of database 
# 1. data - It will contain a static file of the data. check inside
#    "src/database/data". although we create this type for demo purposes only.
#    No one can update it because data will be fetch from all that static files.
#    You can also re-write that files if you don't want to update them later.

# 2. storage - When we set type to "storage" RTM will store all of the
#    data to "localStorage". to see how database and table design,   
#    check "src/database/data" folder.
REACT_APP_DATABASE="data"

Change REACT_APP_DATABASE value to storage

REACT_APP_DATABASE="storage"

Step 3 : Run project in your Desktop

To start the project (server) in your desktop run following command.

npm run start

Now, go to localhost:3000

Whenever you update .env file don't forget to restart the server.

# Writing Description

Here's the list to write description with bold, italic, etc.

**This is bold string** This is bold string
--This is italic string-- This is italic string
__This is underline string__ This is underline string
```This is code format``` This is code format
##This is Heading## This is Heading
{This is anchor tag}[http://localhost:3000] This is anchor tag

# About Attachments

Before attaching notes or images it is good to know about attachments

RTM store attached notes or images in localStorage too. but localStorage is limited to 5MB. and that's why we add limit for uploading files. By default we set our attachment storage limit nearly to 3MB and single file size limit nearly to 10KB but you can configure it in .env file.

# Set limitation of the Attachments in Bytes 
# (If all attachments size total is greater than the following size RTM will alert you)
REACT_APP_ATTACHMENT_SIZE_LIMIT=3000000

# Single file size limit
REACT_APP_ATTACHMENT_FILE_SIZE_LIMIT=10500

More workspaces and tasks you have, less storage space you have. we recommended to upload small notes, text file or lesser size of images.

# Import/Export Workspace

Here are the situations that lead us to create Import/Export functionality.

  • Export workspace and import it to other browser and device.
  • Share it with other developers.
  • Sometime, you need to clear your browser localStorage, cookie, cache from all websites. you will loose all workspace or task from RTM site too. that's why we implement Import/Export functionality. you can Export workspaces from RTM before clear everyting from browser, then after import it in browser again, so you will not loose your data

# Designing

RTM design in Tailwindcss or you can write your custom css in index.css. thus, there will be no requirment to update current design.

This is just for your information that we use Tailwindcss in our project and you can check docs here.

  • RTM - React Task Managment tool
  • RTM and Documentation design in Tailwindcss
  • Use highlight.js for syntax highlight