Portfolio

DIGIMON

Digivice is a dynamic web application developed using Vue.js and Ajax technology. This project allows users to explore their favorite Digimon characters and learn about their evolution paths. Leveraging external APIs, Digivice retrieves detailed information such as Digimon names, levels, evolution stages, and images. Users can navigate through the Digimon database, select their preferred Digimon, and track its evolution within the application interface. Digivice offers an interactive and engaging experience for Digimon enthusiasts, providing a seamless platform to delve into the fascinating world of digital monsters.

MY ROLE

  • Back-End
  • Front-End

LANGUAGES

  • CSS
  • HTML
  • Javascript
  • Lumen
  • SASS
  • Vue.js

PROBLEM

In my web development course, I was tasked with connecting a Vue.js frontend to a Lumen API, as part of an assignment. The objective was to create a sorted list of entries within the API, along with a single entry endpoint. Working in collaboration with a partner, we aimed to gain hands-on experience in developing a simple web application that fetches and displays data from our own API. This assignment provided an opportunity to apply theoretical knowledge to practical implementation, laying the groundwork for the development of my Digimon website.

SOLUTION

The Digivice project was successfully completed, meeting all assignment requirements. It features a Vue.js frontend connected to a Lumen API, enabling users to explore Digimon data seamlessly. The application fetches and displays a sorted list of Digimon entries, allowing users to click on entries to view detailed information without navigating to a different page. Proper error handling and loading indicators were implemented for enhanced user experience. The responsive design ensures compatibility across various devices, while GreenSock animations further elevate the user experience.

PROCESS

1. Created Vue.js app with HTML foundation, fetching data from Lumen API. 2.Used Vue templating to display fetched entries. 3. Enabled detailed info display on entry click via separate API requests. 4. Implemented error handling and loading indicators. 5. Applied CSS frameworks for responsive design, GSAP for animations.

AUDIENCE

The audience for this project would primarily consist of individuals interested in Digimon, particularly fans of the franchise who are looking for a convenient and interactive way to explore information about Digimon characters. Additionally, developers and students learning web development may also find value in examining the project's implementation, as it demonstrates the integration of frontend and backend technologies using Vue.js and Lumen API.

Problem
Solution
Process
Audience

PROBLEM

In my web development course, I was tasked with connecting a Vue.js frontend to a Lumen API, as part of an assignment. The objective was to create a sorted list of entries within the API, along with a single entry endpoint. Working in collaboration with a partner, we aimed to gain hands-on experience in developing a simple web application that fetches and displays data from our own API. This assignment provided an opportunity to apply theoretical knowledge to practical implementation, laying the groundwork for the development of my Digimon website.

SOLUTION

The Digivice project was successfully completed, meeting all assignment requirements. It features a Vue.js frontend connected to a Lumen API, enabling users to explore Digimon data seamlessly. The application fetches and displays a sorted list of Digimon entries, allowing users to click on entries to view detailed information without navigating to a different page. Proper error handling and loading indicators were implemented for enhanced user experience. The responsive design ensures compatibility across various devices, while GreenSock animations further elevate the user experience.

PROCESS

1. Created Vue.js app with HTML foundation, fetching data from Lumen API. 2.Used Vue templating to display fetched entries. 3. Enabled detailed info display on entry click via separate API requests. 4. Implemented error handling and loading indicators. 5. Applied CSS frameworks for responsive design, GSAP for animations.

AUDIENCE

The audience for this project would primarily consist of individuals interested in Digimon, particularly fans of the franchise who are looking for a convenient and interactive way to explore information about Digimon characters. Additionally, developers and students learning web development may also find value in examining the project's implementation, as it demonstrates the integration of frontend and backend technologies using Vue.js and Lumen API.