Project 3: Full-stack SPA JavaScript Application
Overview
For this third project, you'll be working in teams of 3 to build a 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 is 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, hosted on the internet, 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 working app, hosted somewhere on the internet
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.mdfile with explanations of the technologies used, the approach taken, installation instructions, unsolved problems, etc.A link to your hosted working app in the README and URL section of your GitHub repo
A short (10-15min) presentation and demo and Q&A, involving all team members
Group coding contributions
Contributions from each group member don not 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 are 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.
Project planning
Project planning is much more important now you're working in groups.
Common traps that you will absolutely fall into:
Don't assume that you all have the same idea/vision of what you're building - even if you talked about it already.
Don't work on separate bits and then try to put it together at the end. Putting it together will be a lot harder than you think.
Don't split "frontend" and "backend" work between people. Focus on whole user-visible changes across both UI and server side.
Don't leave all the CSS/Design work to one person, each part of the app will need design.
Make sure everyone understands how the whole system works, even if it feels like you're going slower at first, but really it makes the team much more productive.
Some of you tend to make your code much more complicated than it needs to be, don't do that, your teammates will not be impressed.
Most important advice: commit early, commit often. Your should all be working on the same version of your code.
Extensions/options
One of the big advantages of SPA's 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