This demo project uses React and create-react-app for the JS and HTML framework. For styles it is using styled-components, tailwind, and twin.macro to tie the two together. It's using localStorage as a data store and local_orm to interface with the data.
Start by cloning this repo.
Create a branch for your solution.
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
The project is a simple messaging app, users can enter their name to "sign in", then post messages into the log for other users to see and respond to. In this project you will implement the ability to save highlights of the text of messages that have previously been posted. Here are the requirements:
- Within a message bubble, a user can highlight text with their mouse, when text is highlighted, a visual component is shown to allow the user to save the highlight. It's up to you to decide how the visual component is shown, it could be a tooltip, drawer, hotkey suggestion, or anything else. For more information on selecting highlighted text see: window.getSelection, Selection.anchorOffset, and Selection.focusOffset.
- When a highlight is saved it should be presisted to the data store (
localStorageusinglocal_orm). The schema for highlights is up to you to create. - When a message is displayed, highlights should be shown as a semi-transparent color behind the text. Each user who submits highlights should have a unique color, and all of their highlights should always appear in that color.
- Highlights are continguous and a single highlight cannot span multiple messages.