Chart Comments

• Chart Comments is a simple web application that displays a chart that users can comment on.

• This project is intended to be used as a starting point for building a more complex application.

• As a bonus, the code can be used as a template for building a React + FastAPI web application.

How to run the project?

• Start both Front End and Back End apps (see the instructions below).

• Open your browser and go to http://localhost:3000.

• Voilà! Now you can enjoy the app.

Front End

• Front End is managed via yarn.

• To start the Front End app:

  cd frontend
  yarn install
  yarn start

• Run yarn lint to lint the Front End codebase.

Back End

• Back End is managed via tusk.

  • tusk installation instructions

• To start the Back End app:

  cd backend
  python -m venv venv
  source venv/bin/activate
  tusk dependencies:sync-dev
  tusk app:run-dev

  • It is recommended to manage the local Python version via asdf. Once you have it, run asdf install python 3.9.13 to ensure that Python's venv has access to the required Python version.

• Run tusk linters:run-all to lint the Back End codebase.

• Run tusk tests:run to run the Back End tests.

• The Back End state (chart data, comments, etc.) is reset on the restart of the Back End app.

Project Requirements

• Choose a single chart type you would like to work with.

  • Chosen chart type: bar chart

• Display the chart on the frontend using a library of your choice.

  • Chosen chart library: d3

• When you click on a data point, show a comments menu.

• Show comments count on each data point when no data is selected.

• The comment add form should have username and comment fields.

Project Technical Constraints & Guidelines

• Python + FastAPI for the backend.

• React/Typescript + your choice data store for frontend.

  • Chosen data store: Redux

• Take a minimal approach to the task, no need to use DB/authentication, error reporting, Docker, etc.

• Use static mock for the chart data on the backend.

• We expect you to use TDD for core backend logic and structure commits as if you were working on a real+life project.

• Use your own judgement to define a scope of a Minimal Lovable Product.

• Prepare to discuss scalability design during the technical interview calls.