react-task-list

Completed as a coding challenge for Wonderschool. Full writeup of challenge can be found in client/dist/assets/README.txt. Live demo can be found here.

How to Run Locally

  1. Install dependencies: -npm install
  2. Run React Webpack: -npm run react-dev,
  3. Start server: -npm start

To start, in your browser navigate to: http://localhost:3000

Prompt Responses

  1. Build the UI for a grouped task list with task dependencies
    • this UI was created using Javascript, React, and Webpack to mimic the [mockup image](/client/dist/assets/Task List.png)
    • provided assets are stored in client/dist/assets
  2. Design the SQL database schema to store all required task list data.
  3. Document an HTTP API for checking and unchecking a Task

Changes I would have made given more time:

  • add app title
  • create form to add new task
  • handle logic for adding a task with dependencies
  • make task text editable by clicking them in list
  • order tasks by parent task & use styling to indicate dependency relationships
    • e.g. parent tasks in bold with their dependent tasks indented beneath them *
  • add feature that displays timestamp information for when completed tasks were marked complete
  • add more engaging css styling, including border around main app div and background color on page body
  • switch to split pane view instead of conditional render of either group list or task list
    • note: In my commit history you will see evidence of me testing this view option, but I ultimately reverted to this view format in order to match provided mockup image as closely as possible *