marquesm91 / react-readable

Readable project from Udacity React Developer Nanodegree Program

Readable Project

Live Demo

Readable Project is the second challenge project of Udacity Nanodegree React Program.

This project was bootstrapped with Create React App.

You can find the most recent guide version of creating projects with create-react-app here.

Test yourself

Follow these steps

• git clone https://github.com/marquesm91/react-readable
• npm install or yarn
• npm run start or yarn start

The application will open your default browser on https://localhost:3000/

About the application

After the default installation with create-react-app, three 3rd party library was added:

• react-router-dom found here and used to better experience with browser url navigation and keep react application sync'd.
• escape-string-regexp found here and used to format RegExp.
• sort-by found here and used to sort array based on an key object.
• uuid found here and used to set Unique IDs.
• antd found here and used to ease and create the best UX/UI possible.

The application consumes Readable API provided earlier from the starter kit Github repo.

What you can do

• You can add/remove/edit/vote Post and Comment as long as they exists.
• You can filter a Post list by categories pre defined.
• You can sort a Post list or Comment list by vote score or date and order from the most older or newer.
• You can search for a specific title Post, Author or Body content comment.

Features

All features listed are a plus and not mentioned in challenge's specification.

• As said before, you can search for a specific title Post, Author or Body content comment.
• The sort feature is smart enough to pick a Post sort or Comment sort when necessary.
• The Add button have the best UX possible to add a Comment or Post when necessary acting like a joker.
• The Add Post button will come with a label next to it if the selected category has zero posts.
• The Add Post button will come with a label next to it if the application has zero posts.
• The Add Comment button will come with a label next to it if the selected Post has zero comments.
• The form will pre fill the category for you if you choose to add a Post when any category was selected.