kenberkeley / tmdb-react

A TMDb demo powered by Create React App. Online demo 👉

A TMDb demo powered by Create React App (CRA)

The README generated by Create React App was moved to README-CRA.md

§ Online demo

Click here.

§ Features

• Basics: React + React Router + React Helmet + Axios
• State management: Rematch (a better Redux)
• UI lib: Bulma + Font Awesome 5
• Get rid of ../../../ by link-module-alias
• Auto polyfill for old browsers, powered by Polyfill.io

$ Quick Start

$ git clone https://github.com/kenberkeley/tmdb-react.git
$ cd tmdb-react/

# Install dependencies
$ npm i

# Run!
$ npm start

Then open http://localhost:3000

$ Project Structure

For the whole project structure, please turn to Folder Structure (CRA Doc).

Only src/ will be elaborated below.

# Trivial folders/files had been omitted
src/
├── assets/
├── constants/ # All global scope keys (URL query, storage, etc) should go here to avoid name collisions
├── layouts/
│   └── default/
│       ├── comps/ # Use by default layout only
│       │   └── Header.js
│       └── index.js
├── pages/
│   ├── home/
│   │   ├── comps/  # Use by home page only
│   │   └── index.js
│   ├── watchlist/
│   │   ├── comps/
│   │   └── index.js
│   └── index.js # routes config
├── store/ # https://github.com/rematch/rematch
│   ├── models/
│   └── index.js
├── types/ # Centralized proptypes (https://bit.ly/2G3V6Ou)
├── utils/
├── App.js
└── index.js

Reference:

• Folder-by-type or Folder-by-feature (Stack Exchange)
• How to better organize your React applications? (Medium)
• Why using nested connect(react-redux) components is good? (Medium)

§ Deployment

$ npm run deploy

Check out Deployment (CRA Doc) for more information.

§ TODO

• Testings (Unit & E2E)
• Responsive layout