REACT Project - 2: Bootstrap and reactstrap

Setup

Create a new react app

In your group, create a new project named react-2-abc123 (abc123 is your student id) and clone to your local pc. Follow the instructions from the React setup page to create your react project. As a quick reminder, the basic commands are:
npx create-react-app react-2-abc123 --template cra-template-pwa
cd react-2-abc123
npm start
This will install and create the react skeleton and run the server. Remember to make the changes specified in the react setup instruction page.

Adding Bootstrap

Install reactstrap and Bootstrap from NPM. Reactstrap does not include Bootstrap CSS so this needs to be installed as well:
npm install --save bootstrap
npm install --save reactstrap react react-dom

Import Bootstrap CSS in the src/index.js file:

import 'bootstrap/dist/css/bootstrap.min.css';

• Import required reactstrap components within src/App.js file or your custom component files:
  e.g import { Button } from 'reactstrap';

You can use this code in your App.js or custom component file. Modify for your personal setup/ configuration

Add this component to your index.js page
At this point your page should look like this
Copy the .gitlab-ci.yml from the prior react project to the root directory (and .gitignore)
This would be a good point to push to gitlab. Check the deployment on the gitlab pages site as well.
On the navbar on your page, there is a link to the reactstrap website. Read the documentation on the components. Become familiar with the usage and behaviour. Once this is working, you are ready to continue forward to the main project.
Remember to delete any unnecessary code you used to test the reactstrap setup as you proceed forward to do the real work for React-2.

React-2 Specifics

Overview

You will create a web page for selecting courses for the next semester. As you select a course, it will show up in a summary list. As you change your selections, the changes will be reflected in the summary. You will use React and reactstrap to provide a dynamic and responsive behaviour.

Requirements

Components

• You will use reactstrap components to organize the display to match the sample page and video. You will require use of Card, Table and Modal components to display popup information. You may use additional components (Container, for example). Use of specialized HTML components for image display is also allowed. Follow the setup instructions above to install reactstrap in your project.

Requirements

• Each course displayed will have a course name and short course description
• Next to the course name, there will be small info icon. When that icon is clicked, a popup modal display will show, that will display the course name and some details about the course. When the modal display is closed (close button or ‘x’), the normal display will again be visible.
  • You may use this image for your icon
  • NOTE: image files need to placed in react’s public directory
• Each course will have a button to add or remove each course from the course selection list
  • The button will change from add -> remove and back when clicked
• When a course is added, the border will change color, and be thicker, to show it is now added
• When the course is removed, the border will revert to normal
• The course list will display (at the bottom) the list of the added courses (and the description).
  • This list will dynamically change as courses are added/ removed
• The page should adjust its display as you resize the browser (this is ‘responsive’ behaviour).

Design Requirements

• There will be a single Course component to render each Course. This will be a new React component that you need to code. Data must be passed to the Course component (from the parent to allow different information to display for each class that is shown for selection. Use React props to pass information to the Course component.
• React state, props, events and styles must be used throughout the implementation
  • Refer to lecture slides, the setup information and this tutorial to refresh yourself on React coding style.
  • Refer to reactstrap documentation for information on reactstrap components

Sample

Your page should look like and behave as shown in the images below and the video clip. This should serve as your visual design specification. Pay attention to the margins, alignment, styling and so on.

click to view video clip

Course Data

You should use this data for the courses. This data is what should be used to dynamically configure each Card component. (The data can be coded inline in your React app for now).

[ {name: 'swen-250', desc: 'personal software eng',
                    details: 'C and fun with vi and command line'},
                {name: 'swen-331', desc: 'secure software',
                    details: 'Fuzzer - you will love it, you will fear it!'},
                {name: 'swen-440', desc: 'system architecture',
                    details: 'Services?  What what's a service?  I need to do math for metrics?'},
                {name: 'swen-344', desc: 'web engineering',
                    details: 'You mean web pages, right?  Wait, there's more?'}
                ]

Grading

• Course Component: 5 points
• Course List Component: 5 points
• Dynamic behaviour for add/ remove, and course list: 10 points
• Add/ remove border style changes: 5 points
• Modal popup with details: 5 points
• Css style: 5 points
• State variables for dynamic updates: 5 points