tahitihat / image-gallery

[Adobe] Evaluation Science Team takehome assessment

image-gallery

ID: Adobe Take-home assignment for full stack role on Evaluation Science Team

Project reqs

Functional project requirements

• View full image gallery on single-page
  • raw image
  • thumbs up and thumbs down counts
• Apply thumbs-up to single image (any number of times)
• Apply thumbs-down to single image (any number of times)

Note: I made the assumption that the content and quantity of displayed images is unrestricted in this assignment, i.e. can be selected randomly. 🌲

Nonfunctional project requirements

• React frontend
• Images served via REST API
• Thorough unit testing across stack
• Containerized via Docker
• Runs on any operating system

App notes and setup instructions

To run the app via docker, execute the following in project root:

 docker-compose up --build

Frontend

• React client initialized with Create React App
• Written in javascript; Flow used for light typing
• ESlint linter
• Icons from Material UI

Run React Testing Library unit tests locally:

cd gallery-client
npm test

Backend

• Python Flask REST API
• Images simply stored on disk/in backend filesystem
• Tree assets downloaded from Unsplash

TODO

• init React client (create-react-app)
• basic React components — render photos stored in frontend
• unit tests for React components
• build up/down interaction locally in state
• Choose a fun/thematic collection of photos
• init Flask API
• implement /get_photos endpoint
• Complete and polish documentation

Remaining task list — would have implemented with additional time (ranked in priority order):

• Render fallback if image fails to load
• implement /up_photo, /down_photo endpoints and persist up/down likes in SQLite
• Better styling/CSS on frontend
• Add accessibility support to frontend (a11y)
• Productionize Flask server with WSGI