https://github.com/tiendq/twitter-client-redux

A Redux async action example with Twitter REST APIs
https://github.com/tiendq/twitter-client-redux

babel-node express jest nodejs react redux twitter-api

Last synced: 3 months ago
JSON representation

A Redux async action example with Twitter REST APIs

• Host: GitHub
• URL: https://github.com/tiendq/twitter-client-redux
• Owner: tiendq
• License: mit
• Created: 2016-12-15T03:35:34.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2020-07-19T22:58:55.000Z (almost 5 years ago)
• Last Synced: 2025-01-12T16:21:53.966Z (5 months ago)
• Topics: babel-node, express, jest, nodejs, react, redux, twitter-api
• Language: JavaScript
• Homepage:
• Size: 343 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# twitter-client-redux

A [Redux async action](http://redux.js.org/docs/advanced/AsyncActions.html) example to search Twitter with [Twitter REST APIs](https://dev.twitter.com/rest/public)

[![Build Status](https://travis-ci.com/Tiendq/twitter-client-redux.svg?branch=master)](https://travis-ci.com/Tiendq/twitter-client-redux) [![Greenkeeper badge](https://badges.greenkeeper.io/Tiendq/twitter-client-redux.svg)](https://greenkeeper.io/)

![Demo](./demo.png)

## Features

- Redux async action

- Twitter REST APIs

- CSS modules

- Test with Jest

- Server side rendering (SSR)

- Pass `ref` to HOC/Redux's connected components with `React.forwardRef`

Notes: We use `babel-node` for development (and build by `babel` for production). `babel` use `babel-plugin-css-modules-transform` to handle `scss` files then it ignores `style-loader` which loaded by `webpack-dev-middleware`. To support SSR we need to only use `webpack` for client side code.

## How to Start

`yarn install`

`yarn test`

`yarn start` to start an Express server at `http://localhost:8080` with [HMR](https://webpack.js.org/concepts/hot-module-replacement/) ([nodemon](https://github.com/remy/nodemon) is utilized for its live loading feature).

`yarn build` to build code for production mode e.g. use CSS file instead of inline style.

## Configuration

In order to run this application locally you need to [create a Twitter application](https://apps.twitter.com/app/new) in your own Twitter account then provide valid `CONSUMER_KEY` and `CONSUMER_SECRET` in `.env` file.

## Resources

- [Introduction to Redux](http://devguides.io/redux/)

- [Redux Official Documentation](https://redux.js.org/)

- [CSS Modules with React: The Complete Guide](https://blog.yipl.com.np/css-modules-with-react-the-complete-guide-a98737f79c7c)

©2018 [Tien Do](https://github.com/tiendq)

MIT License.