Trackk 🐞

UI greatly inspired from Notion web app

About

A Single Page Web App for tracking your daily tasks and goal.

App uses Local Storage to store your data.

⌗ create a new group

⌗ create a new task

⌗ edit a group name

⌗ add tasks to the groups

⌗ drag tasks to different group or shuffle them inside the same

⌗ edit the task title in the board or open the task and edit it

⌗ add a task description

⌗ add tags to the task or remove them

⌗ edit the board title or description

Run the app locally

$ git clone git@github.com:arpitnath/spacex.git

$ npm install

$ npm start

This will start the application and run on port 3000

For Production build

npm run build

Structure

App

public
└───index.html              # entry point
└───__test__                # unit tests
└───src                     # source
└───webpack                 # webpack setup
    └───webpack.common.js   # common webpack settings
    └───webpack.config.js   # webpack configuration point for dev and prod
    └───webpack.dev.js      # webpack dev setup
    └───webpack.prod.js     # webpack build setup for prod
└───.babelrc                # babel config
└───.eslintrc.json          # eslint config
└───.prettierrc.json        # prettier config
└───tsconfig.json           # typescript config
└───tsconfig.testing.json   # ts test config
└───package.json

src

src
└───index.tsx              # Application entry point
└───App.tsx                # Application routes and pages are managed
└───components/            # All the components live here
└───containers/            # encapsulate components as a single executable code block
└───constants/routes.ts    # Available Routes
└───pages/                 # Views of the App
└───styles/scss            # StyleSheets
    └───_mixins.scss       # all mixins
    └───_variables.scss    # scss/sass variables
    └───styles.module.scss # all styles endpoint
    └───index.scss         # global styles
└───utils
    └───defData.ts         # default data that hydrates the application on first load
    └───types.ts           # Typescript Types
    └───helpers.ts         # Shared Logic
    labels.ts              # default data for labels

To check the build size

//uncomment this part in webpack.prod.js

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

module.exports = {
   ...
   plugins: [new BundleAnalyzerPlugin()]
}