# 2.P: Full-Stack App (Firebase) ## Introduction Build an Application 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. In this project we are utilising Firebase a rudimentary backend and as a database. ## Requirements ### App Stack This project must be a Frontend React Application that utilises React as well as Firebase products, including Realtime Database, Storage, and Authentication. ### User Interface * [ ] The user interface of the Application is consistently styled across all components and screens * [ ] The Application is accessible on various devices and screen sizes * [ ] The Application is intuitive, usable and easy to navigate * [ ] Application has been styled with superb custom CSS, [React Bootstrap](https://react-bootstrap.github.io/components/alerts), [MUI](https://mui.com/core/) or another component UI or CSS framework ### Functionality * [ ] The core functionalities of the application work as intended and expected * [ ] The Application handles props effectively across components * [ ] The Application manages and updates state effectively * [ ] Interactivity: * [ ] The Application contains at least 1 input that captures user input to alter Application state * [ ] The Application contains at least 1 call to action that alters Applications state * [ ] The Application can reflected updated state in the UI * [ ] Complexity: * [ ] Application has at least 2 levels of components eg: \ App component and 1 or more child components * [ ] Application demonstrates the capability to lift up state * [ ] Application is required to persist data utilising Firebase Realtime Database (or an alternative like Firebase Firestore) * [ ] Application must able to store files utilising Firebase Storage * [ ] Application must contain an authentication system that leverages Firebase Authentication * [ ] Application must contain multiple pages this can be implemented with React Router * [ ] Application must contain at least 1 request to an external API using Axios or Fetch ### 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](https://bc.rocketacademy.co/general-reference/naming-casing-and-commenting-conventions) ### Project Management * [ ] Application has been deployed with [Firebase Hosting](https://firebase.google.com/docs/hosting) * [ ] Git repository contains commits for each feature with descriptive commit messages * [ ] Application contains a README with the applications description, user stories and low-fidelity wireframes * [ ] The README contains instructions on how to run the application * [ ] The group worked as a cohesive team to compelte the project * [ ] Every group member must contribute at least 1 feature into the Application ## Ideas 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: 1. [Data.gov.sg real-time APIs](https://data.gov.sg/developer) 2. [Google Vision API](https://cloud.google.com/vision) 3. [Google Maps API](https://www.npmjs.com/package/google-map-react) ## Timeline 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.

| SL to review code in GitHub, share feedback in 30-minute [post-mortem meeting](https://bc.rocketacademy.co/logistics/course-methodology#post-mortem) | | 10 |

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

| | ## Project Management Suggestions In addition to user story, wireframe and kanban board, 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](https://firebase.google.com/docs/database/web/structure-data) before starting, and reviewing the [Firebase Firestore guide on structuring data](https://firebase.google.com/docs/firestore/manage-data/structure-data) if we plan to use Firestore. ## How to code in a group ### General strategy 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 into `main` from the PR in GitHub. ### How to pull and merge latest changes in `main` to feature branch 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 to `main` with `git pull origin main`. 2. Merge `main` to feature branch with `git merge main` while on feature branch 3. Resolve any conflicts on feature branch. Follow instructions in console, using `git status` to see what steps are needed. ### How to merge latest changes from feature branch to `main` 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 with `main` on GitHub. 2. After merging PR in GitHub, run `git pull origin main` to get latest `main` branch changes from GitHub. 3. Delete feature branch locally with `git branch -d ` 4. Delete feature branch on GitHub with `git push origin --delete ` ### How to avoid merge conflicts 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. ## Setup Start by forking [Rocket's Bootcamp Project 2 repo](https://github.com/rocketacademy/project2-3.2) that contains an empty CRA app. This will make it easier for SLs to review your code via pull requests. ## Deployment Rocket recommends deploying to [Firebase Hosting](https://vitejs.dev/guide/static-deploy.html#google-firebase) as per ViteJs official docs because Firebase Hosting allows for client-side routing. ## Submission 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 shared by your SL. ## General Tips 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. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://bc.rocketacademy.co/2-full-stack/2.p-full-stack-app-firebase.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.