Top 100 Documentaries App with React Hooks and Material-UI
Branch: master
Clone or download
Latest commit 54c829c Jan 12, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
public add app screenshots Jan 12, 2019
src optimized menus layout Jan 12, 2019
static add app screenshots Jan 12, 2019
.env first commit Jan 11, 2019
.gitignore first commit Jan 11, 2019
LICENSE Create LICENSE Jan 12, 2019 add app screenshots Jan 12, 2019
package.json init readme Jan 12, 2019
yarn.lock init readme Jan 12, 2019

Top 100 Documentaries App with Create React App and Material-UI.


App Overview

Project structure

  ├── .env                     Environment variables configuration
  ├── .gitignore               git ignore configuration
  ├──                Documentation
  ├── package.json             npm configuration
  ├── public/                  public resources folder
  └── src                      Main scripts folder
       ├── components/         React basic components folder
       ├── data/               Public data folder
       ├── page/               React routes folder
       ├── utils/              Helper functions folder
       ├── bootstrap.js        Material-UI stytle initialization
       ├── index.css           Global style
       ├── index.js            Main js file
       └── serviceWorker.js    Service worker configuration

State Management

React Hooks, an awesome feature which is available in React v16.7.0-alpha, is able to simplify React state and lifecycle features from function components.

React Hooks


yarn add react@next react-dom@next


import { useState, useEffect, useContext, useReducer } from 'react'

Lazy loading

The React.lazy function enables dynamic import components and routes.


const Child = React.lazy(() => import('./components'));

const Main = () => (
  <Suspense fallback={<div>Loading...</div>}>
    <Child />


import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import React, { Suspense, lazy } from 'react';

const Home = lazy(() => import('./page/Home'));
const About = lazy(() => import('./page/About'));

const App = () => (
    <Suspense fallback={<div>Loading...</div>}>
        <Route exact path="/" component={Home}/>
        <Route path="/about" component={About}/>


Lighthouse Report