Image Annotator lets you upload an image and place hotspot where each hotspot has popup which contains editable pre defined widgets. Image can embedded into websites (similar to how youtube lets you embed video into your personal site) [work in progress].
Git Clone or download the project locally and run docker compose to spin up all the required services. Docker spins up PHP, Mysql and Adminer.
Log into Adminer (https://localhost:8080) using default credentials [username,password] = ["root","example"] and execute all the sql statements found in img-annotator.sql inside Adminer execute option.
npm start and login into app using email: [email protected] password: test
- Let user generate an embeddable link
- Embed component uses React context
- Implemented pagination using Redux
- Drag and drop widgets from widgets panel into popup
- Widgets in popup can be re ordered by the user
- Widgets (Widgets are customisable)
- Image and Video widget
- Text (includes header, body, free text)
- Button (edit text and link out to external sources)
- Carousel Widget
- User can reorder slides via drag and drop
- User can add video / image slide
- User can edit each slide data (image, video and caption)
- Rewrite editor component with Redux
- Setup demo application with minimal setup