workshop-svelte

This workshop was designed for students enrolled in the web developer program at Yrgo.

Svelte is a modern JavaScript framework that aims to make building web applications more efficient and maintainable. Unlike traditional frameworks that rely on a runtime library, Svelte compiles your code into highly optimized JavaScript that runs directly in the browser. This approach results in faster load times, better performance, and a smaller overall code footprint.

• :books: Documentation

  • Examples

  • Tutorial

  • Documentation

  • Learn Svelte

• :headphones: Videos

  • Rich Harris - Rethinking reactivity

  • Svelte Origins: The Documentary

  • React VS Svelte...10 Examples

Excersises

1. Alrighty, buckle up for some hilarity! Begin your journey by moseying on over to learn.svelte.dev and embarking on their side-splitting tutorial. Prepare to be edutained as the tutorial imparts the wisdom you need to effortlessly construct web applications of all shapes and sizes, boasting lightning-fast speeds and teensy-weensy footprints, all thanks to the marvel that is Svelte.

2. Before commencing with this enlightening and engaging exercise, the ever-helpful teacher will provide you with a clear and comprehensive demonstration of the correct assembly process, skillfully utilizing the expansive screen at the front of the room to ensure maximum understanding and clarity for all eager participants.

   Leveraging the kanye.rest API, develop an elegant Svelte application that dynamically presents a random Kanye West quote each time the user engages with an interactive button.

   To scaffold your first Svelte project, you may use the following command:

   npm create vite@latest kanye-rest -- --template svelte
   

   https://user-images.githubusercontent.com/499192/232570857-1dc36896-71b1-448e-a5f8-4b78fd1ef9a2.mp4

3. To provide you with an authentic and engaging development experience, we have proudly teamed up with Mediaflow so you can utilize their API to access and retrieve data effectively. This collaboration ensures you can create practical, real-world applications by harnessing the power of Mediaflow's robust platform.

   Mediaflow is a cloud-based service that helps you work more efficiently with your digital assets. Collaborate, distribute, and organize easily and quickly.

   Prior to diving in, please download the resources directory and proceed to install the necessary dependencies utilizing npm. It comes pre-installed with Tailwind CSS, you may use CSS or Tailwind, or a combination of both, to style your application. The design isn't important, but the functionality is.

   npm install
   

   To proceed, obtain the Mediaflow API keys from Discord and incorporate them into the .env.local file, located at the root of your project.

   VITE_MEDIAFLOW_CLIENT_ID=
   VITE_MEDIAFLOW_CLIENT_SECRET=
   VITE_MEDIAFLOW_REFRESH_TOKEN=
   

   If you haven't already, install the following Visual Studio Code extensions:

   • svelte.svelte-vscode
   • esbenp.prettier-vscode

   List of features (complete how many you want to):

   • As a user, I can view a gallery of images fetched from Mediaflow.
   • As a user, I can click on an image to view it in a modal and see additional information.
   • As a user, I can click on the modal button to close it.
   • As a user, I can press Escape on my keyboard to close the modal.

   The API endpoints you will need to use are:

   • https://api.mediaflow.com/1/oauth2/token - to fetch an access token
   • https://api.mediaflow.com/1/file/latest - to fetch a list of images
   • https://api.mediaflow.com/1/file/{{id}} - to fetch a single image

   Please see the documentation for more information.

   Should you find this a tad overwhelming, fear not! You can always refer to the solutions for guidance and inspiration. For instance, take a look at this solution demonstrating how to perform GET requests to retrieve data from Mediaflow.

   https://user-images.githubusercontent.com/499192/232570273-e076ef4d-040c-4729-a437-452ecd5959ca.mp4

   Keep in mind, prior to delving into the realm of Svelte, it's essential to embrace the enduring wisdom passed down to developers at Ericsson: "Work harder, not smarter!"