Vue.js Workshop

📆 2024-05-03

📍 GO-Atheneum Oudenaarde

Vue.js Workshop

for a school project for the course Profesional networking me and @Jari planned out to give a workshop at our old school @GO-Atheneum Oudenaarde about Vue.js for students of the 5th year. We will be teaching the basics of Vue.js and how to use it in a project. We also talked about our studies @howest.

🎉 Workshop Summary 🎉

Overview

The workshop took place on the 3rd of May 2024 at GO-Atheneum Oudenaarde, where we dove into the basics of Vue.js and its application in a project. We also shared some cool insights about our studies at @howest.

Workshop Project

For this workshop, we created an awesome project using Vue.js to develop a basic CRUD web app. 🛠️ The preparation involved many nights and weekends of hard work by @Jari and me, and we are super proud of the result! 🌟

Resources Provided

We provided a guide and a README file in a GitHub repository to help students follow along and build the project themselves. The repository contains separate branches for each step of the project, making it easy to see the project's progress and follow along. 📚

Workshop Structure

  1. Introduction:

    • Presented the project and explained its features. 📽️
    • Covered the basics of Vue.js. 🌐

  2. Live Coding Session:

    • Demonstrated how to build each feature in front of the class. 👩‍💻👨‍💻
    • Allowed students to replicate the steps on their own. ✨

  3. Hands-on Practice:

    • Assisted students who encountered issues. 🛠️
    • Explained mistakes and their solutions. 🧩
    • Showed how to check out the next step in the repository and continue from there. 🚀

The Project

The basic purpose of the app was to show a list of rated movies and their information. Users can rate the movies and add them to their list. This application used JWT tokens to authenticate users and ensure they could only see their own list of movies. 🎬⭐

We also made it so users could view others' profiles to see their list of movies and ratings. The project we made was a basic CRUD web app where you could add, delete, and update movies. 📝❌🔄 We used a backend made with Node.js, ready to go with some minor changes in an .env file such as an API key.

We used the TMDB API to get the movies and their information. 🍿 We used Docker to run the backend, so the users could easily run the backend on their own machines. 🐳

📐 Figma Wireframes

📂 Client Repository

🗄️ Backend Repository

👨‍🏫 Slides

Conclusion

The workshop was a great success and we are very proud of the result. We had a lot of fun and the students learned a lot. 🎓

Special thanks to @GO-Atheneum Oudenaarde for letting us host this workshop and to @Howest for their support. 🙌

And of course, a big thanks to @Jari for the fantastic teamwork and the fun we had working on this project. 🎉👏