Engauge is a web app that allows you to track where people are looking on a website. The workflow is:
- Create a shareable link on the home page (at this stage it MUST be a url of an image)
- When navigating to that link, the web app will start tracking eye movements. Click a few times to train the eye tracker (more clicks while looking at pointer = more accuracy).
- Every recorded session can be viewed at /review. The numbers on the left refer to a particular session
-
- Add a 'game' page to the watch route that walks users through the process of training the webcam
- Allow tracking of web hosted images
- View any case study (even those that have been created by other people!)
- Validate URL & email for a new case study
- Add back button & logo
- Continuous integration with CI to deploy to AWS EB
-
- Refactor to SASS
- Scrub through session timeline so people can view a progressive heatmap
- Improve information that comes through on the cards in the review/watch pages (Such as watch count, title)
- Add 'clear' button to remove heatmap layer altogether
- Allow selecting of multiple sessions to view a merged heatmap
- Allow uploading of links that are not images
-
- Stop webcam session after navigating from a 'watch' page
- Heat map overlay loads incorrectly if the window is resized when navigating to the page
Engauge uses a number of projects to work properly:
- React front end (With React Router)
- Webgazer.js for tracking eye movements
- Socket.io for sending eye focus coordinates to the server
- Node & Express for the server
- Mocha & Chai for testing
- PostgreSQL to store JSON eye history and other session data
- Heatmap.js to render the heatmap layer
- Docker to enable the microservice architecture
- AWS Elastic Beanstalk to host containers
- CircleCI to build, run tests, upload to Dockerhub & deploy to AWS
- Nginx to terminate the SSL, load balance and serve static assets
Engauge requires Node.js v6+ to run. Engauge requires Docker & Docker Compose to run.
Clone the repo & install dependencies
https://github.com/stolemyusername/engauge.git
cd engauge
npm install
Build images and run app
docker-compose up --build
Now navigate to http://localhost:3000/. The app is running!
Want to contribute? Great!
Just make sure you right tests and then make a PR.
MIT
Free Software - Hooray!