CS 124-Lab 3

• use Firestore for permanent cloud storage.
• add priority levels to tasks.
• allow sorting of tasks by priority, by name, or by creation date.

Getting started

• document just the current state of the design
• document the changes to the design (so the design document will include your old design and then include changes that yield the current design)

  Your work should be done in a branch named lab3.

  $ cd ~/cs124/lab
  $ git checkout lab2 	
  $ git checkout -b lab3 	# creates a new branch named lab3 based on lab2 and checks it out
  $ git push -u origin lab3 # pushes the new branch to the origin
  

  Firestore

  For storing your data, you can either:
  • Create your own Firebase project and Firestore application. (See docs).
  • Use the instructions Firestore application. Config to use is:

    const firebaseConfig = {
      apiKey: "AIzaSyCd9qqxvMpEKpBzwfWcc2tlRFa6ICaLH_s",
      authDomain: "hmc-cs124-fa21-labs.firebaseapp.com",
      projectId: "hmc-cs124-fa21-labs",
      storageBucket: "hmc-cs124-fa21-labs.appspot.com",
      messagingSenderId: "949410042946",
      appId: "1:949410042946:web:0113b139a7e3cd1cc709db"
    };
    

    In order to avoid conflicting with other teams, any top-level collection(s) you create should begin with githubid-. For example, my github userid is nrhodes-hmc, so I could create a collection name nrhodes-hmc-tasks.
  Verify that your application works simultaneously if you open it on your machine and your partner opens it on her machine. (That is, you can edit on one machine and it updates on the other).

  Hint:

  docRef.set({
    ...
    created: firebase.database.ServerValue.TIMESTAMP 
  })
  

  will create a document with a created field set to the time the document was created on the server.

  Task Priority

  Each task should have a priority level (at least 3 levels). Users should be able to distinguish higher-priority tasks from lower-priority tasks and should be able to change a task's priority.

  Hand-In Procedure

  You will turn in your labs using git and GitHub.

  $ git commit -am "my last commit"
  [lab1 c2e3c8b] my last commit
   2 files changed, 18 insertions(+), 2 deletions(-)
  
  $ git push
  

  Deploy your app to GitHub Pages so that https://{GITHUBUSERNAME}.github.io/cs124/ shows your running application.

  You will then need to go to GitHub.com and create a pull request whose base is lab2 and whose compare is lab3. That is, you'll be submitting the changes between lab2 and lab3. This pull request should show, for example, changes between the lab2 and lab3 design.md rather than showing the entirety of the design.md as new.

  Detailed instructions on creating a pull request on GitHub

  1. Go to Pull Request tab on GitHub
  2. Click on "New pull request".
  3. Select 'lab2' as the base branch and 'lab3' as the compare branch .
  4. Verify that the commits that are chosen are correct, and that the code that is shown as different is correct.
  5. Click on "Create pull request".
  6. In the right-hand column, click on the gear icon next to Reviewers
  7. Type "nrhodes-hmc" and click on the GitHub name in the list below.
  8. Click on "Create pull request".

  Deliverables

  You'll submit a GitHub branch named lab3 containing, at the top level,:
  • teams.txt: the file from Lab 1 containing team member names and GitHub ids.
  • docs directory containing:
    • docs/design.md A design document (updated, as necessary, from lab1) (in Markdown format) that describes (either all in one markdown file or with links to others):
      • your design decisions, including their rationale (include images)
      • alternative designs you considered, including images
      • any user testing you did
      • the final design, including screen images and the flow for each task.
      • challenges you faced
      • parts of the design you're most proud of
    • any needed images or markdown files referenced from design.md.
  • All the files/directories for your React application, including:
    • README.md (modified as appropriate for your project). Please add a link to your running application in this file.
    • package.json
    • src: directory containing your .js and .css files. Remove any unneeded files.
    • public: directory containing:
      • index.html: your initial HTML page.
      • favicon.ico: your icon (shows up next to title in web browser)
      • *.png: Other sized icons.
      • manifest.json: information to browser about web app. References .png files
  Before creating your pull request, go to GitHub and verify that:
  • https://{GITHUBUSERNAME}.github.io/cs124/ shows your running application.