Rank Images Site Built with React + Express + MongoDB

Not long ago I built this site that lets users rate images and provides a ranking. Yes, this looks similar to Zuckerberg’s notorious rank female faces site, but the project simply allows you to rank whatever images. The content is not my concern.

Backend

MongoDB was chosen as the database for storing user info, images and ratings. When my friends and I came up with the idea of this site, we also wanted to compare different aesthetic preferences among our friend circle, so we decided to pre-generate a queue of image pairs for all users to rate, and the progress of each user is stored as a field in the user model. The pairs are stored as a stand alone collection.

User model:

Queue model:

Rating and Image models are also created, but the structures are simple enough that I have no need to put them here. Rating model saves which user voted for which candidate in a Queue model; Image model just saves the image data and file type. A vote property is added to the Image model to simplify the sorting process.

The api endpoint design is also straightforward. There are three sub routers:

  1. image
    1. GET api for images
  2. rank
    1. GET for the ranking for all
  3. rate
    1. GET the next pair to rate with a user id
    2. POST the rating of the user

There is no user login/signup. Every user is “invited” after the user information is put directly into the database. They can put in their unique Object id on the page to access the rating page. The ranking result page is public to all.

Frontend

The frontend is also very simple: A React Router handles a home page, a rating page, and a ranking result page.

  • The home page takes the user’s unique id and redirect to the rating page:
    • this.props.history.push(`/rate/${this.state.userid}`);
  • The rating page extracts the unique id from the url and send a request to the server for the pair to rate:
    • nextEntryForUser(this.props.match.params.userid)
    • nextEntryForUser calls the api endpoint and pass the userid for the Queue object.
  • The rank page sends a GET request to the server and displays all the images in order.

The whole site is mobile responsive. I probably spent more time tuning the css than coding up and refactoring the components. -_-

I reused the Docker deployment mentioned in this article.

Video demo:

Takeaway/left to do

  1. data analysis on the ratings (our first incentive for building this)
  2. allow MongoDB to be connected remotely (this includes configuring the security settings so no one hacks us braindead-ly)
  3. find interesting and LEGAL images to rate on
  4. I really need to learn more about infrastructure stuff, which is my real job responsibility

The repository is here.