3.P: Full-Stack App (Express)

Introduction

Build an Full-Stack Application in a group of 2 or 3 that solves a problem you have using React and Express. Feel free to also use any 3rd-party libraries, Firebase features, or other technologies. In this project we expect that you are developing a React Frontend Application that interacts with an Express Backend Server connected to a Sequelize Database.

Requirements

App Stack

This project must be a Frontend React Application that communicates with an Express Backend Server that is able to interface with a Sequelize Database to persist information. Both the Frontend and Backend should be protected from malicious behaviour by leveraging Auth0 or JWT.

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

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 Auth0 or JWT

Backend

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

• Backend Application is required to persist data in PostgreSQL

• Backend Application must use Sequelize ORM to facilitate interface between Express API Server and PostgreSQL

• The Database must contain at least 1 One-Many relationship

• The Database must contain at least 1 Many-Many relationship

• The Database must utilise Sequelize Migrations to generate tables

• The Database must leverage Sequelize Seeder files populate data

• The Backend Application should protect any sensitive routes leveraging Auth0 or JWT

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

• The group worked as a cohesive team to complete the project

• Participants of the project should have updated collaboration documents and trackers

Ideas

As always, try to solve a problem you have. Now that we know SQL, what ideas require stricter data integrity that SQL would be helpful for? Our ideas need not be novel; they primarily need to demonstrate our ability to code well.

Ideas from past Rocket exercises: Meal tracker, workout tracker, reservation tracker, travel planner, art catalogue, bug reporting dashboard, reading list, car rental platform.

Timeline

Project Day	Checkpoint	Feedback
0	Ideation phase 1 Post project ideas in Slack for feedback	SL to review ideas and share feedback
1	Ideation phase 2 Create planning docs: user stories, wireframes, kanban board	SL to review planning docs and share feedback
2	Start implementation	-
3	-	-
4	-	-
5	MVP deadline Users can complete the primary user story	SL to review code in GitHub, share feedback
6	-	-
7	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
8	-	-
9	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
10	Demo video Record a demo video for employers and the public, embed in README

Setup

Start by forking Rocket's Bootcamp Project 3 frontend and backend repos that contain an empty CRA app and an empty Express app respectively. This will make it easier for SLs to review your code via pull requests.

To set up Sequelize in your backend repo, you may find Rocket's Sequelize Setup instructions helpful from Module 3's Bigfoot SQL exercise.

To enable frontend and backend servers to communicate with each other, you may wish to set up CORS middleware in our Express app as described in the Express.js submodule.

Deployment

Rocket recommends deploying our frontend to either Netlify or Firebase Hosting because they allow for client-side routing by React Router, unlike GitHub Pages.

Rocket recommends deploying our backend to Fly.io because Fly provides an easy way to deploy servers to the cloud and connect with a managed PostgreSQL instance.

See Bigfoot SQL M-M exercise for detailed deployment instructions for Netlify and Fly.io.

Submission

1. Submit pull requests to Rocket's Project 3 frontend and backend repos

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