All solutions

Using Canvas API is really difficult since it's low level. Went with Konva which adds abstraction to it. Since I was using React, went with their react-konva library.

Making Graph mobile responsive is tougher than expected which tempts you to use third party graph libs like High Charts, and Charts.js.

Enjoyed the challenge and gave pointers on where I need to improve.

This challenge was solved with React and everything that goes with it. Mobile Responsive gave good pain while building for smaller screens. I find React is just a small library not a full-fledge Framework like Angular. The more I add extra libraries, it felt the codebase is getting bloated. What are your suggestions on that?

Do you think this is enough for applying for Frontend Roles?

To learn React and solve the previous issues of state management, this time started with Documentation of what to build and then start. Quickly built out layout and later for small changes local state was used.

Overall had fun while building it. Took 6 days to complete, started on 10th April.

Planning state management is a must to have React work with you. Lol.

After working with Vanilla JS; moved to use React for the first time. I used the Bottom-Up approach, where I built underlying components first and CSS together. Later when adding states, the code started to break.

Lesson learnt: State Management first should be decided and later components. Will be sticking with a top-down approach for the next project. Currently will work on another project with a smaller scope with React. Will revisit with better state management skills.

To fast track, my pace in WebDev jumped to intermediate challenge blindly. Somehow I was able to complete it, will revisit this challenge with more JS exp. Lessons learnt:

1. Code Quality started to degrade as more DOM manipulations were added. 1.a. Trying Typescript without knowing the type system and JS can hurt the speed and motivation.
2. Designing the JS event listener is a must, tried bubbling up events which helped to reduce the number of event listeners.
3. State Management is pain, need to keep updating data.
4. HTML templates are useful, each template must do only one thing, use 2-3 templates to build main containers.
5. Init state of JS is way more important than expected.
6. I also reached somehow limit of CSS in single file, it creates more clutter both in css and js. will use modules next time.
7. One more feature is yet to complete.

Only way I was able to somehow compelete it (hope so), is that breaking problems into tasks and completing it each day. More complex the challenge more breaking it down is needed.

The building up of sections using document.createElement("div") is a good way or is there any other way to build this.?

That hr tag with height wasn't visible on low res display. Encountered it first time.