tenzinhub

This is my 'MEVN' (MongoDB, Express.js, Vue.js, Node.js) full-stack web app.

Link

https://tenzint.github.io/tenzinhub/ Static page is up ^ (There is no backend support; view the demo GIFs)

---

Demo of working project

Dashboard Page - powered by Nuxt.js

Weather Page - powered by Nuxt.js

TTC Page - powered by Nuxt.js

---

Screenshots of working project

Client - Browser

Weather Page of Nuxt.js powered UI

Server - Postman

Weather API using the Postman app

TTC Transit API specific route - Postman

TTC Transit API predictions - Postman

---

Here is my plan for this project:

The server here will webscrape weather API, TTC API and show them to my Vue.js front end.

I have found an npm package named weather-js that scrapes weather data from weather.msn.com for me. Other alternatives require me to have API key or a user account. Those were simple and doable, but I felt weather-js is good enough for me.

I initially planned to have board games in this project but I am now seperating them into another project named tenzingames. I did integrate mongoose, bcryptjs, jsonwebtoken into backend server and created authentication API that will be left unused for this project.

Here is my progress:

---

Front-end (Vue.js, VueX Store, Vue Router, Vuetify.js + Nuxt.js)

• Overall front-end
  • Setup a Nuxt.js web app skeleton (I'll try Nuxt.js instead of Vue CLI. I'm already very proficient with Vue CLI and only familiar with Nuxt.js)
  • Create a main dashboard page
    • Initialize and style the dashboard with a carousel
    • Integrate all related components and finalize the dashboard page
  • Develop and style a weather page
    • Use Nuxt's http module (that has ky - made by same author of got) to get weather API data from server
  • Develop and style TTC page
    • Use Nuxt's http module to get TTC data from server
    • Use Google Map API - Not going to use Google Map API for visual representation. They require credit card info and I don't want unwanted bill in the long run.

---

Back-end (Express.js, MongoDB/Mongoose (ODM), JWT + bcrypt)

• Overall backend
  • Setup an express.js skeleton server code via npx express-generator. Follow the express.js guide page
  • Connect the express.js server with Mongoose ODM (Object Data Mapping for MongoDB)
  • Integrate a JWT-based authentication system with the server and store it persistently with MongoDB database. Use bcrypt to salt password
    • Develop logic for signing up new users
    • Develop logic for logging in users
  • Develop an API handler for weather API
    • Web scrape weather API data from external source given some options (locations, etc)
    • Serve the front-end with meaningful weather data
  • Develop an API handler for TTC API
    • Web scrape TTC API data from external source
    • Serve the front-end with meaningful TTC arrival data

---