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.

74 thoughts on “Rank Images Site Built with React + Express + MongoDB”

  1. I really don’t actually understand how I finished in place here, nonetheless thought this particular release used to be excellent.. koleksi youtube indonesia I’m not sure individual preference may very well be nevertheless surely ensure the popular blogger when you’re certainly not already. Regards!

  2. After reading your post, you have a great website with interesting content. But I think you can improve your current google ranks by using SEO website traffic net. My friend uses it and it works great. Just google it, it’s very nice tool to bring you a lot of new readers on a daily basis. Keep up the quality work!

  3. After reading your post, you have a great website with interesting content. But I think you can improve your current google ranks by using this service. My friend uses it and it works great. Just check to https://bit.ly/2v7j3id, it’s very nice tool to bring you a lot of new readers on a daily basis. Keep up the quality work!

  4. Your blog on Rank Images Site Built with React + Express + MongoDB – Bill Yu is very good. I hope you can continue delivering many more post soon. Viva billyu.me

  5. Hey there my friend! I wish to declare that this post is awesome, nice created and can include just about all substantial infos. I would like to see extra content like that rekomendasi saham indonesia.

  6. USA politics news. We n we publish all of them hot and advanced facts Russia, estimates experts. All evil on this planet happens with the quiet tacit consent of the indifferent. No one provides us with incentives. We are Enthusiasts. We are building a civil society. The people are the bearer of sovereignty and the only source of power. No one can usurp power. Useful topics – Government Louisiana Business

    TWITTER
    FACEBOOK
    GOOGLE+
    kentucky

  7. Russian news We n we publish all of them hot and topical events USA, estimates experts. All evil on earth happens with the quiet tacit consent of the indifferent. No one provides us with incentives. We are Enthusiasts. We are building a civil society. The people are the bearer of sovereignty and the only source of power. No one can usurp power. Useful topics – Smile! Mauritius Finance jaxcarloans com garys insurance newark nj walt disney world closings and refurbishments 2016

    TWITTER
    FACEBOOK
    GOOGLE+
    arkansas

  8. Hello, let’s be friends
    Economy of Russia We n we publish all of them current and advanced facts USA, analytics experts. All evil on this planet exists with the quiet tacit consent of the indifferent. No one provides us with incentives. We are Disinterested. We are building a civil society. The people are the bearer of sovereignty and the only source of power. No one can usurp power. Useful topics – Junta Washington Business tyneside autoparc used cars has robin mcgraw had plastic surgery vodahost support ticket

    Namibia Finance

    TWITTER
    FACEBOOK
    GOOGLE+
    indiana

  9. Politics in USA today. We n we publish all of them hot and advanced facts Russia, estimates experts. All evil on earth exists with the quiet tacit consent of the indifferent. No one provides us with incentives. We are People. We are building a civil society. The people are the bearer of sovereignty and the only source of power. No one can usurp power. Useful topics – Weapons Rhode-island Finance honda official website philippines cozumel insider dymo labelwriter se450 driver

    TWITTER
    FACEBOOK
    GOOGLE+
    louisville

Leave a Reply

Your email address will not be published. Required fields are marked *