Curriculum Dashboard

Introduction: Curriculum Dashboard

What is Serendipity Backpack?

Welcome to Serendipity Backpack, an alpha prototype for Serendipity STEM teachers to manage curriculum and resources amidst distance learning. This project was made for Ms. Berbawy's Principles of Engineering class.

During the COVID-19, not being able to communicate face to face makes it harder to convey ideas and share centralized resources. To solve this issue, the Serendipity Backpack aims to implement a live curriculum database that is protected by Firebase authentication, making resources easily accessible and editable by everyone.

See the project's stable version on your device on this Firebase hosted website (currently supported on Google Chrome). As it always will be, the code and engineering documentation is open source.

We are constantly improving! This project is open source, feel free to create pull requests and send feedback.

Step 1: Project Preview

Above is a preview of the views that we will be customizing in the quick start. The main features include a main view that allows for easy access of curriculum links, data customization, and Google Sign In Authentication.

Step 2: Software Downloads

Since this is a software project you will not need anything physical. Here is a list of downloads for what we will be using to make the Serendipity Backpack:

Node Package Manger (NPM)



Intellij Ultimate

Git Version Control

Github (Make an account)

Step 3: Inspiration

Although Serendipity Backpack is unique in its purpose, many references have been drawn from Shaun, the Net Ninja. The Net Ninja has some of the best tutorials on YouTube in the web application field and the tutorials below are directly inspired by him.

This project originally was thought about from my Coding Intern position at Pilot City. The Backpack was made to address the need for streamlining the access to resources(links, forms, and slide decks) especially during Shelter In Place.

Special thanks to Derick and Jerold from Pilot City, and Ms. Berbawy from Berbawy Makers for being great mentors in my developer journey.

Behind the scenes, this project is for the wonderful teachers at Serendipity STEM and I hope this will help Serendipity STEM serve more students in the community.

Step 4: Project Introduction

Get to know the project and see our final product including authentication, front end components, and Firebase's backend data.

Resource for CSS gradients (the same one used in the video thumbnails!)

Step 5: Setup Frontend Part of Website

In this video we will be setting up our GitHub repository, cloning it, and initializing NPM and Vue JS.

Step 6: Quick Setup - Cloning the Repository

To quickly setup this project you can first visit the stable main branch and clone it into a local repository. If you want to be able to edit and push to the project, consider forking instead of committing to your own GitHub account.

Step 7: Customizing Authentication

In order to customize this project, we will need to create our own Firebase Project. After this we will be customizing the Google Sign In Authentication with your own API Key so you can have complete control over the authentication process. This quick API swap will allow you to seamlessly integrate with the existing Firebase Auth provided in this project.

Step 8: Customizing Data in Firestore

To customize the data in Firestore, we will using the Firebase project we made in the last video and follow the same template as the original backpack. We will also get a quick introduction on how to edit some of the frontend components as well.

Step 9: ❓Trouble Shooting ❓

If you have any further questions about the project or do not understand something in this intractable or video, feel free to add a GitHub issue or contact me directly!

Step 10: 🎉 Congratulations 🎉

Congratulations on completing the quick start! So what's next?

Well the Quick Start is just the tip of the iceberg! To customize it further you can edit the sub components and Vuetify UI to change the project so that it is uniquely yours.

As this project is open source, feel free to open pull requests and show off your awesome changes. Whether you are a developer confused on how to add a feature or a teacher requesting a new function, please don't hesitate to reach out to me.

I can't wait to see what you have done and what you will do!

Happy Coding 🙌

- Kyle Ng

Be the First to Share


    • Arduino Contest

      Arduino Contest
    • Barbecue Speed Challenge

      Barbecue Speed Challenge
    • Make it Real Student Design Challenge #3

      Make it Real Student Design Challenge #3