Full Stack CAPSTONE PROJECT Frontend

Note: The following setup is for local use, otherwise the frontend is hosted at: https://casting-cap.herokuapp.com

Getting Setup

tip: this frontend is designed to work with Flask-based Backend. It is recommended you stand up the backend first.

Installing Dependencies

Installing Node and NPM

This project depends on Nodejs and Node Package Manager (NPM). Before continuing, you must download and install Node (the download includes NPM) from https://nodejs.com/en/download.

Installing project dependencies

This project uses NPM to manage software dependencies. NPM Relies on the package.json file located in the root directory of this repository. After cloning, open your terminal and run:

npm install

Running the project

npm start

Frameworks and tools

The frontend was built using React and Redux.

RBAC on the frontend

RBAC is ensured and forced on the frontend using the following components:

Can

  <Can
    user={user}
    perform="get:actors, get:movies"
    yes={() => (
        <Fragment>
            <img src={user.picture} alt="Profile" />
            <h2>{user.name}</h2>
            <p>{user.email}</p>
            <code>{JSON.stringify(user, null, 2)}</code>
        </Fragment>
    )}
    no={() => <Redirect to="/" />}
    />

Can enables rbac on the frontend, with perfom the required permissions and user the user perfoming the action.

PrivateRoute

<PrivateRoute path="/profile" component={Profile} />

This component forces the user to be authenticated to access the specified component.

hamzaalalach/react_capstone