Giter VIP home page Giter VIP logo

nd019-readable's Introduction

Readable Project

This is the final assessment project for Udacity's Redux course of Learn React JS - React Nanodegree to build a content and comment web app. Users will be able to post content to predefined categories, comment on their posts and other users' posts, and vote on posts and comments. Users will also be able to edit and delete posts and comments.

Views

  • Default (Root)

    • should list all available categories, which should link to a category view for that category
    • should list all of the posts ordered by voteScore (highest score first)
    • should have a control for changing the sort method for the list, including at minimum, order by voteScore and order by timestamp
    • should have a control for adding a new post
  • Category View

    • identical to the default view, but filtered to only include posts with the selected category
  • Post Detail View

    • should show the details of a post, including: Title, Body, Author, timestamp (in user readable format), and vote score
    • should list all of the comments for that post, ordered by voteScore (highest first)
    • should have controls to edit or delete the post
    • should have a control to add a new comment.
    • implement comment form however you want (inline, modal, etc.)
    • comments should also have controls for editing or deleting
  • Create/Edit View

    • should have a form to create new post or edit existing posts
    • when editing, existing data should be populated in the form

Data

Category

{
  "name":"react",
  "path":"react"
}

Post

{
  "id":"8xf0y6ziyjabvozdd253nd",
  "timestamp":1467166872634,
  "title":"Udacity is the best place to learn React",
  "body":"Everyone says so after all.",
  "author":"thingtwo",
  "category":"react",
  "voteScore":6,
  "deleted":false
}

Comment

{
  "id":"894tuq4ut84ut8v4t8wun89g",
  "parentId":"8xf0y6ziyjabvozdd253nd",
  "timestamp":1468166872634,
  "body":"Hi there! I am a COMMENT.",
  "author":"thingtwo",
  "voteScore":6,
  "deleted":false,
  "parentDeleted":false
}

Sort

{
  "field":"SCORE",
  "ascending":true
}

API Server

Information about the API server and how to use it can be found in its README file.

Start Developing

To get started developing right away:

  • Install and start the API server

    • cd api-server
    • npm install
    • node server
  • In another terminal window, install and start the frontend project

    • cd frontend
    • npm install
    • npm start

Demo

https://nd019-readable.herokuapp.com/

Contributing

  • Fork it!
  • Create your feature branch: git checkout -b my-new-feature
  • Commit your changes: git commit -am 'Add some feature'
  • Push to the branch: git push origin my-new-feature
  • Submit a pull request

License

Copyright (c) 2017 Min Li

This program is free software: you can redistribute it and/or modify it under the terms of the Apache License Version 2.0 as published by Apache Software Foundation.

nd019-readable's People

Contributors

limin avatar

Watchers

 avatar

nd019-readable's Issues

Enhance post list

A few items need updates (posts list):

missing Edit button (per post)
missing Delete button (per post)
comments count is missing (per post)
author is missing (per post)
voting mechanism is missing (per post)

firefox support

  1. initial data isn't loaded at all
  2. category list doesn't work

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.