daniel-234/reactnd-project-readable

Readable Project

The second project in the React Nanodegree course is an anonymous content and comment web application, built using React and Redux. This contents and comment structure is common across a large number of websites and applications, from news sites to blogs to aggregators like Hacker News and Reddit. 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.

Getting Started

To use this application you will need to install a local backend development server, which can be (forked and) downloaded at this repo. Follow the instructions in the README file to install and launch it. To install this application, instead, you can (fork and) download it and then run the command npm install from your console. To launch it, after the installation has successfully complete, launch it with the command npm start.

Built With

• React - A JavaScript library for building user interfaces
• Redux - A predictable state container for JavaScript apps
• Readable API server - The local backend development server used
• Redux form

Author

• Daniele Erbì - daniel-234

Notes

This app has been created as a project for the React Nanodegree at Udacity. It reproduces a content and comment web application, making use of React and redux, with minimal CSS.

License

This project is licensed under the MIT License - see the LICENSE.md file for details

Acknowledgments

• Stackoverflow - How to add an element to an array in Redux
• Stackoverflow - Adding multiple objects to the store in Redux
• Generate a UUID identifier.
• Stackoverflow - Create GUID - UUID in JavaScript
• Redux forms:
• Hackernoon - Using forms in React-Redux: tips and tricks
• Medium - Using Redux to handle user input
• Redux-form docs: Getting started with redux-form
• Redux form docs: Synchronous Validation example
• Erik Rasmussen - Abstracting Form State with Redux Form
• Stackoverflow - Clear 'redux-form' after submitting
• Initialize Redux form from state:
• Redux form - Initialize from state
• Stackoverflow - Redux form initial values
• GitHub Redux form issues - initialize from state
• Apart from the good explanation on the Redux official documentation and the lessons in the Udacity course, I relied on a post from Dan Abramov in Stackoverflow and the README documentation in the GitHub repository of the Redux thunk middleware. Dan Abramov points to an official Async example to understand the thunk middleware mechanism, and I relied heavily on some of its code to build some of my actions.
• GitHub - Redux thunk repository
• Stackoverflow - How to dispatch a Redux thunk with a timeout
• A brush up on how to center and align divs and unordered lists without special hacks:
• Stackoverflow - Need an unordered list without any bullets
• Stackoverflow - Unordered list not aligning all the way to the left in a div
• Matthew James Taylor's Blog - Beautiful CSS centered menu with no hacks
• Adding React Router to the project:
• Egghead - JavaScript Redux adding React Router to the project
• Redux docs - Advanced tutorial: usage with React Router
• Stackoverflow - Pass props in link React router
• Solve problems with browser history in Redux, as history is a module on its own now:
• Stackoverflow - React Router v4 browserHistory is undefined
• GitHub - ReactTraining history library
• To make the app work well with React Router I had to add a Switch component. Here is the answer on Stackoverflow that hinted me to the solution:
• Stackoverflow - React Router with optional path parameter
• Other resources that have been useful to me on React Router:
• Stackoverflow - React Router Switch component matches
• React Training - React Router Web API Swicth
• Stackoverflow - Wrapping a React Router Link in an HTML button
• Some CSS hints to display the two React icons arrows on the page:
• Stackoverflow - Two divs side by side fluid display
• Stackoverflow - How can I stack two arrow images (upvote and downvote) on top of each other using CSS
• On implementing the mechanism to vote a post I faced some issues, one of which was a way to pass a reference to the click mechanism. This answer in Stackoverflow helped me solve it:
• Stackoverflow - ReactJS onClick can't pass value to method
• When I was looking for a way to sort the posts in my app, through the select form in the main page, I came across this post on Stackoverflow. Thanks to the answers I was able to get in the right path. I followed the second one, which pointed me to the Redux Documentation and the section Usage with React.
• Stackoverflow - Where should I handle sorting in Redux App?
• Using Redux with React and separating Presentational and Container Components:
• Redux Docs - Usage with React
• GitHub Redux issues - State changes but does not call render function of Parent Component
• GitHub React issues - Components not re-rendering with connect()
• Stackoverflow - My Redux state has changed. Why doesn't React trigger a re-render?
• Convert a Unit timestamp into a readable date:
• Stackoverflow - Convert a Unix timestamp to time in JavaScript
• Adding features to a container component:
• GithHub - Allow connect to more than one component
• Stackoverflow - Passing props to React-Redux Container Component
• Latest fix to the code:
• Stackoverflow - Cannot resolve module 'react-dom'
• Stackoverflow - How to get rid of underline for Link component of React Router
• Stackoverflow - How do I keep document.title updated in React Router