Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/arpitnath/trackk
A Single Page App for managing and tracking tasks.
https://github.com/arpitnath/trackk
javascript netlify-deployment react react-hooks react-router-dom sass typescript webpack
Last synced: about 1 month ago
JSON representation
A Single Page App for managing and tracking tasks.
- Host: GitHub
- URL: https://github.com/arpitnath/trackk
- Owner: arpitnath
- Created: 2021-07-04T16:33:12.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2021-08-16T13:52:18.000Z (over 3 years ago)
- Last Synced: 2024-10-14T09:29:10.637Z (3 months ago)
- Topics: javascript, netlify-deployment, react, react-hooks, react-router-dom, sass, typescript, webpack
- Language: TypeScript
- Homepage: https://trackkapp.netlify.app/board
- Size: 1.11 MB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Trackk 🐞
> UI greatly inspired from [Notion web app](https://www.notion.so/)
### 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 [email protected]: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()]
}
```