React EAS FrontEnd

Eduction Administration System Front End based on React Admin.

Table of Contents

• React EAS FrontEnd
  • 1. Design
    • 1.1 Style
    • 1.2 Structure
    • 1.3 Layout
  • 2. Techniques
  • 3. Installation
    • 3.1 Prerequisites
    • 3.2 Configuration
  • 4. Development
  • 5. Demo
  • 6. Team
• License
• Reference

1. Design

1.1 Style

This front end uses the material design style. The material design style is popular front end style developed by Google. Details can be referred in Material.io.

1.2 Structure

The file strcture mainly contains three parts:

• public
  • html
  • ico
  • manifest file
• src
  • CSS
  • JS
• Configuration

	.
├── README.md
├── package-lock.json
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
├── src
│   ├── App.js
│   ├── Dashboard.js
│   ├── authProvider.js
│   ├── courses
│   │   └── courses.js
│   ├── css
│   │   ├── App.css
│   │   └── index.css
│   ├── exams
│   │   └── exam.js
│   ├── index.js
│   ├── registerServiceWorker.js
│   ├── resources
│   │   └── resources.js
│   ├── roles
│   │   └── roles.js
│   ├── users
│   │   └── users.js
│   └── utils
│       └── customization.js
└── yarn.lock

10 directories, 23 files

1.3 Layout

The structure of the front end design contains three parts:

• Top bar
• Menu
• Pages

2. Techniques

• React
• React-Admin
• Axios
• HAL Rest

3. Installation

3.1 Prerequisites

• React admin
• Yarn
• Dependencies(See yarn.lock)

3.2 Configuration

Install Yarn if it does not exist in your computer.

For MacOS:

brew install yarn

For Ubuntu:

First configure the repository:

curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list

Simply update and install:

sudo apt-get update && sudo apt-get install yarn 

Test that Yarn is installed by running:

yarn --version

For details please see Installation of Yarn.

After that, run

yarn install

to install the dependencies.

Then run

yarn start

to start the program, and open broswer to see localhost:3000

or build by running

yarn build

4. Development

This front end is developed based on React Admin. We had tried using React without any framework to build the front end from scratch but it was costly and inefficient. There are some material design style web framework and we finally chose React Admin since it is compatible to our back end and keeps the material design style.

The front end has a login entry and shows a dashboard after logging in. The data displayed in the pages is provided by dataProvider which is an important component in React Admin. Our back end is using Rest and it can be easily modified and used in our chosen framework.

5. Demo

• Login:

  

• Dashboard:

  

• Users:

  

• Course:

  

• Exams:

  

6. Team

• @Peng-YM: Back end and Front End
• @Spacebody: Front end

License

GPL v3

Reference

• Material.io
• Material UI
• React
• Chinese Docs for React
• React Admin
• Axios
• HAL Rest