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
Instagram.
Contest Rules
- The minimum team size is 3 (a primary goal is to practice collaboration
workflow). - 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
discuss. - 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
consistency):https://www.google.com/search?q=mountains&biw=1440&bih=801&tbm=isch&source=lnt&tbs=isz:ex,iszw:500,iszh:500
-
-
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.
- Relationships are one-way; User A can follow User B even if User B doesn’t
-
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 |
Notes
- 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
- Avoid merge commits
- Have clear commit messages (reference 5 Rules for Good Commit Messages)
- In general, follow the thoughtbot Git flow
- 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
Excited to learn something new!