ReactJS: TV Guide

Setup

This application has been:

• created with create-react-app.
• ejected to make scss additions to webpack.
• Redux installed for state management

Once downloaded install with

npm install

And run with

npm start

CSS Methodology

The css methodology being used is BEVM, which is an alteration of the BEM modifier to split it into variation and modifier.

For an example of this, read here and view component/_button.scss

Additional directories added based on Harry Robert's namespacing technique linked here and here

Directory Structure

src/actions - Redux actions
src/components - Stateless React components
src/constants - Redux constants
src/containers - React containers
src/reducers - Redux reducers
src/sass - All SASS styles, for structure information see /sass/main.scss

What I would like to change / TODOs

• Directories would be more modular with domain driven design.
• Sass files could be included in each component directory to make them easier to locate.
• A service for http requests would keep requests consistent and could potentially manage other information (like authentication and default headers).
• Better handling of loading. The application needs to handle the loading of data in the front-end. For example, when you load episode information, the episode is '0' for a brief moment because it doesn't have the information. An example where this has been handled can be seen in this project.

This has been added in a later project.

More examples

Seasons Component