Rocket Academy Bootcamp
  • 🚀Welcome to Bootcamp!
  • 🛠️Logistics
    • Course Schedules
    • Course Methodology
    • Required Software
    • LinkedIn Education Badge
  • 📚General Reference
    • Naming, Casing, and Commenting Conventions
    • VS Code Tips
    • Recommended Resources
  • 🪨0: Foundations
    • 0.1: Command Line
    • 0.2: Git
      • 0.2.1: Branches
    • 0.3: GitHub
      • 0.3.1: Pull Requests
    • 0.4: JavaScript
      • 0.4.1: ES6
      • 0.4.2: Common Syntax
      • 0.4.3: Reference vs Value
      • 0.4.4: Classes
      • 0.4.5: Destructuring and Spread Operator
      • 0.4.6: Promises
        • 0.4.6.1: Async Await
    • 0.5: Node.js
      • 0.5.1: Node Modules
      • 0.5.2: NPM
      • 0.5.3: Nodemon
  • 🖼️1: Frontend
    • 1.1: HTML
    • 1.2: CSS
      • 1.2.1: Layout
    • 1.3: React
      • Styling in ReactJs
      • Using Styling Libraries with React
      • React Deployment
    • 1.E: Exercises
      • 1.E.1: Recipe Site
      • 1.E.2: Portfolio Page
      • 1.E.3: World Clock
      • 1.E.4: High Card
      • 1.E.5: Guess The Word
    • 1.P: Frontend App
  • 🏭2: Full Stack
    • 2.1: Internet 101
      • 2.1.1: Chrome DevTools Network Panel
      • 2.1.2: HTTP Requests and Responses
    • 2.2: Advanced React
      • 2.2.1: AJAX
      • 2.2.2: React Router
      • 2.2.3: useContext
      • 2.2.4: useReducer
      • 2.2.5: Environmental Variables
      • 2.2.6: React useMemo - useCallback
    • 2.3: Firebase
      • 2.3.1: Firebase Realtime Database
      • 2.3.2: Firebase Storage
      • 2.3.3: Firebase Authentication
      • 2.3.4: Firebase Hosting
      • 2.3.5: Firebase Techniques
    • 2.E: Exercises
      • 2.E.1: Weather App
      • 2.E.2: Instagram Chat
      • 2.E.3: Instagram Posts
      • 2.E.4: Instagram Auth
      • 2.E.5: Instagram Routes
    • 2.P: Full-Stack App (Firebase)
  • 🤖3: Backend
    • 3.1: Express.js
      • 3.1.1 : MVC
    • 3.2: SQL
      • 3.2.1: SQL 1-M Relationships
      • 3.2.2: SQL M-M Relationships
      • 3.2.3: SQL Schema Design
      • 3.2.4: Advanced SQL Concepts
      • 3.2.5: SQL - Express
      • 3.2.6: DBeaver
    • 3.3: Sequelize
      • 3.3.1: Sequelize One-To-Many (1-M) Relationships
      • 3.3.2: Sequelize Many-To-Many (M-M) Relationships
      • 3.3.3: Advanced Sequelize Concepts
      • 3.3.4 Database Design
    • 3.4: Authentication
      • 3.4.1: JWT App
    • 3.5: Application Deployment
    • 3.E: Exercises
      • 3.E.1: Bigfoot JSON
      • 3.E.2: Bigfoot SQL
      • 3.E.3: Bigfoot SQL 1-M
      • 3.E.4: Bigfoot SQL M-M
      • 3.E.5: Carousell Schema Design
      • 3.E.6: Carousell Auth
    • 3.P: Full-Stack App (Express)
  • 🏞️4: Capstone
    • 4.1: Testing
      • 4.1.1: Frontend React Testing
      • 4.1.2: Backend Expressjs Testing
    • 4.2: Continuous Integration
      • 4.2.1 Continuous Deployment (Fly.io)
      • 4.2.2: Circle Ci
    • 4.3: TypeScript
    • 4.4: Security
    • 4.5: ChatGPT for SWE
    • 4.6: Soft Skills for SWE
    • 4.P: Capstone
  • 🧮Algorithms
    • A.1: Data Structures
      • A.1.1: Arrays
        • A.1.1.1: Binary Search
        • A.1.1.2: Sliding Windows
      • A.1.2: Hash Tables
      • A.1.3: Stacks
      • A.1.4: Queues
      • A.1.5: Linked Lists
      • A.1.6: Trees
      • A.1.7: Graphs
      • A.1.8: Heaps
    • A.2: Complexity Analysis
    • A.3: Object-Oriented Programming
    • A.4: Recursion
    • A.5: Dynamic Programming
    • A.6: Bit Manipulation
    • A.7: Python
  • 💼Interview Prep
    • IP.1: Job Application Strategy
    • IP.2: Resume
    • IP.3: Portfolio
Powered by GitBook
On this page
  • Introduction
  • Requirements
  • App Stack
  • User Interface
  • Functionality
  • Code Quality
  • Project Management
  • Ideas
  • Timeline
  • Setup
  • Deployment
  • Submission
  1. 3: Backend

3.P: Full-Stack App (Express)

Previous3.E.6: Carousell AuthNext4: Capstone

Last updated 1 year ago

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

Functionality

Frontend

Backend

Code Quality

Project Management

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

10

Setup

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

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

Submission

  1. Submit a pull request to Rocket's Project 3 repo

  2. Add your Project 3 repo link to the Rocket Bootcamp Projects spreadsheet in your batch-specific sheet shared by your SL

The application follows the correct naming, casing and commenting

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

Backend Application deployed using

Practise 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

Demo video Record a for employers and the public, embed in README

Start by forking Rocket's Bootcamp Project 3 and 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.

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

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

🤖
React Bootstrap
MUI
best practices
Netlify
fly.io
frontend
backend
Netlify
Firebase Hosting
Fly.io
explaining your work
post-mortem meeting
demo video