Full Stack Course Searching Web App (Triton Search) with Firebase Firestore, Vue.js/Vuex, Bulma, Buefy, Cheerio.js

• Triton Search App: https://triton-search.vercel.app/

Web Scraping w/ Cheerio.js

• Scrape all department urls.
  • https://ucsd.edu/catalog/front/courses.html
• Scrape all courses from a given department url.
  • Format: https://ucsd.edu/catalog/courses/${department}.html
• Scrape all courses for all departments.
• Insert data into Cloud Firestore database!
  • https://firebase.google.com/

Vue.js/Vuex + Buefy/Bulma

• Create client Vue project.
• Create and Add nice background made of icons.
• Create Navbar component.
• Create Footer component.
• Create Disclaimer component.
• Create an Autocomplete selection for departments.
• Create a Table for the course results.
  • Create detailed rows for course descriptions.
  • Add search filtering to table.
  • Add Pagination to table.
  • Create Add Button to add courses to SideBar.
    • Create snackbar notification when adding course.
  • Sort results by lower division first, then upper division, etc.
• Create a SideBar for added courses.
  • Create Delete Button to remove selected courses.
    • Create snackbar notification when deleting course.
  • Create Info Button to display course information.
    • Create InfoModal for course information.

Afterwards

• Fix web scraping issues.
• Update Lucid Chart graph
• Push source code to GitHub.
• Update README.
• NPM Install Vercel CLI.
• Deploy code via Vercel CLI.
• Fix Button click on Vue Network for mobile.
• Refactor code.
• Refine documentation.
• Set up Google A/B Testing Analytics.

Resources

• Coding Garden:
  • Web Scraping: https://www.youtube.com/watch?v=6R7u6EMWaa4/
  • Full Stack Reddit Clone: https://www.youtube.com/watch?v=UjX5ZE359ck/
    • GitHub: https://github.com/CodingGarden/vue-firestore-reddit-clone/
• Favicons: https://icons8.com/
• Vue.js: https://vuejs.org/
• Vuex.js: https://vuex.vuejs.org/
• Bulma: https://bulma.io/
• Buefy: https://buefy.org/
• Lucid Chart: https://app.lucidchart.com/
• Google Fonts: https://fonts.google.com/
• Regular Expressions 101: https://regex101.com/
• Font Awesome: https://fontawesome.com
• Firebase: https://firebase.google.com/
• Cloud Firestore: https://firebase.google.com/products/firestore

Preview Images