LucasGobbs / heatmap-challenge

Heatmap Explorer

An aplication that creates an heatmap based on an jsonfile and a image

Link to App Hosted

About

Application Running

Flow

Initial Screen

Choose Json and Image File

Select filter options and Download

Generated Output

Tech Stack

• SvelteJs
• TailwindJs
• Vite
• Heatmap.js
• Typescript

Instalation and Execution

You need Node and NPM to run the project

First clone the project and install the dependencies

git clone ...
npm install

After that you can run with:

npm run dev

Then open the project in: http://localhost:5173/heatmap/

Code

All the code is divided in the following architecture

• /src/lib
  • /components - The Componenets that are used in the projects (and their stores)
    • /components/ui - Components pushed from external repositories (shadcn)
  • /intefaces - Interfaces and types
  • /pages - The pages of the app
  • /utils - TS code that is used in the components but are'nt in the frontend context

The parsing of the json file is inside the ExtractDataFromElastic.ts in which implements the interface IDataPointExtractor.ts

/src/lib/utils/ExtractDataFromElastic.ts

/src/lib/interfaces/IDataPointExtractor.ts