This is a web-app built in React, built only with functional components and React Hooks, Redux, WebPack, and CSS for styling and animations for the creation and management of Hotspots.
At the moment the user can simulate:
- Capturing his mouse position on a given screen
- Highlighting the innermost element under it
- Selecting the position by clicking the location
- Adding the new Hotspot.Tooltip's name directly on a tooltip form
- Hovering over a hotspot to get the created Tooltip to appear
- Highlighting a created Hotspot on the screen by hovering over the hotspot list
- Editing the title and description of a hotspot directly on it's a tooltip
- Deleting a Hotspot from the list
Nice stuff:
- The tooltips will change their position if too close to the document edges
- Nice attention-grabbing animation for each hotspot
- Conveniently Deleting all Hotspots and bellow too
- Toggling the view of the Hotspots
- It keeps the state on the local storage, so no losing hotspots!
- Did I mentioned it's all functional components and hooks? Hell yeah it's the future baby
git clone https://github.com/uryelah/conpass-frontend-challenge.git
npm i
npm start
The project will open at the 8080 port
- If the movement of capture is too fast while creating a new tooltip last selected elements might keep the red highlight
- Elements with box shadows or borders might get their style altered by the capture action
the hotspots position might get skewed in window resize- It's technically possible to create a hotspot over an existing hotspot
Fixing the hotspots positioning on page resizing, probably using and percentage approach relative to the viewport size- Refactoring the element capture function for it to change classes instead of affecting directly the element style, a possible case for using State.
- Show the details, target element, coordinates, etc, of the Hotspot on the listing, I'm thinking an opening details window bellow each on click.
- Make it possible to toggle visibility and animation playing state of each hotspot
- stop hotspot creation if it has the same target as another existing hotspot or is too close to it
- Add to each hotspot state a counter of time hovered by the user
- Make it possible to toggle visibility of hotspot if already viewed by the user or viewed an X amount of times