misselliev

import React from 'react';
import './App.css';
import { BrowserRouter as Router } from 'react-router-dom';
import Menubar from './components/Menubar';
import Banner from './components/Banner';
import Footer from './components/Footer';
import Routes from './Routes';

const App: React.FC = () => {
    return (

misselliev

import React from 'react';

const TourDates: React.FC = () => {
    return (
        <div className="container mx-auto">
            <div className="text-white">Tour Dates go here</div>
        </div>
    );
};

misselliev

import React from 'react';

const Home: React.FC = () => {
    return (
        <div className="container mx-auto">
            <div className="font-bold text-white">You are home</div>
        </div>
    );
};

misselliev

import React from 'react';
import { Switch, Route } from 'react-router-dom';
import TourDates from './pages/TourDates';
import Home from './pages/Home';

const Routes: React.FC = () => (
    <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/dates" component={TourDates} />
    </Switch>

misselliev

import React from 'react';
import './App.css';
import Menubar from './components/Menubar';
import Banner from './components/Banner';

const App: React.FC = () => {
    return (
        <div className="App">
            <Menubar />
            <Banner BannerImg="https://i.imgur.com/dMVpKDa.jpg" AltImg="The 1975 iliwys banner" />

misselliev

import React from 'react';

const Menubar: React.FC = () => {
    return (
        <div className="container mx-auto">
            <nav className="flex justify-between p-8 items-center mb-16">
                <a href="#" className="font-sans text-black md:text-white text-sm md:text-4xl font-thin">
                    The 1975 - NOACF
                </a>
                <ul className="list-reset flex">

misselliev

import React from 'react';
import PropTypes from 'prop-types';

interface BannerProps {
    BannerImg: string;
    AltImg: string;
}
const Banner: React.FC<BannerProps> = ({ BannerImg, AltImg }) => {
    return (
        <div>

misselliev

import React from 'react';
import { useDispatch, useSelector, shallowEqual } from 'react-redux';
import Book from '../components/Book';
import { removeBook } from '../actions';

const filtering = (books, filterRes) => (filterRes === 'All' ? books : books.filter(book => book.category === filterRes));

export default BookList = () => {
  const books = useSelector(state => state.books, shallowEqual) || [];
  const filter = useSelector(state => state.filter) || {};

misselliev

import React from 'react';
import { connect } from 'react-redux';
import Book from '../components/Book';
import { removeBook } from '../actions';

const filtering = (books, filterRes) => (filterRes === 'All' ? books : books.filter(book => book.category === filterRes));

const BookList = ({ books, filter }) => (
  <div>
    {filtering(books, filter).map(book => (

misselliev

Trying to deploy from a inner folder to gh-pages, you must have the transpiled assets in the desired directory.

If you want to deploy from the dist folder you should commit it to gh-pages branch.

• Run this git subtree push --prefix dist origin gh-pages
• In the GitHub project Settings, down to Github Pages, and in Source branch select: gh-pages.

That's it