TaskMuncher

TaskMuncher is a Task Management Productivity application.

TaskMuncher is the easiest way to get it done, whether you're making a shopping list, planning a holiday or managing multiple work projects.

Use TaskMuncher to organize and keep track of everything so you can get it all done and enjoy more peace of mind.

Live Deployment

TaskMuncher at Digital Ocean

TaskMuncher at AWS

Demo login

email: demo@taskmuncher.com
password: 123456

Technical

• TaskMuncher is a Progressive Web App (PWA)

• TaskMuncher is built using the MERN stack. The front-end is built using React, Material-UI, Redux, HTML5, Sass and CSS3, the server-side using Node with Express as the web server and Mongo as the database.

• TaskMuncher is fully responsive, adapting for mobile, table and desktop viewports.

• All routing is handled in the front-end by React

• Extensive form validation and error handling is demonstrated throughout the app. On the front-end, field type, value, length etc is validated using HTML5, React and Redux. On the server-side, JOI performs detailed validation and a Mongoose schema provides further error checking for field values and uniqueness.

• A fully-featured user registration system is integral to the application, with user registration and username / password recovery functionality provided.

• Extensive use of HTML5 DnD and React DnD.

• TaskMuncher supports Google Authentication

• Server-side email functionality is provided by a Nodemailer OAuth 2.0 implementation, using Google Gmail

• An extensive API has been built to provide database access to the TaskMuncher App using Express, with 27 separate endpoints constructed.

• TaskMuncher is fully unit tested on the front and server-side. For React testing, Jest has been used. For the server-side, Mocha and Chai, with extensive use of the Faker library to mock-out dependencies.

• User authentication uses Json Web Tokens JWT

• All client and server communications are performed using https.

• TaskMuncher fully implements Google Analytics

• TaskMuncher fully supports Google Webmaster Tools

• TaskMuncher is deployed to an Ubuntu 16.04 droplet at Digital Ocean and kept running using Pm2

• TaskMuncher at AWS is also deployed to an Ubuntu 16.04 droplet at AWS for test purposes.

• TaskMuncher resources are served from Nginx Server with a reverse proxy to pass certain requests to a Node Express Server.

• The Ubuntu 16.04 droplet at Digital Ocean can only be accessed with SSH from a particular client. All other access is disabled.

Deploy TaskMuncher

TaskMuncher is deployed to a Digital Ocean Droplet.

TaskMuncher is also deployed to an AWS EC2 instance.

The following describe a series of tasks. They should be performed in the order shown.

1. Create Ubuntu Droplet at Digital Ocean
2. Digital Ocean - Install Mongo
3. Digital Ocean - Install Nginx
4. Configuring Domains at Google Domains
5. Configure non-SSL Nginx at Digital Ocean
6. SSL Certificates - Let’s Encrypt & Nginx
7. Configure SSL Nginx at Digital Ocean
8. Backup TaskMuncher from Digital Ocean
9. Deploy TaskMuncher React App to Digital Ocean
10. Create Sitemap
11. Google Webmaster Tools
12. TaskMuncher Images and Favicons
13. Facebook Application Id
14. Configuring Meta Tags
15. Adding Google Analytics
16. Google Gmail Configuration
17. Google Authentication

Maintenance

The following describe tasks required for the maintenance of TaskMuncher at Digital Ocean.

Update SSL Certificates to Ubuntu at Digital Ocean

Maintaining Droplets at Digital Ocean

Website Review

Production Problems

TaskMuncher React Production Issues

Website Validation

The following describe tasks required for the validation of TaskMuncher at Digital Ocean.

Website Validation Reference

TaskMuncher Website Validation

TaskMuncher Version Updates

Update TaskMuncher V2 to Webpack v4, Babel v7, Material-UI v3

Update TaskMuncher V3 to use BrowserRouter rather than HashRouter

Update TaskMuncher V4 to Progressive Web App

TaskMuncher Updates

Optimizing TaskMuncher

TaskMuncher Performance

Using Webpack Bundle Analysis

Add TaskMuncher to Material-UI Showcase

TaskMuncher Lighthouse Fixes

Deploy TaskMuncher to AWS

Deploy TaskMuncher to AWS

Technologies

Client

• React
• React DnD
• React Router
• Material-UI
• Progressive Web App
• Redux
• Redux Devtools
• Styled Components
• HTML5
• CSS3
• Sass
• Webpack
• Jest
• Enzyme
• Eslint
• Prettier
• Balsamiq

Server

• Node
• Express
• Mongo
• Mongoose
• JWT
• JOI
• Mocha
• Chai
• Winston
• Morgan
• Mailgun
• Gmail OAuth 2
• Google Authentication
• JS Doc
• Eslint
• Prettier

Production Deployment

• Digital Ocean
• Ubuntu
• Nginx
• SSL certificates
• Node
• Npm
• Mongo
• PM2
• AWS

Testing Deployment

For a simple application deployed from a single Github repository:

• Heroku
• TravisCI
• Mongo

TaskMuncher has multiple Github repositories and thus is not suitable for Heroku. The testing deployment is another droplet at Digital Ocean, in effect a duplicate of the actual production environment.

Wireframes

Wireframes built using Balsamiq may be downloaded here

TaskMuncher Project

Purpose of App

Task management tool. Allow user to easily organize and manage tasks by goals and projects. Provide a calendar to easily manage tasks and events.

Proposed Name

TaskMuncher

User Stories

As a user, I should be able to:

• sign up
• remove my account
• log in
• change my password
• reset my password
• add, edit, delete, clone a goal
• add, edit, delete, clone a project
• add, edit, delete, clone a task
• search and be presented with a list of goals, projects and tasks containing the search expression
• move goals
• move projects within a goal or to another goal
• move tasks within a project or to another project
• change status of a goal or a project
• allow starred tasks
• list starred tasks
• list all tasks
• list scheduled tasks
• list late tasks
• differentiate between scheduled task and an event
• edit task status
• list tasks by status, including none, started, completed, planning and waiting
• edit task priority
• list tasks by priority, including none, top, high, medium and low
• edit task tags
• list tasks by tags
• add, edit, delete task start date/time
• add, edit, delete task due date/time
• repeat tasks with an interval
• show tasks on a calendar
• add, edit, delete tasks in a calendar
• authenticate with Google
• authenticate with Facebook
• request help
• show added tasks for various time frames
• show updated tasks for various time frames
• show completed tasks for various time frames
• administration section allowing an administrator full access to all data

Descope

A list of user stories to be supported in the MVP:

As a user, I should be able to:

• add, edit, delete a task
• list tasks
• add a goal
• add a project

Other requirements:

• Fast (page speed score)
• Responsive
• SEO friendly

User Screens

List of the distinct screens or pages that your end user will interact with.

Screen for:

• add, edit, delete a task
• list tasks
• add a goal
• add a project

User Journey for Each Screen

For each screen, specify the way(s) the user journeys through the page. Use User Flows

A user flow describes:

• what the user sees
• what they do
• what they see next after doing that thing

User Journey - Screen for add, edit, delete a task

User has a list of articles. User selects an article User is presented with the article.

User Journey - Screen for selecting a news channel User requests a list of news channel. User requests a news channel. User sees latest news from that channel

User Journey - Screen for adding a news channel User requests a list of news channels. User adds news channel. If error, show error. Else, add news channel. Add news channel to list of news channels.

User Journey - Screen for adding news channel to my channels User requests a list of news channels. User requests channel be added to my channels. List of My Channels is updated. List of My Channels is shown.

Project Requirements

Server must

• use Node/Express
• use a db
• have RESTful API and/or Socket.io layer
• serve static assets
• have comprehensive testing
• have high code quality. Among other things that means
  • choosing good variable names
  • writing functions that have a single responsibility
  • consistently following a style guide
• well architected

Client must have

• polished UI
• responsive
• follows accessibility best practices, for instance, all inputs wrapped in forms, all inputs have labels
• bundled and optimized for delivery
• comprehensive testing
• high code quality
• well architected
• cross browser tested, with support for current version of popular browsers

Implement MVP

• CI and Deployment. Set up continuous integration with Heroku and Travis CI right away, and have tests automatically run each time you push to GitHub
• Git and GitHub. Develop each user story with a feature branch and when ready to deploy to your production environment, do a pull request from your feature branch into master, triggering an automatic deploy from Travis CI.
• Start with mock data. Define API resources and the schema for the data they return as code up the front end.
• Both server and client side unit testing. As complete a feature or support a user story, write tests. Strive for comprehensive test coverage for both server- and client-side code. At a minimum, that means testing routes, components, actions, and reducers.

Gather User Feedback and Iterate

Now that MVP is live, it's time to get user feedback. The sorts of things you're going to want to find out about are:

• Do my users think the app is interesting or valuable?
• Did my users use the app as I intended?
• Did my users encounter any bugs or broken features?
• Did my users understand how to use the app?
• Get feedback from real life people who are not you and your mentor.

Then, based on what you learn, do a round of iteration on your MVP to address any issues that came up.

Note findings from user feedback. Note what, if anything, I did about it.

Feedback

• New user should be stepped through the process. Add a goal and a project, then add a task.

• under status, categories which are empty shouldn't be shown at all

• Would be cool that instead of clicking the 3 dots and then editing something, that default action by clicking on something is edit. This would be better user experience. Now you can't really click on anything and feels strange.

• I think that it would be better if the list view is the default one and the grid one secondary

• When I want to expand a project, I have to click on the arrow pointing down. It would be just better that this happens on clicking on the project itself.

• List view is confusing when browsing projects etc. It doesn't imply which list I'm viewing (from which project, it seams that all of them aggregated in the same list)

• Would be nice to create a task by using the calendar, by clicking on some specific date

Also on your landing page, you should probably have 3 or 4 items per row (those things with icons and description) aside those comments and generally some UX stuff.

Amazing job, this is a very valuable project for your CV. Also feel super fast and fluid.