User Narratives, Wire Frames, and Technical Planning

User Narratives, Wire Frames, and Technical Planning

August 22, 2017

This tutorial is part of a four part series with the Giphy Search Tutorial, the Concentration Game, the Rotten Potatoes Tutorial. Whereas those tutorials gave you 100% of the code or starter code you needed to build them, this project will be more demanding of you to write your own code, or find the proper code snippets from your other projects and framework documentation.

In this tutorial you will develop a clone of Reddit with posts, subreddits, and authentication. The tools you will use are:

  1. Node.js
  2. Express.js
  3. MongoDB & Mongoose (ODM)
  4. JSON Web Tokens (JWT)

This tutorial should take much longer than the previous tutorials to complete and it will require that you read instructions very carefully and follow them step by step. You might encounter errors that you will need to troubleshoot and google to solve. If you would like to provide feedback on this tutorial, please leave github issues on the github repo.

Tutorial structure

This tutorial will walk you through a pattern of "user-centered" or outside-in development with route tests, meaning you will first develop a simple template for a route, then its actual backend logic. By following this pattern software is built step-wise and organically without leaps or guesses. This avoids large architectural bugs which are the biggest drain on the speed of a dev team.

As you design your interfaces, keep in mind the rules of a good user interface - you can review those here: goodui.org.

Getting Started: User Narratives & Wireframes

If you are not familiar with Reddit, navigate there now and explore this internet wonderland. Check out its history if you like. It was founded by Alexis Ohanian who is now an investor in Make School. Kinda neat!

While you're there, draw a wireframe of each page on some scratch paper. The basic layout is two navbars (one for subreddits and one for sorts/filters) and then a two column layout in a proportion of about 10:2, with no side gutters or padding.

Technical Planning

Now its time to get started by making a step-by-step plan.

Here are some of the routes and features we could build

  • Create a post
  • Show all posts
  • Comment on posts
  • Make comments on comments
  • Sign up
  • Login
  • Associate posts, comments, and votes with their author
  • Search
  • Create subreddit
  • Create a post on a subreddit
  • Show all subreddits
  • Vote up a post
  • Vote up a comment
  • Sort posts by # of votes

In what order should we fulfill these tasks? Write the order down somewhere that you would do these tasks. When you are done, hover over the solution to see what order these tasks in this tutorial.

We should work from the most fundamental out to things that are more wants and not needs. It is generally best to not start with authentication because that can cause some initial complexity, so we'll do authentication in the middle. Voting could come sooner or later, I put it at the very end so we'll have a kind of themed Twitter or Facebook wall until there is voting and sorting on votes.

  1. Create a post
  2. Show all posts
  3. Comment on posts
  4. Create subreddits
  5. Create a post on a subreddit
  6. Show all subreddits
  7. Sign up and Login
  8. Associate posts, comments with their author
  9. Make comments on comments
  10. Vote a post up
  11. Vote a comment up
  12. Sort posts by # of votes

Bootstrapping Express.js

Ok, we've got user narratives, wireframes, and a plan for the first few features we'll do. Time to get started coding! Remember not to "work ahead", instead always do the absolute minimum work to get what you are working on to function and then move to the next.

  1. Create an npm project (hint: $ npm init) - remember to make your main file called server.js.
  2. Bootstrap Express.js. You can use Handlebars or Jade as a templating engine if you like. Express documentation. Now run your server and get "hello world" to appear.
  3. Once you have "hello world" and a template engine installed, move on to the next step.
  4. Now add bootstrap to your layout template <head> using the CDN.
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

  <!-- Latest compiled and minified JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  1. Now add the navbar component to your layout template.
  2. Onwards!

Feedback

If you have feedback on this tutorial or find any mistakes, please open issues on the GitHub Repository or comment below.

Summer academy

An iOS Development Summer Course

Design, code and launch your own app. Locations in San Francisco and Asia

Find your location

Product College

A computer science college

Graduate into a successful career as a founder or software engineer.

Learn more