Giter VIP home page Giter VIP logo

ajaxify-reddit's Introduction

Ajaxify Reddit

Reddit HQ

There's currently a little known gem out on the internet called Reddit. The developers are currently swamped with new feature requests and need your help. They want to test out the Reddit website as a single page application. They have some starter code but haven't had a chance to go much further than that.

The Reddit API

Luckily, to access the data for the homepage and other landing pages, all you have to do is append .json to the end of the normal URL.

For example:

// Homepage URL
https://www.reddit.com/

// JSON data for the homepage
https://www.reddit.com/.json
// New Post URL
https://www.reddit.com/new/

// JSON data for the 'new' section
https://www.reddit.com/new/.json

Deliverables

  • Replicate the list of stories for each section, with the story image, link, and any relevant information
  • Allow the user to click the story link or image to go to the actual URL of the story
  • For now, don't worry about giving users the ability to upvote or downvote the story
  • Fork THEN clone this repository to have a unique product you can link to on your personal portfolio.

Implementation

  1. Spend a few moments browsing Reddit to familiarize yourself with how the site works.

  2. Draw a quick wireframe of how you would want YOUR page to look displaying multiple posts.

  3. Label your wireframe components with any relevant tags or special css classes that would dictate how your page interacts with the user (i.e. .col-xs-4, .img-responsive, .float-left, etc.)

  4. Run a sanity check to see if you can hit the Reddit API with an AJAX GET request ( hint: it is very similar to the geoQuakes request )

  • Drill through your JSON to find an image, a title, and a link to the first submission in the array of posts.
  • Display that first post information on your web page.
  • Iterate through your json response from the Reddit API and display EVERY post the same as your first post

Challenges

  • Use string literals to create a template that you run your entire JSON response through to create a consistent output.
  • Refactor your code to be more object oriented or make use of prototypes ( Hint: We are iterating over objects, how hard would it be to pass them into an object constructor to allow us to call methods on them?)
  • Now that we've redone the original homepage, let's now come up with our own mind blowing UI using Bootstrap and their data
  • The call examples above only give you results for the first page. See if you can Google how to go beyond the first page of results and give them a way to navigate to other pages

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.