In project 2 you will gain experience with React by developing a single-page interactive course catalog application. The problem you’re trying to solve is that when it’s time to schedule classes, it’s too hard to find information about courses. The current Banner Web application is pretty limited and requires a lot of time to find CRN numbers for your required courses and doesn’t highlight interesting courses.
Note: I don’t want you to write a clone of no8.am! no8.am is purely focused on course scheduling. You may optionally include a scheduler in your app, but the main focus should be on easily finding interesting courses.
If you haven’t used React before and/or have little web development experience keep it simple. It doesn’t have to have a lot of features, pick one feature and make that one feature work well. For example, you could have the user select their major and year and the application would show their required courses. Or you could show all courses that occur at a specific time (like Monday 8AM). Of course, your app should visually look good.
If you have experience with React, implement your own creative solution!
As usual, if you get stuck, ask for help!
Data for this project is provided by our own Course API. You MUST use this API in your project (see the rubric).
You may use other publicly available react components. However, they must be installed via npm and exist in your package.json file.
Due Date
Friday 3/30/2018, 11 AM. On this day in class, each student will have 1-minute to present their application.
Grading Rubric
100 points total.
50 points, base functionality required to pass:
- A React application
- that uses fetch to dynamically load information from the Course API based on user input of some kind
- and displays at least one course in some way to the user.
The base functionality is much like the Dog API activity, but now for Course API using React.
10 points, ease of use, intuitive design, clear purpose.
10 points, visually aesthetically pleasing design.
10 points, functionality works correctly and in some way exceeds that of the Bucknell Course Information page. It doesn’t have to do everything this page does, just pick one thing and do it better or create a whole new way to find courses. Be creative!
10 points, 1-minute (60-second) in-class demo of application on 3/30/2018. Your app must be hosted and run from the web (github.io or Heroku are easy solutions shown below). Ask me for help if you can’t get your app to run using either option.
Option 1 – github.io: Here we build a release version of your project and push it to your regular github repo. However, this won’t work if you use routing. See the next option if you use routing.
- edit package.json, add a homepage key, value pair that points to the root url of the release version, for example for the weather app I would use:
- “homepage”: “https://amm042.github.io/fullstack-examples/22-react-npm/weather-complete/release/v1.0”,
- npm run build
- mkdir -p release/v1.0
- cp -r build/* release/v1.0
- git add –all release/v1.0/
- git commit -a -m ‘release’
- git push
Option 2 – Heroku: You will need a free account. Once you sign up, deployment is fully automated and supports routing but the react app must be located at the root of your git repo for this to work. If you have your project in a folder under your course repo, you’ll have to create a separate git repo just for this project. Follow the quickstart here. You should be able to create the project as a submodule under your course repo, but I have not testing this solution.
10 points, logically structured react project, HTML/CSS/JS/JSX follows generally good coding practices, is formatted nicely, and is easy to understand. Functionality is logically broken down into many small components. If using external components, they must be in your package.json file and “npm start” correctly runs the development server. Make sure node_modules and build directories are not in your git repo! If you used create-react-app, it creates a .gitignore file to this effect.
Presentation Schedule
| Name |
Start Time
|
| Morgan Muller | 11:00 AM |
| Christian Ouellette | 11:01 AM |
| Danny Toback | 11:03 AM |
| Uttam Kumaran | 11:04 AM |
| Cole Whitley | 11:06 AM |
| Sarah Xu | 11:07 AM |
| Ryan Pencak | 11:09 AM |
| Dylan Zucker | 11:10 AM |
| Jenna Slusar | 11:12 AM |
| Jacob Mendelowitz | 11:13 AM |
| Parker Watson | 11:15 AM |
| Jason Corriveau | 11:16 AM |
| Jingya Wu | 11:18 AM |
| Junjie Jiang | 11:19 AM |
| Stefano Cobelli | 11:21 AM |
| Aleksandar Antonov | 11:22 AM |
| Eric Marshall | 11:24 AM |
| Jeff Lee | 11:25 AM |
| John Venditti | 11:27 AM |
| Evan Harrington | 11:28 AM |
| Jordan Voves | 11:30 AM |
| Natalie Altman | 11:31 AM |
| Keller Chambers | 11:33 AM |
| Jack Hall-Tipping | 11:34 AM |
| Allan La | 11:36 AM |
| Dan Kershner | 11:37 AM |
| Jack Napor | 11:39 AM |
| Dunni Adenuga | 11:40 AM |
| Haipu Sun | 11:42 AM |
