madhanganesh/taskpad

app to enter your daily tasks and tag them

Taskpad App

Introduction

This is a taskpad app that lets you to create tasks and track them during the course of your day. So why is yet another taskpad app? This app lets you to add "tags" to you tasks and make meaning out of the effort that you are spending on various activities. As the saying goes "what gets measured is what gets improved!" this app can be your companion to watch your efforts.

Hosted

This task is hosted @ https://taskpad.co.in

Tech Stack

• Golang - backend language
• ReactJS - UI technology
• Postgres - DB to store tasks
• Google App Engine - cloud hosting for the app
• Auth0 - user authentication
• Google Charts - to create reports
• Go Gin - for REST framework in server

Abilities

• Use your favorite auth provider to sign-in
• Create task and mark them to complete
• Add tags and effort to each task
• Easily create duplicate task to next day
• Easily move task to next day
• Add links to task and easily open them during your day
• Create reports by combining different tags
• View reports to see how and where your efforts are spent

Architecture

This is a SPA with a Go BE. The API uses Postgres to store tasks and other entities.

Steps to run

1. Clone the repo
2. Run the server - npm start
3. Run the client a. cd ui b. npm start

Please see the command in npm start of server.

• It requires https://github.com/codegangsta/gin [gin] to installed
• It requires fe environment variables:
  • Postgres DB details
  • Auth0 client ID

taskpad's Issues

Make the UI to be responsive so it fits for mobile usage

Hosted link does not work

Add icon for web page title so browser displays in the tab

Warning in editing task detail effort

index.js:1446 Warning: A component is changing an uncontrolled input of type number to be controlled.

Refactor CSS code so it is modularized

Add tests for usertags APIs

Server does not pass auth0 data to React

taskpad/ui/public/index.html

Lines 32 to 35 in 95c65f9

	window.AUTH0_DOMAIN = {{.AUTH0_DOMAIN}};
	window.AUTH0_CLIENT_ID = {{.AUTH0_CLIENT_ID}};
	window.AUTH0_AUDIENCE = {{.AUTH0_AUDIENCE}};
	window.AUTH0_CALLBACK = {{.AUTH0_CALLBACK}};

Since this is a static HTML file, not a gin tmpl the executed javascript code is:

      window.AUTH0_DOMAIN = {{ .AUTH0_DOMAIN }};
      window.AUTH0_CLIENT_ID = {{ .AUTH0_CLIENT_ID }};
      window.AUTH0_AUDIENCE = {{ .AUTH0_AUDIENCE }};
      window.AUTH0_CALLBACK = {{ .AUTH0_CALLBACK }};

Have you been able to figure out how to pass data from gin to React?

No route matching issue

Currently is no routes are matching in main.go, the index is sent. This was required to fix/navigate properly during login. But this is causing the issue if a wrong route is passed, the index page is sent. Fix this properly in main.go or in client to check the response id JSON

Make the links clickable in the notes section of edit task page

Reduce the font size in notes field of task detail page

Handle Auth token expiry when invoked any API

Add scroll to task list

Identify userid as part of API auth and store that in DB

Add ability to send client log to server (only in prod)

Refactor React code so the code is cleaned up and components decomposed

Add a link icon is task listing, if there is a link in the notes.. this should open the link in new tab

If token expires, he is directed to login. This is making user to loose the data he typed. Fix this.

Can you dockerize application?

It would be great to see this tutorial incorporate Docker and allow user to docker-compose into container

Handle any errors from REST API in the client

Implement tak completion action