/gtd-tasktracker

A web app written in React.JS to manage todo lists using MongoDB

Primary LanguageJavaScript

Get Things Done | Task Tracker

This project is to be a single user app for tracking tasks.

Available Commands

  1. npm run dev - starts the development server with hot reloading enabled
  2. npm run build - webpack builds the client app and babel compiles the server app to the 'build' folder, where it can be run in production mode
  3. npm run start - starts the production server using the output from the build command
  4. npm run lint - Run ESLint on the server and client code

Todo List

In mostly no particular order:

  • Add react-tagsinput for tagging
  • Add support for commenting
  • Add task management feature, status:
    • new ->
    • committed -> due date, estimated hours
    • in progress -> remaining hours
    • done -> actual hours
  • Add support for drag-n-drop of task cards
  • Add a activity log for everything done
  • Add search feature to find tasks, projects, and tagged items (with react-autosuggestion)
  • Update the webpack configuration to remove the need for server side to load the webpack-dev-server
  • Reorganize the static resources on the client side (templates -> static, add stylesheets, etc.)
  • Add support for styling via sass, bootstrap, and sass-loader
  • Decide on a new name for the project
  • Add support for tracking changes (history?)

Project Structure

Webpack Configuration

Webpack is used to package the server and client side applications. When NODE_ENV = 'development' the server app loads the webpack-hot-middleware into the Express server to provide a hot reload development experience.

ESLint Configuration

The configuration for eslint can be found in .eslintrc.

Client

The client side is written with React using the ES2015 syntax for JavaScript. Babel is used to transpile the client side to plain old JavaScript for backwards compatibility.

React

React is the view engine for the application. Redux is used to manage state on the client side. The Ducks Design Pattern is followed to help organize the redux action types, action creators, and reducers into modules (aka ducks).

Server

The server side app uses Express web framework and Mongoose for accessing MongoDb.

Express

Express is a web framework for nodejs.

Mongoose

Mongoose is a mongodb object modeling framework for nodejs.

References

Styles