Coder Social home page Coder Social logo

rebirth-of-reddit's Introduction

Rebirth of Reddit

Super Awesome Co. has just been asked to concept a new Reddit theme. This is super last minute but we need to come up with a few concepts to propose to them by tomorrow. This could be huge for us and really put our shop on the map. We have to drop everything at once to hit this deadline.

Game Plan

Our game plan is to use their subreddit API to create a Reddit clone with our own theme (See the layouts in the layouts directory). I know we don't have a lot of time but we also need to demonstrate that we are up to par with our stack and code quality. We can get the JSON feed of any sub-reddit by changing adding a .json extension to the URL.

Ex. http://www.reddit.com/r/javascript -> http://www.reddit.com/r/javascript.json

Objectives

Use the sub-reddit API to achieve the following:

  1. Look at the data the API gives us and whiteboard our concept for our proposed design.
  2. Create a simple client side application and set it up with our current workflow and create the new repo on GitHub.
  • Gulp
  • Sass
  • anything else...
  1. Use the layouts defined in the Layouts directory
  • the image should fill the entire area of the rectangular box (use background-size "cover").
  • Optional Hard Mode: Even though the image is displayed as a background image, create your markup so that each image is also included in an tag so it is visible to the DOM
  • the title should never span more than 2 lines tall.
  • the subtitle line should never span more than 2 lines tall.
  • the text snippet should never span more than 4 lines tall, except for the small size, where it should be the height of the text.
  • Google fonts used in the layout:
    • Oswald Regular
    • Lato Regular
  • Be sure you are viewing the layouts at Actual Size. Use media query ranges as they make sense for the layout. The only 'media query' requirement is that the final webapp matches the mockups at the sizes specified, and that they gracefully transition at each range.
  1. When the page loads we need to have the application go out to the API endpoint of your choosing to pull in the current feed via AJAX.
  • Interaction, Loading Data
    • when "My Boards" is clicked
      • create an xhr get request to http://www.reddit.com/r/MY_FAVORITE_SUBBREDDIT.json
    • when "Random" is clicked
      • create an xhr get request to http://www.reddit.com/r/ANOTHER_SUBBREDDIT.json
    • when "Get the app" is clicked
      • create an xhr get request to http://www.reddit.com/r/ANOTHER_SUBBREDDIT.json
  1. Dynamically create our feed list with our proposed style from the data received from the API.
  2. Again, we have to have a good code demo as well so please use appropriate best practices when building out the app.
  3. Set up your project as a GitHub page so that we can demo your work.

Bonus

I think it would really knock their socks off if we could have our clone have some behavior that Reddit doesn't currently have, like maybe a Twitter type of feed that updates with the latest posts or something. We'll call it Twittet or maybe Redditter...I don't know. That's what I'm paying you for!

You could add features like:

  • Infinite scrolling
  • Reddit search engine - get data from any subreddit

Oh and.....THAAAAANNKKKS :D

rebirth-of-reddit's People

Contributors

joekarlsson avatar sgnl avatar jaywon avatar nigelearle avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.