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.
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
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 ❓
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