Deliverables - Hybrid Assignments

Firebase Firestore App

TIP

Due before 6:00 pm on Friday November 19, 2021.

# Instructions

Start with this PluralSight Tutorial (opens new window)
Watch the Firebase Firestore tutorial at ~1.5x speed and you will be finished in less than an hour.
Your assignment is to create your own simple CRUD website that lets you manage a list of your favourite categorized whatever.
In your data, there needs to be categories plus items within each category.
You will write the HTML, CSS, and Javascript for the webpage.
You can use any CSS library that you want to reduce the amount of CSS you write yourself.
It needs to include an unordered list of categories.
Inside each category there will be an ordered or unordered list of items.

The focus of the assignment is Firebase. So, you can build either a vanilla JS SPA or a React SPA (or even a NextJS SPA that uses Firebase as its data source).

Another excellent reference for building things with Firebase FireStore is Net Ninja's Firestore tutorial on YouTube (opens new window)

Net Ninja now has a new tutorial series that JUST came out talking about version 9 (opens new window)

And here is the official Firebase docs for Web (opens new window)

<!-- this is just an example list -->
<ul class="categories">
  <li>
    Cheese
    <ul>
      <li>Emmenthal</li>
      <li>Mozzarella</li>
      <li>Gouda</li>
    </ul>
  </li>
  <li>
    Beer
    <ul>
      <li>Corona</li>
      <li>Headstock</li>
      <li>Heineken</li>
    </ul>
  </li>
  <li>
    Burger Joints
    <ul>
      <li>Five Guys</li>
      <li>The Burger&apos;s Priest</li>
    </ul>
  </li>
</ul>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

The data in Firebase will likely look something like this:

{
  "cheese": [
    {_id:'some id from firebase', item: 'Emmenthal'},
    {_id:'some id from firebase', item: 'Mozzarella'},
    {_id:'some id from firebase', item: 'Gouda'},
  ],
  "beer": [
    {_id:'some id from firebase', item: 'Corona'},
    {_id:'some id from firebase', item: 'Headstock'},
    {_id:'some id from firebase', item: 'Heineken'},
  ],
  "burger joints": [
    {_id:'some id from firebase', item: 'Five Guys'},
    {_id:'some id from firebase', item: 'The Burger\'s Priest'},
  ]
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Use Firebase - Firestore to manage the data in your site.
There will need to be a form on the page for adding/editing the categories
There will need to be a second form for adding/editing an item to a category.
Delete operations should have a confirmation dialog of some type to protect the user.
The layout and design are up to you, as long as you follow the good design practices that you have been taught in the program.

FireStore Versions

The tutorials listed on this page are for different versions of FireStore. There have been 5 new versions of FireStore in the last few years. It doesn't matter which version between 5 - 9 that you use. This is a common issue that developers contend with - multiple versions of a library and they have to work on a specific one that doesn't exactly match available tutorials.

Remember

Make commits as you complete each requirement. They should be atomic and have a meaningfully descriptive message.

# Submission

Create a private repo on GitHub with the name mad9135-h2-firestore..
Be sure to enable GitHub Pages on the repo OR you can deploy to Netlify.
Invite GitHub user prof3ssorSt3v3 as a collaborator on your private repo.
Submit both the URL of the code repo and the GitHub Pages or Netlify URL to the bs LMS assignment page.

← Unit Testing HTML5 Weather App →