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
  • Project Management Suggestions
  • User Stories
  • Wireframes
  • Kanban Board
  • Setup
  • Deployment
  • Submission
  • General Tips
  • Mobile First
  • Polish
  1. 1: Frontend

1.P: Frontend App

Previous1.E.5: Guess The WordNext2: Full Stack

Last updated 1 year ago

Introduction

Build an Application that solves a problem you have using React, HTML and CSS. We will not be able to persist data in database until Module 2, but there are still many useful apps we can build. If you want to try to create an Application with a rudimentary database please look at HTML's where we can manage JSON within our React Application.

Requirements

App Stack

This project must be a Frontend React Application that utilises React, HTML and CSS.

User Interface

Functionality

Code Quality

Project Management

Ideas

The best ideas are ones that solve our own problems. Since we cannot persist data until Module 2, consider apps that do not require us to store data beyond the current session. For example: games, calculators, guitar tuners, colour matchers, visualisers. Games may be the most engaging to implement because they typically require more logic. Consult your section leader if you are struggling to decide on an idea.

Timeline

You will have roughly 4 course days to implement and complete this project. We will observe the following timeline to keep us on track.

Project Day
Checkpoint
Feedback

1

Ideation phase 1

Post project ideas in Slack for feedback

SL to review ideas and share feedback

2

Ideation phase 2 Create planning docs: user stories, wireframes, kanban board

SL to review planning docs and share feedback

3

Start implementation

-

4

-

-

5

MVP deadline Users can complete the primary user story

SL to review code in GitHub, share feedback

6

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

7

Project presentations

8

-

Project Management Suggestions

Rocket recommends the following project management strategies and tools for all projects.

User Stories

Example user stories for Project 1:

  • An interior designer wants to determine whether 2 or more colours match and what an optimal colour palette might be for given a base colour

  • A daily commuter wishes to play Flappy Bird during his 30-minute commute

  • A couple wishes to play a game of checkers against each other on their shared computer

Above user stories may not require persisting user data beyond the current session. From Project 2 onward we will learn how to persist user data for multiple users accessing our apps at multiple times on different devices.

Wireframes

Kanban Board

Each task on your board should take no more than 1 day to complete. If you think it will take longer than 1 day, break it down into smaller tasks. This will help you stay motivated and track progress more accurately. Move in-progress tasks to the Doing lists and completed tasks to Done.

Setup

Deployment

Submission

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

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

General Tips

Mobile First

Polish

Leave sufficient time to polish your app to be presentable. Fewer, more-polished features are generally better than more, less-polished features. Below is a sample checklist to run through.

  1. Are there obvious bugs?

  2. Are variable names concise and precise?

  3. Is each function sufficiently small and modular to be easily readable?

  4. Is the visual design clean?

  5. Is the app layout responsive?

  6. Did we update the app favicon and page title?

  7. Did we populate the README?

The Application follows the correct naming, casing and commenting

Application has been deployed with

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 with user stories. Who is our user and what is their ? Be as specific as possible. After we articulate user stories we can proceed to design our app.

After user stories, create simple wireframes to visually describe how users accomplish user stories with our app. Connect wireframes to form for each user story. Only include what is needed to accomplish user stories, no more and no less. Rocket recommends , a relatively simple and popular design tool.

is an introduction to wireframing with Figma. Rocket recommends only low-fidelity wireframes for our projects due to limited time. Below are example wireframes by Figma; we can create user flows by navigating to the Prototype tab in the right sidebar and adding connections between wireframes.

After user stories and wireframes, Rocket recommends using a to track implementation progress. A kanban board is a progress-tracking board that contains broadly 3 lists of tasks: To Do, Doing and Done. Rocket recommends for its simplicity, and the for its relevance to SWE.

Start by forking that contains an empty Vitejs app. This will make it easier for SLs to review your code by allowing us to submit projects via pull requests.

If you would like to deploy your app to the internet, follow Vitejs GitHub Pages this should be familiar as we are already using GitHub for code hosting.

Rocket recommends designing and building the mobile version of your project before the desktop version. It will be easier to add features to a UI for the desktop version than to remove features from a UI for the mobile version. Use Chrome DevTools to .

Do we have above major functions and inline comments above code that could be confusing to others?

🖼️
localStorage
React Bootstrap
MUI
best practices
GitHub Pages
job to be done
user flows
Figma
Here
kanban board
Trello
Trello Engineering Kanban Template
Rocket's Bootcamp Project 1 repo
deployment instructions here
simulate smaller devices in Chrome
JSDoc comments
explaining your work
post-mortem meeting
demo video
Example wireframes by Figma