Project 3

Project #3: Full-stack SPA JavaScript Application

Overview

For this third project, you'll be working in teams of 3 to build an app using full-stack JavaScript. This means using JavaScript on both the server (backend) and client (frontend).

Your backend should be a NodeJS server which provides a JSON REST API for accessing and manipulating data in a database.

Your frontend should be primarily a single-page-app, where the user interface is controlled by JavaScript (not server-generated HTML like Project 2).

This project will be your first time working as part of a software development team. Your goal should be to develop teamwork, and skills using git branches and GitHub Pull Requests to collaborate effectively on shared code.

Do not attempt to build your app as separate pieces that you try to fit together at the end (they won't fit together, trust me). All code that you write should additions to the whole app, not separate pieces.

Everyone should work on both the server and client code. If you need to break up tasks within your team, break up tasks by app features, not by whether it's part of the server or client.


Technical Requirements

Your app must:

  • Use a NodeJS server that provides a JSON REST API

  • Have at least 3 tables in a Postgres database (more if they make sense for the app)

  • Allow users to add, modify or organise some kind of data for some useful purpose

  • Be primarily a single-page-app (multiple HTML pages are fine, but the core of your app should be 1 HTML page)

  • Have the browser (client) code interact with the server primarily through a JSON REST API


Necessary Deliverables

  • A git repository hosted on GitHub, with frequent commits dating back to the very beginning of the project from everyone in your team

  • A README.md file with explanations of the technologies used, the approach taken, installation instructions, unsolved problems, etc.

  • A short (10-15min) presentation and demo and Q&A involving all team members


Group coding contributions

Contributions from each group member don't need to be exactly equal, but each group member must contribute signficant coding work to their project and have a good understanding of how the whole app works - both client and server.

We will be watching who authored the git commits for each project and how teams work together and collaborate during the project class time. Any group member who does not have a significant enough coding contribution to their group, unfortunately will not pass the project.

If you are a more confident coder, please be especially mindful of your teammates contributions and learning opportunities. Allow plenty of time and space for less confident or experienced coders to contribute to core parts of the app and don't just build everything yourself. Use the opportunity to develop you mentoring skills.


Extensions/options

One of the big advantages of SPAs is that they can update and change even when the user hasn't clicked something.

  • Give instant feedback to users while they are interacting with the site

  • Have the page update automatically when another user who is using the app from a different browser window makes a change. (e.g. check for changes every 10 seconds).

  • Learn about websockets for instant updates, e.g. chat messages between users

Last updated