React Movie Cards

A basic application that displays a list of movies as a list of cards. Each card provides movie detail such as title, subtitle, description, image, and rating.

Go here for live demo.

This is a good example of using nested components because it illustrates a nesting of components 3 levels deep. A Movie component has a MovieList component has a MovieCard component has a StarRating component. The Movie component also uses a service called MovieService to retrieve a list of movies (this is from a json document).

Futhermore, I have configured webpack to make use of the copy-webpack-plugin to copy images into the public folder. I have also included the json-loader to load my movie collection from a json file called movies.json.

For styling, I have adopted bootstrap4 beta. I use SCSS for all custom written styles.

The application is composed of the following components:

Header - A heading that displays application title
Movies - The primary (root) component that manages state for Movies and all underlying components. It is also responsible for connecting to MovieService to retrieve movie data
MovieList - Groups a collection of movies
MovieCard - Represents a single instance of a movie
StarRating - Indicates average rating of a movie as a list of 5 stars

Component Diagram

The following services are used to obtain movie data:

MovieService - A wrapper that retrieves data from a json file containing a list of movies

Service Diagram

This project also demonstrates:

a typcial React project layout structure
babel setup and configuration
webpack setup and configuration
eslint setup and configuration
SCSS setup and configuration

Screenshots:

Developed With

Node.js - Javascript runtime
React - A javascript library for building user interfaces
Babel - A transpiler for javascript
Webpack - A module bundler
SCSS - A css metalanguage
Bootstrap 4 - Bootstrap is an open source toolkit for developing with HTML, CSS, and JS
Surge - Static web publishing for Front-End Developers

Related Projects

react-starter

A basic template that consists of the essential elements that are required to start building a React application
react-clicker

A basic React app that allows one to increase, decrease, or reset a counter
react-clock-basic

A basic clock that displays the current date and time
react-timer-basic

A basic timer that will start a countdown based on an input of time in seconds
react-timer-advanced

A basic countdown timer that offers an advanced UI experience
react-masterminds

A basic game of guessing a number with varying degrees of difficulty
react-calculator-standard

A calculator that provides the essential arithmetic operations, an expression builder, and a complete history of all expressions
react-bitcoin-monitor

An app that monitors changes in the Bitcoin Price Index (BPI)
react-weather-standard

A weather application that displays the current weather, daily forecasts, and hourly forecasts based on your current geolocation

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

Prerequisites

The following software is required to be installed on your system:

Node 8.x
Npm 3.x

Type the following commands in the terminal to verify your node and npm versions

node -v
npm -v

Install

Follow the following steps to get development environment running.

Clone 'react-movie-cards' repository from GitHub

git clone https://github.com/drminnaar/react-movie-cards.git

OR USING SSH

git clone git@github.com:drminnaar/react-movie-cards.git

Install node modules

cd react-movie-cards
npm install
npm dedupe

Build

Build application

This command will also run ESLint as part of build process.
```
npm run build
```
Build application and start watching for changes

This command will also run ESLint as part of build process.
```
npm run build:watch
```

Run ESlint

Lint project using ESLint
```
npm run lint
```
Lint project using ESLint, and autofix
```
npm run lint:fix
```

Run

Run start

This will run the 'serve' npm task
```
npm start
```
Run webpack dev server
```
npm run serve:dev
```
Alternatively run live-server (simple development http server with live reload capability)
```
npm run serve
```

Versioning

I use SemVer for versioning. For the versions available, see the tags on this repository.

Authors

Douglas Minnaar - Initial work - drminnaar

Codeurs2020/react-movie-cards

ErrorLooks like something went wrong!

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

Error
Looks like something went wrong!

Packages