4.P: Capstone

Introduction

Build an Application that solves a problem you have using any technologies. Rocket encourages you to use at least 1 technology you have not used before. Rocket expects you to justify your technology choices and articulate tradeoffs between available options. This project can be done individually or in a group. In this project we expect that you will develop an Frontend Application that interfaces with your own Backend Server that is connected to a Database. This Application must have at least the same level of complexity as your previous P2 and P3. If in doubt, ask your section leader.

Requirements

App Stack

This project must be a Frontend Application that communicates with an Backend Server that is able to interface with a Database to persist information. Both the Frontend and Backend should be protected from malicious behaviour by leveraging Auth0 or JWT. Additionally to this we expect that you implement a new technology.

User Interface

• The user interface of the Frontend Application is consistently styled across all components and screens

• The Frontend Application is accessible on various devices and screen sizes

• The Frontend Application is intuitive, usable and easy to navigate

• Frontend Application has been styled with superb custom CSS, React Bootstrap, MUI or another component UI or CSS framework

Functionality

• The core functionalities of the Application work as intended and expected

• The Application contains unit testing for non-crud functionalities

• Application has been setup with CI for unit tests or deployment

Frontend

• The Frontend Application handles props effectively across components

• The Frontend Application manages and updates state effectively

• Interactivity:

  • The Frontend Application contains at least 1 input that captures user input to alter application state

  • The Front Application contains at least 1 call to action that alters applications state

  • The Frontend Application can reflected updated state in the UI

• Complexity:

  • Frontend Application has at least 2 levels of components eg: App component and 1 or more child components

• Frontend Application must contain multiple pages this can be implemented with React Router

• The Frontend Application is required to protect components from users who are not authenticated using an authentication tool of your choice

Backend

• Backend Application must be able to process GET, POST, PUT and DELETE requests

• Backend Application is required to persist data in a database of your choice

• Backend Application must use an ORM to facilitate interface between Express API Server and the database of your choice

• The Database must contain at least 1 One-Many relationship (Only for SQL databases)

• The Database must contain at least 1 Many-Many relationship (Only for SQL databases)

• The Database must utilise Sequelize Migrations to generate tables (Only for SQL databases)

• The Database must leverage Sequelize Seeder files populate data (Only for SQL databases)

• The Backend Application should protect any sensitive routes leveraging an authenication tool of your choice

Code Quality

• Application is organised as well as structured, it follows practices of component separation and has a good folder structure

• The code is easy to comprehend and read

• The application contains meaningful variable and function names

• Application contains components that can be reused

• The application preforms well without unwarranted rendering

• The application's code follows consistent coding conventions, regarding indentations and formatting

• The application follows the correct naming, casing and commenting best practices

Project Management

• Frontend Application has been deployed using a provider of your choice (Github Pages, Firebase Hosting, Netlify)

• Backend Application deployed using fly.io

• Git repository contains commits for each feature with descriptive commit messages

• Application contains a README with the applications description, user stories, ERD (Entity Relationship Diagram) and wireframes

• The README contains instructions on how to run the application

• Every group member must contribute at least 1 feature into the application (Only if in a group)

• Participants of the project should have updated collaboration documents and trackers (Only if in a group)

Ideas

Solve a problem you have with 1 or more new technologies. Past students have built web apps, mobile apps, data visualisations, worked with blockchain, graphics, machine learning. Follow your interests, and consider how you might present this project to target employers for a job. If you are keen on working in a specific industry, consider building a project related to that industry.

If you wish to build an app that involves real-time location tracking in a virtual world, consider using Socket.IO over Firebase for lower latency. If you wish to build an app that involves live-streaming video or audio, consider using WebRTC, the technology used by Zoom, Google, and Facebook for their video-conferencing apps.

Timeline

You will have almost twice the amount of time for your capstone than other projects. Consider using the first days to experiment with new technologies before deciding on an idea and tech stack.

Project Day	Checkpoint	Feedback
1-3	Ideation phase 1 Post project ideas in Slack for feedback	SL to review ideas and share feedback
4	Ideation phase 2 Create planning docs: user stories, wireframes, kanban board	SL to review planning docs and share feedback
5-7	-	-
8	MVP deadline Users can complete the primary user story	SL to review code in GitHub, share feedback
9-13	-	-
14	Feature freeze No new features, focus on polishing existing features and code to be presentable	SL to review progress and share post-feature-freeze suggestions
15	-	-
16	Project presentations Practise explaining your work to others. Other batches will join and we will celebrate each others' hard work.	SL to review code in GitHub, share feedback in 30-minute post-mortem meeting
17	Demo video Record a demo video for employers and the public, embed in README

Setup

Feel free to use setups from past projects or a completely new setup depending on the technologies you are using.

Deployment

Please deploy using any deployment tool that makes most sense for your app. Feel free to try new tools that we have not used before in Bootcamp.

Submission

Add your Project 4 repo link to the Rocket Bootcamp Projects spreadsheet in your batch-specific sheet. Feel free to review past student projects in previous batches' sheets.