2.P: Full-Stack App (Firebase)
Build an app in a group of 2 or 3 that solves a problem you have using React and Firebase. Feel free to use any 3rd-party libraries and Firebase features beyond the ones we have learnt.
- 1.React app with Create React App
- 2.Data storage with Firebase Realtime Database or Firebase Firestore
- 3.File upload with Firebase Storage
- 4.Authentication with Firebase Authentication
- 5.App routing with React Router
- 6.1 or more requests to an external API using Axios or Fetch libraries
- 7.At least 2 levels of components, e.g.
Appcomponent and 1 or more child components at least 1 level below it - 8.
- 9.Responsive layout that is user-friendly on mobile and desktop views
- 1.2 or 3 group members each contributing at least 1 feature
- 2.Deployment with Firebase Hosting
- 3.
- 4.Git commits for each feature with descriptive commit messages
- 5.App description in README with user stories and low-fidelity wireframes
- 6.Instructions in README to run app
As before, try to find an idea that solves a problem you have. Now that we can persist data with Firebase and send HTTP requests to arbitrary APIs, there is virtually no limit to the type of app we can build. Be realistic about the scope of your project: 1 polished feature that solves a common or important problem is more valuable than many scrappy features of lower value.
While brainstorming ideas, visualise how you might present the project to a prospective employer. Is this project impressive because it solves an unaddressed problem? Because it is technically well-done? Because of the thoughtfulness of its UX?
Some APIs and libraries we can consider:
You will have roughly 8 course days to complete this project. We will observe the following timeline to keep us on track.
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. | |
10 | |
In addition to user story, wireframe and kanban board suggestions shared during Project 1, now that we have a database (DB), Rocket recommends we plan the DB schema before starting. Our DB schema will change during app development, but planning ahead can reduce the number of changes. Rocket recommends we revise the Firebase Realtime Database guide on structuring data before starting, and reviewing the Firebase Firestore guide on structuring data if we plan to use Firestore.
- 1.Have 1 person create a GitHub repo and invite other team members as collaborators
- 2.For each task in the kanban board, create a new feature branch from
main. Name the branch after the task. When the task is done, push the feature branch to GitHub, create a pull request (PR) and merge the code intomainfrom the PR in GitHub.
Team members will merge code to
main regularly and we will want to incorporate those changes in our feature branch to ensure compatibility with main. Rocket recommends this operation before merging to main to test merge results on feature branch instead of main.- 1.Save & commit all changes on the current (non-
main) feature branch. Pull latest changes tomainwithgit pull origin main. - 2.Merge
mainto feature branch withgit merge mainwhile on feature branch - 3.Resolve any conflicts on feature branch. Follow instructions in console, using
git statusto see what steps are needed.
After committing changes and verifying our feature branch is compatible with
main, we will merge our changes to main for our teammates to use.- 1.Push feature branch to GitHub with
git push, then create a PR to merge feature branch withmainon GitHub. - 2.After merging PR in GitHub, run
git pull origin mainto get latestmainbranch changes from GitHub. - 3.Delete feature branch locally with
git branch -d <FEATURE-BRANCH-NAME> - 4.Delete feature branch on GitHub with
git push origin --delete <FEATURE-BRANCH-NAME>
Merge conflicts happen when Git is unsure how to merge 2 versions of a file. To resolve a merge conflict, use
git status to find which files have conflicts, resolve the conflicts in each file by editing it to be what it should be, and run git commit to complete the merge. We can reduce the chance of merge conflicts by communicating often with our team and merging latest changes from main to our feature branch regularly.Start by forking Rocket's Bootcamp Project 2 repo that contains an empty CRA app. This will make it easier for SLs to review your code via pull requests.
Rocket recommends deploying to Firebase Hosting as per Create React App official docs because Firebase Hosting allows for client-side routing by React Router, unlike GitHub Pages.
- 1.Submit a pull request to Rocket's Project 2 repo
- 2.Add your Project 2 repo link to the Rocket Bootcamp Projects spreadsheet in your batch-specific sheet. Feel free to review past student projects in previous batches' sheets.
- 1.Code the foundation of the app together before splitting up to code individual features. This will reduce merge conflicts and help everyone gain a common understanding of how the app should work.
- 2.Implement the primary user story first. What are users coming to your app to do? Ensure they are able to accomplish that before adding authentication and nice-to-have features.
Last modified 15d ago