Skip to content
Udacity React Nanodegree project: Readable, a Single Page Application built with React, React Router and Redux.
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci
.vscode Feature/add comments (#13) Dec 15, 2017
public refactor: Split client and api into separate repos Nov 16, 2017
src
.editorconfig
.eslintrc.yml
.gitignore
.nvmrc
README.md
package.json Feature/add comments (#13) Dec 15, 2017
yarn.lock Feature/add comments (#13) Dec 15, 2017

README.md

React Project: Readable

code style: prettier tested with jest CircleCI

Description

This is the second project for the React Nanodegree.

Readable is an app where 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.

The client app is built with React and Redux.

Table of Contents

Getting started

Installation

The React app was bootstrapped with Create React App. The api-server code is taken from the Udacity project starter repo and is available here.

Dependencies:

  • Yarn package manager
  • create-react-app
  • Editor / IDE

To get started with this repository:

# git clone the repository e.g. into a <projects> folder
cd <projects>
# git clone with ssh
git clone git@github.com:cubiio/readable.git

# or git clone with HTTPS
git clone https://github.com/cubiio/readable.git

# change directory into the cloned repo
cd readable

# install the dependencies
yarn install

To install the API server refer to the docs in this repo.

Develop

How to run: React App

yarn start

How to run: API Server

Follow the development instructions in this repo.

Using the API Server

Include An Authorization Header

All requests should use an Authorization header to work with your own data:

fetch(
    url,
    {
        headers: { Authorization: 'whatever-you-want' }
    }
)
Comment Counts

Posts retrieved in a list or individually now contain comment counts in the format post: { commentCount: 0 }. This should make it easier to display the number of comments a post has without having to call the comments endpoint for each post. This count is updated whenever a comment is added or deleted via the POST /comments or DELETE /comments/:id endpoints.

API Endpoint

The following endpoints are available:

Endpoints Usage Params
GET /categories Get all of the categories available for the app. List is found in categories.js. Feel free to extend this list as you desire.
GET /:category/posts Get all of the posts for a particular category.
GET /posts Get all of the posts. Useful for the main page when no category is selected.
POST /posts Add a new post. id - UUID should be fine, but any unique id will work
timestamp - [Timestamp] Can in whatever format you like, you can use Date.now() if you like.
title - [String]
body - [String]
author - [String]
category - Any of the categories listed in categories.js. Feel free to extend this list as you desire.
GET /posts/:id Get the details of a single post.
POST /posts/:id Used for voting on a post. option - [String]: Either "upVote" or "downVote".
PUT /posts/:id Edit the details of an existing post. title - [String]
body - [String]
DELETE /posts/:id Sets the deleted flag for a post to 'true'.
Sets the parentDeleted flag for all child comments to 'true'.
GET /posts/:id/comments Get all the comments for a single post.
POST /comments Add a comment to a post. id - Any unique ID. As with posts, UUID is probably the best here.
timestamp - [Timestamp] Get this however you want.
body - [String]
author - [String]
parentId - Should match a post id in the database.
GET /comments/:id Get the details for a single comment.
POST /comments/:id Used for voting on a comment. option - [String]: Either "upVote" or "downVote".
PUT /comments/:id Edit the details of an existing comment. timestamp - timestamp. Get this however you want.
body - [String]
DELETE /comments/:id Sets a comment's deleted flag to true.  

Tests

Jest is used for tests in the React app. To run the test suite, use this command:

yarn test

Continuous Integration

Circle CI is set-up for this repo. Pushes made to remote will trigger a Circle build. The config is in the .circle folder.

Style Guide

This repo uses ESLint with Prettier formatting.

The ESLint config extends from AirBnB, with a few changes. Refer to the .eslintrc.yml file in the root of the repo for info on the changes.

Release

Build

To create a production build, run this command from the project root:

yarn build

If the build is successful, it results in this output:

The build folder is ready to be deployed.
You may serve it with a static server:

  yarn global add serve
  serve -s build

The contents of the build directory can be used for a deployment.

Deploy

API

Deploy the server by running now on the command line in the api project folder. Copy the API url provided - this is the production API url - and add it to the api.js file.

let api = '';

if (process.env.NODE_ENV === 'production') {
  // add the now.sh url below
  api = 'https://api-server-example-url.now.sh';
} else {
  api = 'http://localhost:3001';
}

Client

Add a now.json file at the project root level and add the following contents:

{
  "now": {
    "env": {
      "NODE_ENV": "production"
    }
  }
}

Keys and secrets can be added to this file as required. Refer to the docs for more info.

From the /build folder, run now -n example-name. This will deploy the production version of the app under the name 'example-name'.

Demo

A demo of the app is deployed with now.sh and is available here.

Inspiration and Information

Links for articles / docs I've found useful:

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.