This is my 'MEVN' (MongoDB, Express.js, Vue.js, Node.js) full-stack web app.
https://tenzint.github.io/tenzinhub/ Static page is up ^ (There is no backend support; view the demo GIFs)
Dashboard Page - powered by Nuxt.js
Weather Page - powered by Nuxt.js
Weather Page of Nuxt.js powered UI
Weather API using the Postman app
TTC Transit API specific route - Postman
TTC Transit API predictions - Postman
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.
- 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 ofgot
) to get weather API data from server
- Use Nuxt's http module (that has
- 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.
- 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
- Setup an express.js skeleton server code via