geekstars

This is forked from react-redux-starter-kit It displays information retrieved from the Github API - most followed users and most starred repo's.

Technologies used:

• React
• Redux
• React Router
• Bootstrap
• create-react-app
• Babel and Webpack (now behind the scenes thanks to create-react-app)

Feature highlights:

Best React Practice - Separating "smart" and "dumb" components

This design pattern makes even more sense when using React along with Redux, where top-level smart components (a.k.a. containers in this codebase such as UsersPage and ReposPage) subscribe to Redux state and dispatch Redux actions, while low level components (such as User, Repo, and Header) read data and invoke callbacks passed in as props.

Async Data Fetching with Caching and Pagination

The UsersPage and ReposPage would show most followed Github users (with 1000+ followers) and most starred Github repos (with 10000+ stars). The async actions (see users and repos under actions) fetch data from the following Github APIs:

• https://api.github.com/search/users?q=followers:>1000&order=desc&page=1
• https://api.github.com/search/repositories?q=stars:>10000&order=desc&page=1

The fetched data are stored with the page number as the lookup key, so that the local copy can be shown without the need to re-fetch the same data remotely each time. However cached data can be invalidated if desired.

Error Handling while Fetching Data

You can test this by disabling your internet connection. Or even better, you can page through UsersPage or ReposPage very quickly and hopefully invoke Github's API rate limit for your IP address. The application would fail gracefully with the error message if data fetching (for a particular page) fails. However, the application can still show cached data for other pages, which is very desirable behavior.

Authentication and Restricted Pages

Certain UI pages (UsersPage and ReposPage) are only accessible after signing in to the application. When accessing restricted pages without signing in first, the application redirects to the Login page. The authentication is based on JSON Web Token (JWT).

Getting Started

Thanks to create-react-app, we will have a configuration-free dev experience.

To get started, please clone this git repository and then run npm install once under the project top-level directory.

git clone https://github.com/cloudmu/geekstars.git
cd geekstars
npm install

This will install the dependencies for the client side.

You’ll need to have Node installed on your machine. (Node >= 6 and npm >= 3 are recommended).

While You're Developing...

Whenever you want to run/test the program, cd to the project top-level directory. Use these commands:

npm start

Runs the app in the development mode, using the Webpack-provided "development server".
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.
Note The web app is up and running now, but some features (such as JWT-based authentication and server alerts/notifications) rely on an API Server. Be sure to run the API Server as well.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

npm run eject

Note: eject is an advanced create-react-app tool. Read the how-to for details.

How Do I ... ?

This project was ported to use create-react-app for handling all assets. Many questions are answered in its how-to.