nickcis/radioactive-bird

A Tiny App that, based on a given keyword parameter, lists the Tweets related to it (Razzle+React+Redux Example)

Radioactive Bird

See it in action

A Tiny App that, based on a given keyword parameter, lists the Tweets related to it (Razzle+React+Redux).

A Razzle ♥ based project.

(Some) Packages / Libraries used:

• Razzle: MIT License
• ReactJS: BSD License
• Redux: MIT License
• Material UI: MIT License
• ExpressJS: MIT License
• Serialize Javascript: BSD 3-Clause License
• Jest: BSD 3-Clause License
• Prettier: MIT License
• EsLint: MIT License
• Enzyme: MIT Lincense

How to use

Install it and run (development):

yarn install
mkdir build
yarn start

Run (production):

yarn build
yarn start:prod

Run Linters:

# First Prettier :)
yarn run format
yarn run lint

Docker

docker build -t radioactive-bird .
docker run -ti --rm -p 3000:3000 -e TWITTER_CONSUMER_KEY=KEY -e TWITTER_CONSUMER_SECRET=SECRET radioactive-bird

Configuration

Environment variables:

• RAZZLE_CONSUMER_KEY: Twitter consumer Key (Overrided in runtime by TWITTER_CONSUMER_KEY)
• RAZZLE_CONSUMER_SECRET: Twitter Consumer secret (Overrided in runtime by TWITTER_CONSUMER_SECRET)

Razzle uses Dotenv configuration, the easyest way is to create a .env.local file on the root directory:

cat .env.local
RAZZLE_CONSUMER_KEY=XXXXXXX
RAZZLE_CONSUMER_SECRET=XXXXXX

Note: Razzle uses webpack to inyect the environment variables values into the source code, this isn't the best idea but for the scope of this example works correctly. If runtime configuration is needed TWITTER_* environment variables should be used.

Deploy to now

1. Login: yarn now login
2. Add secrets:

• yarn now secrets add twitter-consumer-key KEY
• yarn now secrets add twitter-consumer-secret SECRET

3. Deploy: yarn now

Comments

• As regards testing, most component's test are smoke tests, interactions (simulating clicking events) aren't tested, nor a full snapshot testing was done.
• The build could be further improved, actually the bundle size is high, further investigation regarding yarn dependencies warnings and tree shaking should be done.
• To target diferent data fetching techniques between SSR and Web, webpack's NormalModuleReplacementPlugin is used. As the protocol implementation is really short (only two endpoints: search tweets and fetch tweet), in SSR the endpoint logic is repeated. Further improvement like importing express's Route and faking a fetch function (for SSR) which simulates api calls could be done (api Route test do a simulation of calls, this technique could be re used).
• As regards UI, not all of twitter data is used. Entities such as urls, users and hashtags aren't linked to actual information. In addition, tweets are not linked with page insights. Only images in tweets are implemented. The search only shows the first results, pagination isn't implemented. Not back button was implemented, the app currently relies on the browser's back history.
• A Typecker such as flow could be used to add further static code analisis.
• As regards SEO techniques, only SSR was implemented.
• A deploy pipeline for gitlab ci should be implemented (CI actually run tested, but now deployment wasn't done)
• No PWA techniques were used, Web Workers and LocalStorage could be implemented in order to cache old searchs / tweets and allow the web to be used as an app.

Screenshots 🎉

Home page in desktop

Search page in desktop

Tweet page in deskop

Home page in mobile

Search page in mobile

Tweet page in mobile

radioactive-bird's Issues

Test

test