Category: Projects

Welcome to the final project of the course. Here you will demonstrate your skills as a full stack developer by creating a complete web application including a frontend and backend hosted on a cloud provider. Unlike our previous projects, the topic here is completely up to you and you will work in a group of 2-4 students. Be creative and keep in mind you only have a few weeks to finish.

The requirements of your application are:

1. A responsive web application, I suggest that you use React but this is not required. You could use plain HTML/CSS/JS or even AngularJS if you really want to. You cannot use a server-side framework to dynamically generate HTML pages (Django, Ruby on Rails, PHP, etc).
2. A backend server that connects to a MongoDB or SQL database and communicates with JSON messages. I suggest that you create a RESTful web service using MongoDB/Mongoose with Node.js/Express but you could use Python-Flask/SQL or any other combination of server frameworks and databases. If you really want, you could use a server-side framework like Django or Ruby on Rails as your backend server as long as it never returns HTML (only JSON!).
   1. Alternatively, you can use a messaging framework and/or WebSockets to communicate with your server and other clients (this is the best approach to implement a multiplayer online game like slither.io). However, you still need a server/database in your project. You could use it to track high scores, players, etc.
   2. You cannot use a backend as a service (BaaS) solution (Firebase, Azure, etc). You must create your own backend!
3. The web application must make AJAX (or WebSocket) requests (eg fetch) to your backend server based on user input (ie your application must be interactive).
4. Your application must cause changes to data in your backend server. Your application cannot simply “view” static data from the server. A user’s actions must cause insert and/or update operations on the database.
5. Your complete application (frontend/backend) must be hosted by a cloud provider, such as Amazon Web Services or Google Cloud Platform.
6. You can use other open-source components to build your application, but your final application must be a new and distinct contribution (not simply a trivial combination of other people’s work).
7. If you want to extend another course’s project, senior design, a project you have previously worked on, see me for permission first.

Proposal

Due Monday, 4/9/2019, 11 AM. 10 points.

Submit a short proposal (on google classroom). The proposal should clearly contain the following information:

1. List the group members names (all students should submit the same proposal).
2. What is your idea? Is there a problem your application is trying to solve or is it just for fun?
3. Are there already similar applications? What benefits will your application have the don’t already exist?
4. The main user stories that drive your application’s features.
5. Annotated storyboard that shows the flow of your application using sketches demonstrating your main user stories. Sketches can be drawn by hand or electronically. This should be the bulk of your proposal.
6. What data is stored on the server? What is your database schema?
7. What technology stack will you use? E.g.: React, node/js, express, mongoose, mongodb.
8. How will you host your final solution? AWS? Separate backend/frontend server?

Live Demo

In-class on 4/30/2018, 11 AM. 10 points.

Similar to Project 2, you will have 3 minutes in class to demonstrate your project with 1 minute for questions.

	Start	Stop	Project Name	Names
1	11:00 AM	11:03 AM	Textbook Anarchy	Jason Corriveau Eric Marshall Jordan Voves Cole Whitley
2	11:04 AM	11:07 AM	Battery Diagnostics	Ryan Pencak
3	11:08 AM	11:11 AM	Fridge Raider	Natalie Altman Danny Toback
4	11:12 AM	11:15 AM	Big Dog Bets	Stefano Cobelli Allan La Jack Napor
5	11:16 AM	11:19 AM	ABC	Jenna Slusar Parker Watson
6	11:20 AM	11:23 AM	MIPS Processor Validator	Dunni Adenuga Jacob Mendelowitz Sarah Xu
7	11:24 AM	11:27 AM	Meal Tracker	Dan Kershner John Venditti Dylan Zucker
8	11:28 AM	11:31 AM	TakeFive	Evan Harrington Uttam Kumaran
9	11:32 AM	11:35 AM	Bbay	Junjie Jiang Haipu Sun
10	11:36 AM	11:39 AM	Makerportal	Keller Chambers Morgan Muller Christian Ouellette
11	11:40 AM	11:43 AM	Crowdcode	Jack Hall-Tipping Jeff Lee
12	11:44 AM	11:47 AM	Xplor	Jingya Wu

 

Final submission

Before 4/30/2018, 11:59 PM. 80 points.

This is the final deadline for submissions. Submit a link to your git repo (make sure I have at least read access). You must include a README file describing your application’s architecture (frontend and backend), data model, and how to deploy your application on the cloud host of your choice.

Grading Rubric

40 points, base functionality required to pass. See the requirements section in the project writeup.

10 points, ease of use, intuitive design, clear purpose.
10 points, visually aesthetically pleasing design.
10 points, logically structured 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.
10 points, correct submission including a README that is complete enough to download/build/deploy the application.

Course API

Bucknell makes course schedule information publically available. We took this public data and put it into a MongoDB database. Then we created a RESTful API for you to access it from you React code (using fetch).

Course objects will be returned as JSON objects from the service with the following schema (Labs, Problems, and Recitations are courses attached to other courses. They are denormalized in the database so appear attached to another course and additionally on their own). The meanings of the fields match the Registrar’s course lookup page. Note, CrseDesc, CrseGuide, and TextBooks contains HTML. You can use this as-is or parse it in your application. Some links omit the hostname (CrseDesc and CrseGuide), the correct hostname is http://www.bannerssb.bucknell.edu/.

{
    CRN: Number,
    Course: String,
    Title: String,
    Year: Number,
    Semester: String,
    "Meeting Time": String,
    Room: String,
    Instructor: String,
    SeatsAvail: Number,
    WaitList: Number,
    ResSeats: Number,
    Prm: String,
    CCCReq: [String],
    CrseDesc: String,
    CrseGuide: String,
    TextBooks: String,
    Department: String,
    CrseNum: String,
    Section: String,
    Notes: [String],
    Labs:[{
      CRN: Number,
      Course: String,
      Title: String,
      Year: Number,
      Semester: String,
      "Meeting Time": String,
      Room: String,
      Instructor: String,
      SeatsAvail: Number,
      WaitList: Number,
      ResSeats: Number,
      Prm: String,
      CCCReq: [String],
      CrseDesc: String,
      CrseGuide: String,
      TextBooks: String,
      Department: String,
      CrseNum: String,
      Section: String,
    }],
    Problems:[{
      CRN: Number,
      Course: String,
      Title: String,
      Year: Number,
      Semester: String,
      "Meeting Time": String,
      Room: String,
      Instructor: String,
      SeatsAvail: Number,
      WaitList: Number,
      ResSeats: Number,
      Prm: String,
      CCCReq: [String],
      CrseDesc: String,
      CrseGuide: String,
      TextBooks: String,
      Department: String,
      CrseNum: String,
      Section: String,
    }],
    Recitations:[{
      CRN: Number,
      Course: String,
      Title: String,
      Year: Number,
      Semester: String,
      "Meeting Time": String,
      Room: String,
      Instructor: String,
      SeatsAvail: Number,
      WaitList: Number,
      ResSeats: Number,
      Prm: String,
      CCCReq: [String],
      CrseDesc: String,
      CrseGuide: String,
      TextBooks: String,
      Department: String,
      CrseNum: String,
      Section: String,
    }]
  }

The server hostname is at http://eg.bucknell.edu:48484/. It only works from on-campus (or the VPN).

An HTTPS version of the server is at https://www.eg.bucknell.edu/~amm042/service/. This link is available both on and off campus!

The server supports one endpoint for queries.

http://eg.bucknell.edu:48484/q?<query>

This is the general query endpoint. You can specify any exact searches on the course schema using the query string. Strings and numbers return exact matches (only!). The CCCReq is an array so, if you specify a CCCReq you can only specify ONE requirement and results that have that requirement will be returned. It will match courses that have other CCCReq’s as well.

For example, all of the CSCI courses in Fall 2018:

• http://eg.bucknell.edu:48484/q?Semester=Fall&Year=2018&Department=CSCI

You can get creative with this and do things like finding all of the classes in BRKI 165 next fall (note this is URI encoded to handle the space):

• http://eg.bucknell.edu:48484/q?Semester=Fall&Year=2018&Room=BRKI%20165

All of the W2 courses in Fall 2018:

• http://eg.bucknell.edu:48484/q?Semester=Fall&Year=2018&CCCReq=W2

All queries by default return only the first 10 matches sorted by CRN number. You can override this by specifying your own limit on the query string. For example,

• http://eg:48484/q?Semester=Fall&Year=2018&CCCReq=W2&limit=2

will return no more than 2 results), you can set the limit a large number like 99999 if you want everything. You can also skip pages of results by specifying a skip value (the default skip is 0). For example,

• http://eg:48484/q?Semester=Fall&Year=2018&CCCReq=W2&limit=2&skip=1

will return the 2nd and 3rd results from the query (skipping the first result).

Text Searching

The fields Instructor, Room, and Title support text searching. Just add the text=<search string> to your query as above. If you specify other parameters, they are searched first, then the text search is applied.

What does Felipe teaching in the spring?

• http://eg:48484/q?Semester=Spring&Year=2019&text=Felipe
• http://eg:48484/q?Semester=Spring&Year=2019&text=%22Luiz%20Felipe%20F.%22

Spaces can be quoted for literal search, else they are OR’ed. For example, the following queries give very different results (not quote characters and space are URL encoded):

• http://eg:48484/q?Semester=Spring&Year=2019&text=Sustainable%20Design&limit=100
• http://eg:48484/q?Semester=Spring&Year=2019&text=%22Sustainable%20Design%22&limit=100

Comment and rating system

User comments and reviews are important to some applications (think shopping on Amazon or look at TripAdvisor). These might be useful to collect about courses. Using this part of the API is totally optional, but it’s here if you want to try it out.

http://eg.bucknell.edu:48484/r/<id>

This is the base review endpoint. It accepts GET and POST messages. The <id> specified as part of the URL refers to the _id member of any course (returned by the query endpoint). For example, CSCI 203 01 has:

"_id": "5aa18acfcb51795075c6cadc"

So to get the comments for this course you could GET (using fetch) the URL:

• http://eg.bucknell.edu:48484/r/5aa18acfcb51795075c6cadc

Right now you’ll get a response with no reviews, but the review schema is:

  {
    Date: { type: Date, default: Date.now },
    Stars: {type: Number, min:0, max:5},
    Comment: {
      type: String,
      minlength: 10,
      maxlength: 2000
    }
  }

The Date field is automatically inserted on the creation of the comment with the current date/time. Stars are some rating between 0-5 (5 is best!).  Finally, there is a text comment that must be between 10 and 2000 characters.

To submit a comment, simply POST a message to the same URL, eg (http://eg.bucknell.edu:48484/r/5aa18acfcb51795075c6cadc) with a JSON object in the body. You must specify a Comment or the review will be rejected (Stars are not required).

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:

1. A React application
2. that uses fetch to dynamically load information from the Course API based on user input of some kind
3. 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

In project 1b you will implement the same exact site as in project 1a, but this time you must use Bootstrap for the page formatting and layout (you may choose v3 or v4 of Bootstrap). You can (and will have to) add extra styles to get the exact formatting specified in project 1a, but you must use rely on Bootstrap as much as possible!

The only new requirement in this project is to use at least one Bootstrap component on your portfolio homepage. This could be a navbar, carousel, jumbotron, card, etc something that extends the basic “project 1” functionality is the goal. You shouldn’t completely change the visual layout of the page, but you can add one or two extra elements.

Time to complete: 1-3 hours. If it’s taking you longer than this, see me for help!

Turn in

I will create an assignment in google classroom. Turn in the link to your github.io page before the due date (2/16/2018 @ 9AM).  Late assignments will be accepted with a half-letter grade per day penalty.

Extra Credit

If you have your project done and turned in by class time on 2/14/2018 and present your Bootstrap portfolio in class on that day you will receive an extra half-letter grade (you can’t get a score higher than 100%, however).

Rubric

100 points total.

10 points, site has the minimum required information (name, contact information, image, sample coursework, project 1, 2, 3).
15 points, lg/xl shows three columns, formatted as specified above using Bootstrap layout.
15 points, md shows two columns with correct formatting, formatted as specified above using Bootstrap layout.
15 points, xs, sm shows one column, formatted as specified above using Bootstrap layout.
15 points, added at least one appropriate Bootstrap components on your page (navbar, carousel, jumbotron, card, etc).
15 points, activity 11, two customized bootstrap examples linked to portfolio showing good Bootsrap practices.
10 points, all HTML and CSS follows generally good coding practices, is formatted nicely, uses semantic tags, uses appropriate Bootstrap components, and is easy to understand.
5 points, proper submission.

In project 1a you will apply CSS styling and positioning to make your portfolio website fully responsive as specified below.

Time to complete: 1-3 hours. If it’s taking you longer than this, see me for help!

Visual layout:

1. Your portfolio site is very simple. It consists of a page heading and several sections (see Activity 3/4). The top section has your image on the right and a block of text with your name and email address (at a minimum). Below that, on a row to itself, there should be a block for Sample Coursework with a link to fontfun (Activity 5) and any other links you want to add. Below this row are the sections for each project. Each section contains some text about the project and a label. You can use dummy text for projects 2-3. How the project sections are laid out on the screen is going to depend on the width of the browser window (i.e., responsive design).

2. Layout: In the desktop view (992px and above), each of the 3 project sections should take up an equal amount of space on the screen. The labels for Project 1,2, and 3 should be left justified, centered, and right justified respectively. As you make the browser window wider or narrower, each section should become wider or narrower. For a visual reference of this view, see the desktop mockup illustration below.

3. Layout: In the tablet view (between 768px and 991px, inclusively), the first 2 project sections should be in the first row and be of equal size. The label for Project 1 is left justified and the label for project 2 is right justified. The 3rd project should be on its own row and take up the entire row by itself with its label centered. For a visual reference of this view, see the tablet mockup illustration below.

4. Layout: In the mobile view (equal to or less than 767px), you guessed it, each section should take up the entire row with a left justified label. Your image should also shrink to ensure there is enough for your name and email address. For a visual reference of this view, see the mobile mockup illustration below.

5. Spacing: Pay attention to the spacing shown in the mockup illustrations. Note the spacing between sections should be consistent. Note that the horizontal spacing between the edges of the section and the edges of the browser window decreases as the screen width gets smaller. Also, note the spacing between the dummy text in each section and the edges of the section. Lastly, make sure the dummy text is “pushed down” enough so it doesn’t overlap the section title region.

6. Borders and Colors: Each section should have a background color set to some color (of your choosing). Set the background color of each section title region to some unique color (of your choosing). Make sure that the background color still allows the user to view the text in the section and section title regions. Depending on the color you choose, you may want to change the color of the text so it can be easy to read. Set a black border on both the section and section title region that is 1px thick.

Rules and constraints

1. Your page must include a single CSS file. No inline styles allowed. Your CSS file should be placed into a folder named css under your root folder for this class.

2. You are NOT allowed to use any existing CSS (or Javascript) framework for this assignment (for example, Twitter Bootstrap CSS Framework is not allowed!). No framework CSS files should even be referenced in your index.html, even if you are not using them. You are going to create your own framework from scratch.

3. You must implement the following breakpoints that will be considered desktop, tablet, and mobile. The browser should display a desktop version of the site when the width of the browser window is 992px and above. Tablet view should appear only if the width of the browser window is between 768px and 991px, inclusively. The mobile view should appear only if the width of the browser is equal to or less than 767px.

Turn in

I will create an assignment in google classroom. Submit just the link to your github.io page before the due date (2/7/2018 @ 9:00 AM).  Late assignments will be accepted with a half-letter grade per day penalty.

Extra Credit

If you have your project done and turned in by class time on 2/5/2018 and show me your portfolio site in class on that day you will receive an extra half-letter grade (you can’t get a score higher than an A=100%, however).

Rubric

100 points total.

10 points, site has the minimum required information (name, contact information, image, sample coursework, project 1, 2, 3).
25 points, layout >= 992px shows three columns, formatted as specified above.
25 points, layout between 768px and 991 px shows two columns with correct formatting, formatted as specified above.
25 points, layout <= 767px shows one column, formatted as specified above.
10 points, HTML and CSS follows generally good coding practices, is formatted nicely, uses semantic tags, and is easy to understand.
5 points, proper submission.

Acknowledgements

This assignment is roughly based on https://github.com/jhu-ep-coursera/fullstack-course4/tree/master/assignments/assignment2 by Mr. Yaakov Chaikin.