Upcase Code Contest - Round 2 Specifications

Upcase Code Contest, Round 2

Welcome to the Upcase Code Contest, Round 2!

In this round, we’ll be building Photogram, an app very reminiscent of

Contest Rules

  • The minimum team size is 3 (a primary goal is to practice collaboration
  • You should push your final commit and deploy by Sunday, February 7th.
  • We’ll fill a Weekly Iteration with the most educational highlights and
    constructive criticisms that we find among the submissions, but we may not
    review every part of every app. If you have specific questions about your
    approach that we don’t touch on in the episode, ask them here and we’ll
  • Prizes:
    • First place team: Two months of Upcase for free.
    • Second place team: One month of Upcase for free.
    • Third place team: Half off on one month of Upcase.

App Outline

In the simple Instagram variant that you’ll build, we’ll focus on the social
network aspect and omit the image uploading/filtering aspect. As a user, I
should be able to:

  • Register with email:

    • Choose a unique username.
    • Provide a full name.
    • Provide a short bio (max length: 140 characters).
  • Sign in, sign out, etc.

  • Add photos:

    • Provide a caption.
    • Provide the URL of an existing image.
      • To avoid having to create AWS accounts, we will not be dealing with
        image uploads in this project

      • You can use this Google image search for mountains as a basis for
        finding sample image URLs (change the search term as needed to add
        variety, but the search settings likely will work and help with

  • Find other users by username (don’t go crazy with this; just a simple
    filterable list).

  • See a profile of each user:

    • Name
    • Gravatar
    • Their photos count
    • Their follower count (links to followers list)
    • Their following count (links to following list)
    • Their likes count (links to likes list)
    • Grid of thumbnails linking to their photos
    • A button to follow/unfollow the user
  • Follow other users:

    • Relationships are one-way; User A can follow User B even if User B doesn’t
      follow User A.
    • Users don’t need permission to follow other users; anyone can follow
      anyone else.
  • See a timeline:

    • My own photos,
    • plus the photos of people I follow,
    • in reverse chronological order (newest first).
  • See a list of photos that I have liked.

  • Anywhere that I see a full photo, I should be able to:

    • See comments and comment on the photo.
    • Like/unlike the photo.
    • See how many likes the photo already has.

When in doubt, you can and should use Instagram for design inspiration.

Main Pages

|                route | Page content                                                          |
|            --------- | -------------------------------------------------------------         |
|                    / | When signed in => timeline, when signed out => Welcome / Sign up page |
|          /photos/:id | Page specific to the photo                                            |
|               /users | Filterable list of all usernames                                      |
|           /:username | User profile page                                                     |
| /:username/followers | Who follows the user                                                  |
| /:username/following | Who the user follows                                                  |
|     /:username/likes | The photos liked by that user                                         |


  • Paginate where appropriate.
  • When listing users on the following or followers pages, display their
    gravatars, name, and thumbnails of the most recent 3-5 photos.
  • Add authorization where appropriate to prevent users from modifying other
    users’ data.
  • Everywhere you display a resource (a photo, a user, etc), make it a link to
    that resource’s page.
  • No need to build admin functionality, instead just use the console or
    factories / seeds to populate sample data.
  • For this challenge we want to focus on the functionality and code, not the
    design. In general try to align to Instagram’s layouts, but no need to sweat
    over fancy styling.
  • Feel free to use gems as appropriate; there’s need to rewrite the world.

The Site Should Work Without JavaScript

If a user switches off JavaScript, the app should still be completely
functional. That said, when a user does have JavaScript enabled,

  • Make the “Like” button work via AJAX.
  • Make the follow button work via AJAX.
  • Make the comment form submit via AJAX.
  • Highlight the comment when the user visits a deep link to the comment on the
    photo page (this can be done on the Rails side or in JS). The link will be
    similar to /photos/:id#comment-12345.

Setup / Tools

  • Share the code in a public GitHub repo (this allows for using tools like
    Hound and CircleCI for free).
  • Use a Trello board w/ features (roughly follow The Playbook on this).
  • Enable hound for PR style reviews.
  • Enable CircleCI for testing PRs.
  • Deploy to Heroku.
  • Work via PRs w/ code review.

Judging Criteria

We’ll judge the apps based on a number of criteria, largely viewing it as we
would any client app. The thoughtbot guides are a good resource if you are
unsure how to move forward.

Some specific criteria we will be focusing on are:

  • Git history
  • Tests
    • Good feature coverage
    • Minimal duplication
  • Data model / architecture.
    • Clean separation of responsibilities for each model. DRY.
  • Clean, RESTful routing
  • Clean code
    • Minimal duplication
    • Expressive well named methods
    • Small methods

Have fun!

1 Like

wow! This app is going to be a challenge! :slightly_smiling: Excited to learn something new!

Hey folks, just wanted to follow up on the code contest. At this point all teams should have completed their implementation.

If you have not done so already, please have a member send in the details of your project to help@upcase.com, including:

  • Team name
  • team members (email or github username)
  • Public github URL
  • Live Heroku URL

In order to be considered for the contest your submission must be in by Friday (Feb 19).

Feel free to send in any questions to help@upcase.com or posting here. Excited to see the submissions!

I didn’t know you organize team contests here. That’s so cool. I wish I received an email notification back when contests were started.