diff --git a/README.md b/README.md index 86df411..cb83c0c 100644 --- a/README.md +++ b/README.md @@ -1,21 +1,14 @@ # LumApps Frontend Test -## Introduction +Welcome to the LumApps Frontend Technical Test. In this test, you will create a small frontend application using the technologies that we at LumApps use in our daily routine. -Welcome to the LumApps Frontend Technical Test. In this test, the candidate will need to create a small frontend application using the technologies that we at LumApps use in our daily routine. +## The task -## What is the candidate going to develop? - -### Description - -In this technical test, the idea is to create a simple frontend application that retrieves data from a server and renders a list of entities. The candidate will be using a locally provided API in order to list the different characters, and the candidate needs to allow the user to search for a character based on their name. The main page should: -- When the user searches for a character, by typing on the Search field, and hits enter, a list of 4 results will be displayed. The results displayed should display characters where their name starts with the text entered by the user on the Search field. -- At the bottom of the page, a simple pagination system will be displayed, that will allow the user to see more results. -- A second API is provided in order to retrieve the reactions that each of these characters has. The candidate needs to retrieve this data and add it to each of the characters displayed +The task is to create a simple frontend application that retrieves data from a server and renders a list of entities. You will be using a locally provided API to list the different characters, allow the user to search for a character based on their name and to display characters' reactions. ### Mockup -Below you will find a low fidelity mockup of the application which should give the idea of how the application should work. This does not mean that the candidate's test needs to be exactly identical to the design, this test will not evaluate the candidate's skill to create web applications that are pixel perfect. However, a general coherence in terms of style, spacing and sizes will be evaluated. +Below you will find a low-fidelity mockup of the application which should give you the idea of how the application should work. This does not mean that your solution needs to be exactly identical to the design. We do not want you to be pixel-perfect; however, a general coherence in terms of style, spacing and sizes will be evaluated. Each result displays: - Character's image @@ -29,20 +22,19 @@ The Pagination component should be present at the bottom of the page. ### Acceptance criteria -For this test to be completed, the candidate's application should: -- Allow the user to search for characters by their name -- Display a list of 4 results, each of them with an image, title, description and the additional data -- Reactions for each character. -- A pagination component that allows the user to navigate between pages. +For this test to be completed, your application should fulfill the following criteria: +- As a user, I can search for a character by typing on the Search field. As a result, a list of 4 matching characters is displayed. An API is provided to retrieve the characters. +- As a user, I can browse through the results using a pagination component visible at the bottom of the page. +- As a user, I can see the reactions that each of these characters has. A second API is provided to retrieve the reactions. -These features are what LumApps requires for considering this test as a complete one and the candidate should focus on having these features developed before developing additional features, functionality should be the focus of the test. If the search, reactions or the pagination features do not work or are not developed, the test will be considered as incomplete and it will affect the final review. +These criteria are what we require to consider this test as complete. Any additional functionalities should come as secondary. If the search, reactions or the pagination features do not work or are not developed, the test will be considered as incomplete, and it will affect the final review. ## What will be evaluated? The objective of this test is to evaluate different topics of frontend development. Specifically: -- The level of expertise that a candidate has with the web stack, which includes HTML, CSS and JavaScript, and how the candidate uses these languages in order to solve a problem. -- The level of expertise when it comes to JavaScript and VueJS in general. -- The attention that the candidate has for the general quality of the application. Specifically in terms of: +- The level of expertise that you have with the web stack, which includes HTML, CSS, TypeScript and how you use these languages to solve a problem. +- The level of expertise when it comes to TypeScript and Vue.js in general. +- The attention that you have for the general quality of the application. Specifically, in terms of: - Accessibility - Performance - Usability and visual coherence @@ -51,36 +43,40 @@ The objective of this test is to evaluate different topics of frontend developme ## Stack -In this test, we encourage the candidate to use the technologies that we use in our daily basis: +In this exercise, we encourage you to use the technologies that we use on a daily basis: * HTML -* JavaScript -* Vue JS +* TypeScript +* Vue.js * SCSS +* Vite * Yarn -* Webpack and Webpack Dev Server -If the candidate wants to use other technologies or add features in order to enhance their application (such as, Vuex, Jest, RTL, responsive design), they can do so. +If you want to use other technologies, patterns, or add features to enhance your application (such as Vuex, Jest, RTL, responsive design), you are free to do so. -As for using a components library, the candidate has multiple choices: -- If the candidate already knows and uses a specific VueJS components library, they can use it and save sometime on the development process. -- If the candidate does not know any library, they can use the following library installed: [https://next.vuetifyjs.com/en/](https://next.vuetifyjs.com/en/) +As for using a component library, you have multiple choices: +- If you already know and use a specific Vue.js component library, you can use it and save some time in the development process. +- If you do not know any library, use the one already installed: [https://next.vuetifyjs.com/en/](https://next.vuetifyjs.com/en/) ### Ground rules -* We strongly suggest that the candidate uses the technologies suggested under the Stack section. -* If the candidate wants to use their own boilerplate, they are free to override the whole repository, but the candidate should note that this could take more time than just using the provided boilerplate. +* We strongly suggest that you use the technologies listed under the Stack section. +* If you want to use your own boilerplate, you are free to override the whole repository, but you should note that this could take more time than just using the provided one. ## Setup -The candidate should fork the repo and create their own, downloading it locally. +You should download the code and create your own repository. + +In the project directory, you need to run: `yarn` +This will set up the necessary dependencies to execute this project. + +You will need to use Node.js version 20 to run this project. Not doing so will result in an error. We suggest using a node version manager [nvm](https://github.com/nvm-sh/nvm) for this purpose. -In the project directory, the candidate needs to run: `yarn` -This will setup the necessary dependencies to execute this project. +To start development, execute `yarn start`, which will run the app in development mode. -The candidate will need to use Node JS v.20.11.1 in order to run this project. Not doing so will result in an error. The candidate can install this particular version using [nvm](https://github.com/nvm-sh/nvm). +### API Mocking -To start development, the candidate can execute `yarn start`, which will run the app in development mode. +This project uses [Mock Service Worker (MSW)](https://mswjs.io/) to simulate API responses. The mock handlers are already configured and will intercept your API calls automatically when you run the development server. You don't need to set up a separate backend - the mocked APIs will provide the character data and reactions you need for the test. ## Project delivery -This project should be accessible on GitHub as either a private or public repository. The candidate's recruiter will provide further details when it comes to who to give access to the repository. +This project should be accessible on GitHub as either a private or public repository. Your recruiter will provide further details about who to give access to the repository. diff --git a/index.html b/index.html index 1f0e2b2..04f10dd 100644 --- a/index.html +++ b/index.html @@ -1,13 +1,12 @@ - - - - Lumapps Frontend Tech Test - - -
- - + + + + Lumapps Frontend Tech Test + + +
+ diff --git a/src/__mocks/data.ts b/src/__mocks/data.ts index 34c221c..659beb4 100644 --- a/src/__mocks/data.ts +++ b/src/__mocks/data.ts @@ -1,313 +1,313 @@ -import { Character, Reaction } from '../types'; +import {Character, Reaction} from '../types'; export const allCharacters: Character[] = [ - { - id: 1, - name: "Han Solo", - species: "Human", - birthYear: "29 BBY", - description: "A charismatic and quick-witted smuggler, Han Solo is the legendary captain of the Millennium Falcon. Known for his daring maneuvers, sharp tongue, and unwavering loyalty to his friends, Han—alongside his Wookiee co-pilot Chewbacca—became a pivotal figure in the Rebellion, helping to topple the Empire and later supporting the Resistance.", - imageUrl: "/images/han-solo.png", - affiliations: ["Rebel Alliance", "Resistance", "Smugglers' Alliance"] - }, - { - id: 2, - name: "Count Dooku", - species: "Human", - birthYear: "102 BBY", - description: "Once a respected Jedi Master, Count Dooku fell to the dark side and assumed the title of Darth Tyranus. As a cunning strategist and master duelist, he led the Confederacy of Independent Systems during the Clone Wars, orchestrating galactic conflict while serving as a key agent of the Sith.", - affiliations: ["Confederacy of Independent Systems", "Sith", "Jedi Order (formerly)"] - }, - { - id: 3, - name: "R2-D2", - species: "Droid", - birthYear: "33 BBY", - description: "An astromech droid of remarkable resourcefulness and courage, R2-D2 has been a loyal companion to C-3PO, Anakin Skywalker, and the Skywalker family across generations. His quick thinking and technical prowess have saved his friends from countless perils, making him a silent hero in the galaxy’s most critical moments.", - imageUrl: "/images/r2d2.png", - affiliations: ["Galactic Republic", "Rebel Alliance", "Resistance", "Skywalker Family"] - }, - { - id: 4, - name: "Mace Windu", - species: "Human", - birthYear: "72 BBY", - description: "A senior and formidable member of the Jedi High Council, Mace Windu is renowned for his stern demeanor, unyielding sense of justice, and mastery of the rare Vaapad lightsaber form. His wisdom and combat skills made him one of the most respected and feared Jedi of his era.", - imageUrl: "/images/mace-windu.png", - affiliations: ["Jedi Order", "Galactic Republic"] - }, - { - id: 5, - name: "Rey", - species: "Human", - description: "A resilient scavenger from the desert planet Jakku, Rey’s journey from obscurity to Jedi Knight is marked by her fierce independence, compassion, and innate connection to the Force. She played a crucial role in the Resistance’s fight against the First Order, ultimately embracing her destiny as a beacon of hope for a new generation of Jedi.", - affiliations: ["Resistance", "Jedi Order"] - }, - { - id: 6, - name: "Owen Lars", - species: "Human", - birthYear: "52 BBY", - imageUrl: "/images/owen-lars.png", - affiliations: ["Lars Family"] - }, - { - id: 7, - name: "Leia Organa", - species: "Human", - birthYear: "19 BBY", - description: "A fearless leader, diplomat, and princess of Alderaan, Leia Organa’s intelligence, courage, and compassion made her a cornerstone of the Rebel Alliance and later the New Republic. Her unwavering resolve inspired allies and struck fear into her enemies, shaping the fate of the galaxy.", - imageUrl: "/images/leia-organa.png", - affiliations: ["Rebel Alliance", "New Republic", "Resistance", "Royal House of Alderaan"] - }, - { - id: 8, - name: "Palpatine", - species: "Human", - birthYear: "82 BBY", - description: "The enigmatic and manipulative Sith Lord known as Darth Sidious, Palpatine orchestrated the fall of the Republic and the rise of the Galactic Empire. His mastery of deception and the dark side allowed him to rule the galaxy from the shadows, shaping its destiny for decades.", - imageUrl: "/images/palpatine.png", - affiliations: ["Sith", "Galactic Empire", "Galactic Republic (as Senator/Chancellor)"] - }, - { - id: 9, - name: "Chewbacca", - species: "Wookiee", - birthYear: "200 BBY", - description: "A towering Wookiee warrior from Kashyyyk, Chewbacca is the fiercely loyal co-pilot of the Millennium Falcon and Han Solo’s closest friend. Renowned for his immense strength, technical skills, and iconic roar, Chewie’s bravery has made him a beloved hero of the Rebellion and Resistance.", - imageUrl: "/images/chewbacca.png", - affiliations: ["Rebel Alliance", "Resistance"] - }, - { - id: 10, - name: "Padmé Amidala", - species: "Human", - birthYear: "46 BBY", - description: "Once the wise and compassionate Queen of Naboo, Padmé Amidala later served as a respected Senator in the Galactic Republic. A champion of peace and justice, she was the devoted mother of Luke Skywalker and Leia Organa, whose legacy shaped the fate of the galaxy.", - affiliations: ["Royal House of Naboo", "Galactic Senate", "Galactic Republic"] - }, - { - id: 11, - name: "Darth Vader", - species: "Human", - birthYear: "41.9 BBY", - description: "Once the heroic and gifted Jedi Knight Anakin Skywalker, he succumbed to the temptations of the dark side and was reborn as Darth Vader. As the Emperor’s ruthless enforcer, Vader’s presence struck terror across the galaxy, yet a spark of redemption remained within him.", - imageUrl: "/images/darth-vader.png", - affiliations: ["Galactic Empire", "Sith", "Jedi Order (formerly)"] - }, - { - id: 12, - name: "Biggs Darklighter", - species: "Human", - imageUrl: "/images/biggs-darklighter.png", - affiliations: ["Rebel Alliance"] - }, - { - id: 13, - name: "Lando Calrissian", - species: "Human", - birthYear: "31 BBY", - description: "A suave gambler and entrepreneur, Lando Calrissian was the original owner of the Millennium Falcon before losing it to Han Solo. His charm and resourcefulness led him from Cloud City administrator to a key general in the Rebellion and the Resistance.", - imageUrl: "/images/lando-calrissian.png", - affiliations: ["Rebel Alliance", "Cloud City Administration", "Resistance"] - }, - { - id: 14, - name: "General Grievous", - species: "Kalee", - description: "A fearsome cyborg and supreme commander of the Separatist droid armies, General Grievous was infamous for his collection of lightsabers taken from defeated Jedi. His multi-limbed combat style and ruthless tactics made him a formidable foe during the Clone Wars.", - affiliations: ["Confederacy of Independent Systems", "Separatist Droid Army"] - }, - { - id: 15, - name: "Aayla Secura", - species: "Twi'lek", - birthYear: "48 BBY", - description: "A graceful and formidable Twi’lek Jedi, Aayla Secura served as a general during the Clone Wars. Known for her agility and wisdom, she met a tragic end during the execution of Order 66, symbolizing the fall of the Jedi Order.", - imageUrl: "/images/aayla-secura.png", - affiliations: ["Jedi Order", "Galactic Republic"] - }, - { - id: 16, - name: "Luke Skywalker", - species: "Human", - birthYear: "19 BBY", - description: "A humble farm boy from Tatooine, Luke Skywalker rose to become one of the greatest Jedi in history. Guided by hope and compassion, he led the fight against the Galactic Empire, restored the Jedi Order, and inspired generations to come.", - imageUrl: "/images/luke-skywalker.png", - affiliations: ["Rebel Alliance", "Jedi Order", "New Republic"] - }, - { - id: 17, - name: "Bail Prestor Organa", - species: "Human", - birthYear: "67 BBY", - description: "A principled and courageous Senator of Alderaan, Bail Prestor Organa was a founding architect of the Rebel Alliance and the adoptive father of Leia Organa. His leadership and sacrifice laid the groundwork for the Rebellion’s success.", - imageUrl: "/images/bail-organa.png", - affiliations: ["Galactic Republic", "Rebel Alliance", "Royal House of Alderaan"] - }, - { - id: 18, - name: "Yoda", - birthYear: "896 BBY", - description: "The wise and enigmatic Grand Master of the Jedi Order, Yoda’s centuries of experience and deep connection to the Force made him a legendary mentor. His unique speech and profound insights guided generations of Jedi through times of peace and conflict.", - imageUrl: "/images/yoda.png", - affiliations: ["Jedi Order", "Galactic Republic"] - }, - { - id: 19, - name: "C-3PO", - species: "Droid", - birthYear: "112 BBY", - description: "A golden protocol droid fluent in over six million forms of communication, C-3PO is known for his meticulous manners, anxious personality, and unwavering loyalty to his companions. Despite his worries, he often finds himself at the center of galactic adventures.", - imageUrl: "/images/c3po.png", - affiliations: ["Galactic Republic", "Rebel Alliance", "Resistance", "Skywalker Family"] - }, - { - id: 20, - name: "Anakin Skywalker", - species: "Human", - birthYear: "41.9 BBY", - description: "The prophesied Chosen One, Anakin Skywalker was a Jedi of extraordinary talent and passion. His heroic deeds and tragic fall to the dark side as Darth Vader forever altered the fate of the galaxy, leaving a legacy of both hope and warning.", - imageUrl: "/images/anakin-skywalker.png", - affiliations: ["Jedi Order", "Galactic Republic", "Sith (briefly)"] - }, - { - id: 21, - name: "Captain Antilles", - species: "Human", - description: "The steadfast captain of the Tantive IV, Captain Antilles served the Royal House of Alderaan with honor. His capture and interrogation by Darth Vader marked the dramatic opening of the Galactic Civil War.", - imageUrl: "/images/captain-antilles.png", - affiliations: ["Rebel Alliance", "Royal Alderaanian Security Forces"] - }, - { - id: 22, - name: "Finn", - species: "Human", - description: "Once known as FN-2187, Finn broke free from the First Order’s control and joined the Resistance. Brave and compassionate, he became a key ally to Rey and Poe Dameron, fighting for freedom and redemption.", - affiliations: ["First Order (formerly)", "Resistance"] - }, - { - id: 23, - name: "Boba Fett", - species: "Human", - birthYear: "31.5 BBY", - description: "A legendary Mandalorian bounty hunter, Boba Fett is a clone of Jango Fett and is renowned for his iconic armor, silent demeanor, and relentless pursuit of his targets. His reputation strikes fear across the galaxy’s criminal underworld.", - imageUrl: "/images/boba-fett.png", - affiliations: ["Bounty Hunters' Guild", "Jabba's Syndicate", "The Tribe (Mandalorians)"] - }, - { - id: 24, - name: "Qui-Gon Jinn", - species: "Human", - birthYear: "92 BBY", - description: "A wise and unconventional Jedi Master, Qui-Gon Jinn was known for his independent spirit and deep connection to the Living Force. He discovered Anakin Skywalker and mentored Obi-Wan Kenobi, shaping the destiny of the Jedi Order.", - affiliations: ["Jedi Order", "Galactic Republic"] - }, - { - id: 25, - name: "Beru Whitesun lars", - species: "Human", - birthYear: "47 BBY", - description: "The kind-hearted wife of Owen Lars and aunt to Luke Skywalker, Beru Whitesun Lars provided a nurturing and supportive home for the future Jedi, offering warmth and stability amid the harsh deserts of Tatooine.", - imageUrl: "/images/beru-lars.png", - affiliations: ["Lars Family"] - }, - { - id: 26, - name: "Obi-Wan Kenobi", - species: "Human", - birthYear: "57 BBY", - description: "A wise and powerful Jedi Master, Obi-Wan Kenobi trained both Anakin and Luke Skywalker, serving as a general during the Clone Wars. His courage, wit, and sense of duty made him a legendary figure in the galaxy’s history.", - imageUrl: "/images/obi-wan-kenobi.png", - affiliations: ["Jedi Order", "Galactic Republic"] - }, - { - id: 27, - name: "R5-D4", - species: "Droid", - description: "An outdated but earnest astromech droid, R5-D4 was offered to Owen Lars by the Jawas. His malfunctioning motivator inadvertently allowed R2-D2 to fulfill his crucial mission, playing a small but pivotal role in galactic events.", - imageUrl: "/images/r5d4.png", - affiliations: ["Jawas"] - }, - { - id: 28, - name: "Poe Dameron", - species: "Human", - birthYear: "2 BBY", - description: "A fearless ace pilot and commander in the Resistance, Poe Dameron is celebrated for his daring maneuvers, quick wit, and unwavering commitment to the cause. His leadership and flying skills made him a symbol of hope against tyranny.", - affiliations: ["Resistance"] - }, - { - id: 29, - name: "Jabba Desilijic Tiure", - species: "Hutt", - birthYear: "600 BBY", - description: "A notorious Hutt gangster and crime lord, Jabba Desilijic Tiure ruled a vast criminal empire from his palace on Tatooine. His greed, cunning, and ruthlessness made him one of the most feared figures in the galaxy’s underworld.", - imageUrl: "/images/jabba-the-hutt.png", - affiliations: ["Hutt Clan", "Criminal Underworld"] - }, - { - id: 30, - name: "Ahsoka Tano", - species: "Togruta", - birthYear: "36 BBY", - description: "Once the spirited Padawan of Anakin Skywalker, Ahsoka Tano left the Jedi Order to forge her own path. Her courage and sense of justice led her to become a key figure in the Rebellion, fighting for freedom and hope across the galaxy.", - affiliations: ["Jedi Order (formerly)", "Galactic Republic (formerly)", "Rebel Alliance", "The Mandalore Resistance"] - } + { + id: 1, + name: "Han Solo", + species: "Human", + birthYear: "29 BBY", + description: "A charismatic and quick-witted smuggler, Han Solo is the legendary captain of the Millennium Falcon. Known for his daring maneuvers, sharp tongue, and unwavering loyalty to his friends, Han—alongside his Wookiee co-pilot Chewbacca—became a pivotal figure in the Rebellion, helping to topple the Empire and later supporting the Resistance.", + imageUrl: "/images/han-solo.png", + affiliations: ["Rebel Alliance", "Resistance", "Smugglers' Alliance"] + }, + { + id: 2, + name: "Count Dooku", + species: "Human", + birthYear: "102 BBY", + description: "Once a respected Jedi Master, Count Dooku fell to the dark side and assumed the title of Darth Tyranus. As a cunning strategist and master duelist, he led the Confederacy of Independent Systems during the Clone Wars, orchestrating galactic conflict while serving as a key agent of the Sith.", + affiliations: ["Confederacy of Independent Systems", "Sith", "Jedi Order (formerly)"] + }, + { + id: 3, + name: "R2-D2", + species: "Droid", + birthYear: "33 BBY", + description: "An astromech droid of remarkable resourcefulness and courage, R2-D2 has been a loyal companion to C-3PO, Anakin Skywalker, and the Skywalker family across generations. His quick thinking and technical prowess have saved his friends from countless perils, making him a silent hero in the galaxy’s most critical moments.", + imageUrl: "/images/r2d2.png", + affiliations: ["Galactic Republic", "Rebel Alliance", "Resistance", "Skywalker Family"] + }, + { + id: 4, + name: "Mace Windu", + species: "Human", + birthYear: "72 BBY", + description: "A senior and formidable member of the Jedi High Council, Mace Windu is renowned for his stern demeanor, unyielding sense of justice, and mastery of the rare Vaapad lightsaber form. His wisdom and combat skills made him one of the most respected and feared Jedi of his era.", + imageUrl: "/images/mace-windu.png", + affiliations: ["Jedi Order", "Galactic Republic"] + }, + { + id: 5, + name: "Rey", + species: "Human", + description: "A resilient scavenger from the desert planet Jakku, Rey’s journey from obscurity to Jedi Knight is marked by her fierce independence, compassion, and innate connection to the Force. She played a crucial role in the Resistance’s fight against the First Order, ultimately embracing her destiny as a beacon of hope for a new generation of Jedi.", + affiliations: ["Resistance", "Jedi Order"] + }, + { + id: 6, + name: "Owen Lars", + species: "Human", + birthYear: "52 BBY", + imageUrl: "/images/owen-lars.png", + affiliations: ["Lars Family"] + }, + { + id: 7, + name: "Leia Organa", + species: "Human", + birthYear: "19 BBY", + description: "A fearless leader, diplomat, and princess of Alderaan, Leia Organa’s intelligence, courage, and compassion made her a cornerstone of the Rebel Alliance and later the New Republic. Her unwavering resolve inspired allies and struck fear into her enemies, shaping the fate of the galaxy.", + imageUrl: "/images/leia-organa.png", + affiliations: ["Rebel Alliance", "New Republic", "Resistance", "Royal House of Alderaan"] + }, + { + id: 8, + name: "Palpatine", + species: "Human", + birthYear: "82 BBY", + description: "The enigmatic and manipulative Sith Lord known as Darth Sidious, Palpatine orchestrated the fall of the Republic and the rise of the Galactic Empire. His mastery of deception and the dark side allowed him to rule the galaxy from the shadows, shaping its destiny for decades.", + imageUrl: "/images/palpatine.png", + affiliations: ["Sith", "Galactic Empire", "Galactic Republic (as Senator/Chancellor)"] + }, + { + id: 9, + name: "Chewbacca", + species: "Wookiee", + birthYear: "200 BBY", + description: "A towering Wookiee warrior from Kashyyyk, Chewbacca is the fiercely loyal co-pilot of the Millennium Falcon and Han Solo’s closest friend. Renowned for his immense strength, technical skills, and iconic roar, Chewie’s bravery has made him a beloved hero of the Rebellion and Resistance.", + imageUrl: "/images/chewbacca.png", + affiliations: ["Rebel Alliance", "Resistance"] + }, + { + id: 10, + name: "Padmé Amidala", + species: "Human", + birthYear: "46 BBY", + description: "Once the wise and compassionate Queen of Naboo, Padmé Amidala later served as a respected Senator in the Galactic Republic. A champion of peace and justice, she was the devoted mother of Luke Skywalker and Leia Organa, whose legacy shaped the fate of the galaxy.", + affiliations: ["Royal House of Naboo", "Galactic Senate", "Galactic Republic"] + }, + { + id: 11, + name: "Darth Vader", + species: "Human", + birthYear: "41.9 BBY", + description: "Once the heroic and gifted Jedi Knight Anakin Skywalker, he succumbed to the temptations of the dark side and was reborn as Darth Vader. As the Emperor’s ruthless enforcer, Vader’s presence struck terror across the galaxy, yet a spark of redemption remained within him.", + imageUrl: "/images/darth-vader.png", + affiliations: ["Galactic Empire", "Sith", "Jedi Order (formerly)"] + }, + { + id: 12, + name: "Biggs Darklighter", + species: "Human", + imageUrl: "/images/biggs-darklighter.png", + affiliations: ["Rebel Alliance"] + }, + { + id: 13, + name: "Lando Calrissian", + species: "Human", + birthYear: "31 BBY", + description: "A suave gambler and entrepreneur, Lando Calrissian was the original owner of the Millennium Falcon before losing it to Han Solo. His charm and resourcefulness led him from Cloud City administrator to a key general in the Rebellion and the Resistance.", + imageUrl: "/images/lando-calrissian.png", + affiliations: ["Rebel Alliance", "Cloud City Administration", "Resistance"] + }, + { + id: 14, + name: "General Grievous", + species: "Kalee", + description: "A fearsome cyborg and supreme commander of the Separatist droid armies, General Grievous was infamous for his collection of lightsabers taken from defeated Jedi. His multi-limbed combat style and ruthless tactics made him a formidable foe during the Clone Wars.", + affiliations: ["Confederacy of Independent Systems", "Separatist Droid Army"] + }, + { + id: 15, + name: "Aayla Secura", + species: "Twi'lek", + birthYear: "48 BBY", + description: "A graceful and formidable Twi’lek Jedi, Aayla Secura served as a general during the Clone Wars. Known for her agility and wisdom, she met a tragic end during the execution of Order 66, symbolizing the fall of the Jedi Order.", + imageUrl: "/images/aayla-secura.png", + affiliations: ["Jedi Order", "Galactic Republic"] + }, + { + id: 16, + name: "Luke Skywalker", + species: "Human", + birthYear: "19 BBY", + description: "A humble farm boy from Tatooine, Luke Skywalker rose to become one of the greatest Jedi in history. Guided by hope and compassion, he led the fight against the Galactic Empire, restored the Jedi Order, and inspired generations to come.", + imageUrl: "/images/luke-skywalker.png", + affiliations: ["Rebel Alliance", "Jedi Order", "New Republic"] + }, + { + id: 17, + name: "Bail Prestor Organa", + species: "Human", + birthYear: "67 BBY", + description: "A principled and courageous Senator of Alderaan, Bail Prestor Organa was a founding architect of the Rebel Alliance and the adoptive father of Leia Organa. His leadership and sacrifice laid the groundwork for the Rebellion’s success.", + imageUrl: "/images/bail-organa.png", + affiliations: ["Galactic Republic", "Rebel Alliance", "Royal House of Alderaan"] + }, + { + id: 18, + name: "Yoda", + birthYear: "896 BBY", + description: "The wise and enigmatic Grand Master of the Jedi Order, Yoda’s centuries of experience and deep connection to the Force made him a legendary mentor. His unique speech and profound insights guided generations of Jedi through times of peace and conflict.", + imageUrl: "/images/yoda.png", + affiliations: ["Jedi Order", "Galactic Republic"] + }, + { + id: 19, + name: "C-3PO", + species: "Droid", + birthYear: "112 BBY", + description: "A golden protocol droid fluent in over six million forms of communication, C-3PO is known for his meticulous manners, anxious personality, and unwavering loyalty to his companions. Despite his worries, he often finds himself at the center of galactic adventures.", + imageUrl: "/images/c3po.png", + affiliations: ["Galactic Republic", "Rebel Alliance", "Resistance", "Skywalker Family"] + }, + { + id: 20, + name: "Anakin Skywalker", + species: "Human", + birthYear: "41.9 BBY", + description: "The prophesied Chosen One, Anakin Skywalker was a Jedi of extraordinary talent and passion. His heroic deeds and tragic fall to the dark side as Darth Vader forever altered the fate of the galaxy, leaving a legacy of both hope and warning.", + imageUrl: "/images/anakin-skywalker.png", + affiliations: ["Jedi Order", "Galactic Republic", "Sith (briefly)"] + }, + { + id: 21, + name: "Captain Antilles", + species: "Human", + description: "The steadfast captain of the Tantive IV, Captain Antilles served the Royal House of Alderaan with honor. His capture and interrogation by Darth Vader marked the dramatic opening of the Galactic Civil War.", + imageUrl: "/images/captain-antilles.png", + affiliations: ["Rebel Alliance", "Royal Alderaanian Security Forces"] + }, + { + id: 22, + name: "Finn", + species: "Human", + description: "Once known as FN-2187, Finn broke free from the First Order’s control and joined the Resistance. Brave and compassionate, he became a key ally to Rey and Poe Dameron, fighting for freedom and redemption.", + affiliations: ["First Order (formerly)", "Resistance"] + }, + { + id: 23, + name: "Boba Fett", + species: "Human", + birthYear: "31.5 BBY", + description: "A legendary Mandalorian bounty hunter, Boba Fett is a clone of Jango Fett and is renowned for his iconic armor, silent demeanor, and relentless pursuit of his targets. His reputation strikes fear across the galaxy’s criminal underworld.", + imageUrl: "/images/boba-fett.png", + affiliations: ["Bounty Hunters' Guild", "Jabba's Syndicate", "The Tribe (Mandalorians)"] + }, + { + id: 24, + name: "Qui-Gon Jinn", + species: "Human", + birthYear: "92 BBY", + description: "A wise and unconventional Jedi Master, Qui-Gon Jinn was known for his independent spirit and deep connection to the Living Force. He discovered Anakin Skywalker and mentored Obi-Wan Kenobi, shaping the destiny of the Jedi Order.", + affiliations: ["Jedi Order", "Galactic Republic"] + }, + { + id: 25, + name: "Beru Whitesun lars", + species: "Human", + birthYear: "47 BBY", + description: "The kind-hearted wife of Owen Lars and aunt to Luke Skywalker, Beru Whitesun Lars provided a nurturing and supportive home for the future Jedi, offering warmth and stability amid the harsh deserts of Tatooine.", + imageUrl: "/images/beru-lars.png", + affiliations: ["Lars Family"] + }, + { + id: 26, + name: "Obi-Wan Kenobi", + species: "Human", + birthYear: "57 BBY", + description: "A wise and powerful Jedi Master, Obi-Wan Kenobi trained both Anakin and Luke Skywalker, serving as a general during the Clone Wars. His courage, wit, and sense of duty made him a legendary figure in the galaxy’s history.", + imageUrl: "/images/obi-wan-kenobi.png", + affiliations: ["Jedi Order", "Galactic Republic"] + }, + { + id: 27, + name: "R5-D4", + species: "Droid", + description: "An outdated but earnest astromech droid, R5-D4 was offered to Owen Lars by the Jawas. His malfunctioning motivator inadvertently allowed R2-D2 to fulfill his crucial mission, playing a small but pivotal role in galactic events.", + imageUrl: "/images/r5d4.png", + affiliations: ["Jawas"] + }, + { + id: 28, + name: "Poe Dameron", + species: "Human", + birthYear: "2 BBY", + description: "A fearless ace pilot and commander in the Resistance, Poe Dameron is celebrated for his daring maneuvers, quick wit, and unwavering commitment to the cause. His leadership and flying skills made him a symbol of hope against tyranny.", + affiliations: ["Resistance"] + }, + { + id: 29, + name: "Jabba Desilijic Tiure", + species: "Hutt", + birthYear: "600 BBY", + description: "A notorious Hutt gangster and crime lord, Jabba Desilijic Tiure ruled a vast criminal empire from his palace on Tatooine. His greed, cunning, and ruthlessness made him one of the most feared figures in the galaxy’s underworld.", + imageUrl: "/images/jabba-the-hutt.png", + affiliations: ["Hutt Clan", "Criminal Underworld"] + }, + { + id: 30, + name: "Ahsoka Tano", + species: "Togruta", + birthYear: "36 BBY", + description: "Once the spirited Padawan of Anakin Skywalker, Ahsoka Tano left the Jedi Order to forge her own path. Her courage and sense of justice led her to become a key figure in the Rebellion, fighting for freedom and hope across the galaxy.", + affiliations: ["Jedi Order (formerly)", "Galactic Republic (formerly)", "Rebel Alliance", "The Mandalore Resistance"] + } ]; export const allReactions: Reaction[] = [ - { id: "9907", content: "�", characterId: 13, deleted: false }, - { id: "1302", content: "🚀", characterId: 13, deleted: false }, - { id: "9906", content: "�", characterId: 5, deleted: false }, - { id: "1003", content: "�", characterId: 10, deleted: false }, - { id: "9902", content: "�", characterId: 13, deleted: true }, - { id: "9903", content: "�", characterId: 4, deleted: false }, - { id: "1301", content: "�", characterId: 13, deleted: false }, - { id: "401", content: "😈", characterId: 4, deleted: false }, - { id: "9908", content: "💰", characterId: 17, deleted: true }, - { id: "9901", content: "⭐", characterId: 5, deleted: false }, - { id: "1001", content: "�", characterId: 10, deleted: false }, - { id: "1303", content: "👍", characterId: 13, deleted: false }, - { id: "301", content: "💙", characterId: 3, deleted: false }, - { id: "201", content: "�", characterId: 2, deleted: false }, - { id: "302", content: "⭐", characterId: 3, deleted: true }, - { id: "1002", content: "🙏", characterId: 10, deleted: true }, - { id: "1702", content: "🥶", characterId: 17, deleted: false }, - { id: "1304", content: "�", characterId: 13, deleted: false }, - { id: "407", content: "�", characterId: 4, deleted: true }, - { id: "202", content: "🤖", characterId: 2, deleted: false }, - { id: "1502", content: "�", characterId: 15, deleted: false }, - { id: "9905", content: "🤖", characterId: 3, deleted: false }, - { id: "1701", content: "💰", characterId: 17, deleted: false }, - { id: "1501", content: "🧙", characterId: 15, deleted: false }, - { id: "401", content: "�", characterId: 4, deleted: false }, - { id: "303", content: "⚡", characterId: 3, deleted: false }, - { id: "9904", content: "�", characterId: 1, deleted: false }, - { id: "2202", content: "�", characterId: 22, deleted: false }, - { id: "1503", content: "✨", characterId: 15, deleted: false }, - { id: "1202", content: "🤣", characterId: 12, deleted: false }, - { id: "405", content: "�", characterId: 4, deleted: false }, - { id: "203", content: "❓", characterId: 2, deleted: false }, - { id: "406", content: "�", characterId: 4, deleted: false }, - { id: "1504", content: "�", characterId: 15, deleted: false }, - { id: "2201", content: "🟣", characterId: 22, deleted: false }, - { id: "1802", content: "�", characterId: 18, deleted: false }, - { id: "204", content: "🤖", characterId: 2, deleted: false }, - { id: "503", content: "⭐", characterId: 5, deleted: false }, - { id: "501", content: "�", characterId: 5, deleted: false }, - { id: "1501", content: "�", characterId: 15, deleted: false }, - { id: "504", content: "👑", characterId: 5, deleted: false }, - { id: "104", content: "�", characterId: 1, deleted: false }, - { id: "1201", content: "�", characterId: 12, deleted: false }, - { id: "1801", content: "🎩", characterId: 18, deleted: false }, - { id: "303", content: "⚡", characterId: 3, deleted: false }, - { id: "102", content: "⭐", characterId: 1, deleted: false }, - { id: "502", content: "�", characterId: 5, deleted: false }, - { id: "401", content: "😈", characterId: 4, deleted: false }, - { id: "103", content: "�", characterId: 1, deleted: true }, - { id: "404", content: "😈", characterId: 4, deleted: false }, - { id: "105", content: "�", characterId: 1, deleted: false }, - { id: "106", content: "�", characterId: 1, deleted: true }, - { id: "1004", content: "�", characterId: 10, deleted: false }, + {id: "9907", content: "❤️", characterId: 13, deleted: false}, + {id: "1302", content: "🚀", characterId: 13, deleted: false}, + {id: "9906", content: "👍", characterId: 5, deleted: false}, + {id: "1003", content: "💖", characterId: 10, deleted: false}, + {id: "9902", content: "😎", characterId: 13, deleted: true}, + {id: "9903", content: "👑", characterId: 4, deleted: false}, + {id: "1301", content: "💯", characterId: 13, deleted: false}, + {id: "401", content: "😈", characterId: 4, deleted: false}, + {id: "9908", content: "💰", characterId: 17, deleted: true}, + {id: "9901", content: "⭐", characterId: 5, deleted: false}, + {id: "1001", content: "🌟", characterId: 10, deleted: false}, + {id: "9906", content: "👍", characterId: 13, deleted: false}, + {id: "301", content: "💙", characterId: 3, deleted: false}, + {id: "201", content: "🔥", characterId: 2, deleted: false}, + {id: "9901", content: "⭐", characterId: 3, deleted: true}, + {id: "1002", content: "🙏", characterId: 10, deleted: true}, + {id: "1702", content: "🥶", characterId: 17, deleted: false}, + {id: "1304", content: "💫", characterId: 13, deleted: false}, + {id: "407", content: "⚔️", characterId: 4, deleted: true}, + {id: "202", content: "🤖", characterId: 2, deleted: false}, + {id: "1502", content: "🔮", characterId: 15, deleted: false}, + {id: "202", content: "🤖", characterId: 3, deleted: false}, + {id: "9908", content: "💰", characterId: 17, deleted: false}, + {id: "1501", content: "🌀", characterId: 15, deleted: false}, + {id: "401", content: "😈", characterId: 4, deleted: false}, + {id: "303", content: "⚡", characterId: 3, deleted: false}, + {id: "9904", content: "😍", characterId: 1, deleted: false}, + {id: "2202", content: "🎯", characterId: 22, deleted: false}, + {id: "1503", content: "✨", characterId: 15, deleted: false}, + {id: "1202", content: "🤣", characterId: 12, deleted: false}, + {id: "405", content: "🎪", characterId: 4, deleted: false}, + {id: "203", content: "❓", characterId: 2, deleted: false}, + {id: "406", content: "🌩️", characterId: 4, deleted: false}, + {id: "1504", content: "🌈", characterId: 15, deleted: false}, + {id: "2201", content: "🟣", characterId: 22, deleted: false}, + {id: "1802", content: "🧠", characterId: 18, deleted: false}, + {id: "202", content: "🤖", characterId: 2, deleted: false}, + {id: "9901", content: "⭐", characterId: 5, deleted: false}, + {id: "501", content: "🌸", characterId: 5, deleted: false}, + {id: "1501", content: "🌀", characterId: 15, deleted: false}, + {id: "9903", content: "👑", characterId: 5, deleted: false}, + {id: "104", content: "😊", characterId: 1, deleted: false}, + {id: "1201", content: "🎲", characterId: 12, deleted: false}, + {id: "1801", content: "🎩", characterId: 18, deleted: false}, + {id: "303", content: "⚡", characterId: 3, deleted: false}, + {id: "9901", content: "⭐", characterId: 1, deleted: false}, + {id: "502", content: "🦋", characterId: 5, deleted: false}, + {id: "401", content: "😈", characterId: 4, deleted: false}, + {id: "103", content: "🎵", characterId: 1, deleted: true}, + {id: "401", content: "😈", characterId: 4, deleted: false}, + {id: "9904", content: "😍", characterId: 1, deleted: false}, + {id: "106", content: "💎", characterId: 1, deleted: true}, + {id: "1004", content: "🌺", characterId: 10, deleted: false}, ]; diff --git a/src/components/App.vue b/src/components/App.vue new file mode 100644 index 0000000..1afd1cf --- /dev/null +++ b/src/components/App.vue @@ -0,0 +1,11 @@ + + + diff --git a/src/components/App/index.vue b/src/components/App/index.vue deleted file mode 100644 index be84dae..0000000 --- a/src/components/App/index.vue +++ /dev/null @@ -1,11 +0,0 @@ - - - diff --git a/src/components/Content/index.vue b/src/components/Content.vue similarity index 62% rename from src/components/Content/index.vue rename to src/components/Content.vue index 96cc196..2a46af1 100644 --- a/src/components/Content/index.vue +++ b/src/components/Content.vue @@ -1,11 +1,11 @@ - diff --git a/src/components/Header.vue b/src/components/Header.vue new file mode 100644 index 0000000..b1689e9 --- /dev/null +++ b/src/components/Header.vue @@ -0,0 +1,50 @@ + + + + + diff --git a/src/components/Header/index.vue b/src/components/Header/index.vue deleted file mode 100644 index 3843a22..0000000 --- a/src/components/Header/index.vue +++ /dev/null @@ -1,47 +0,0 @@ - - - - - \ No newline at end of file diff --git a/src/components/untyped-modules.d.ts b/src/components/untyped-modules.d.ts index 347441e..5e699a4 100644 --- a/src/components/untyped-modules.d.ts +++ b/src/components/untyped-modules.d.ts @@ -1,16 +1,16 @@ declare module '*.svg' { - const content: string; - export default content; + const content: string; + export default content; } declare module '*.png' { - const content: string; - export default content; + const content: string; + export default content; } // 💡 Declares any import ending in .scss, .css, etc., as a module with string keys // This is necessary if you are using CSS Modules (e.g., import styles from './file.module.scss') declare module '*.scss' { - const content: Record; - export default content; + const content: Record; + export default content; } diff --git a/src/main.ts b/src/main.ts index 8b1bc65..cf21ee3 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,4 +1,3 @@ - // Core Vue imports import { createApp } from 'vue'; import { createRouter, createWebHistory } from 'vue-router'; @@ -10,45 +9,45 @@ import { aliases, mdi } from 'vuetify/iconsets/mdi'; import '@mdi/font/css/materialdesignicons.css'; // App component imports -import App from './components/App/index.vue'; -import Content from './components/Content/index.vue'; +import App from './components/App.vue'; +import Content from './components/Content.vue'; // Global styles import './index.scss'; // Initialize Vuetify with Material Design Icons const vuetify = createVuetify({ - icons: { - defaultSet: 'mdi', - aliases, - sets: { mdi }, - }, + icons: { + defaultSet: 'mdi', + aliases, + sets: { mdi }, + }, }); // Enable API mocking for development async function enableMocking() { - const { worker } = await import('./__mocks/browser'); - return worker.start({ - onUnhandledRequest: 'bypass', - }); + const { worker } = await import('./__mocks/browser'); + return worker.start({ + onUnhandledRequest: 'bypass', + }); } // Start the mock service worker, then initialize the app enableMocking().then(() => { - // Set up Vue Router - const router = createRouter({ - history: createWebHistory(), - routes: [ - { path: '/', component: Content }, - ], - }); - - // Create and mount the Vue app - createApp(App) - .use(router) - .use(vuetify) - .mount('#root'); + // Set up Vue Router + const router = createRouter({ + history: createWebHistory(), + routes: [ + { path: '/', component: Content }, + ], + }); + + // Create and mount the Vue app + createApp(App) + .use(router) + .use(vuetify) + .mount('#root'); }); diff --git a/src/types.ts b/src/types.ts index bd00ebd..2d1425b 100644 --- a/src/types.ts +++ b/src/types.ts @@ -1,16 +1,16 @@ export interface Character { - id: number; - name: string; - species?: string; - birthYear?: string; - description?: string; - imageUrl?: string; - affiliations: string[]; + id: number; + name: string; + species?: string; + birthYear?: string; + description?: string; + imageUrl?: string; + affiliations: string[]; } export interface Reaction { - id: string; - content: string; - characterId: number; - deleted: boolean; + id: string; + content: string; + characterId: number; + deleted: boolean; } diff --git a/vite.config.mts b/vite.config.mts index d2ca860..50a55dd 100644 --- a/vite.config.mts +++ b/vite.config.mts @@ -1,34 +1,34 @@ -import { defineConfig } from 'vite'; +import {defineConfig} from 'vite'; import vue from '@vitejs/plugin-vue'; // https://vitejs.dev/config/ export default defineConfig({ - plugins: [vue()], - // 💡 Add the css configuration block here - css: { - preprocessorOptions: { - scss: { - // Configure the Sass compiler to suppress warnings - logger: { - warn: (message, options) => { - // Check if span and url exist and the url is a file path - if (options.span && options.span.url) { - - // 💡 FIX: Convert the URL object to a string before using string methods - const url = options.span.url.toString(); - - // Check if the path points into the node_modules directory - if (url.includes('node_modules')) { - // Suppress warnings from node_modules - return; - } + plugins: [vue()], + // 💡 Add the css configuration block here + css: { + preprocessorOptions: { + scss: { + // Configure the Sass compiler to suppress warnings + logger: { + warn: (message, options) => { + // Check if span and url exist and the url is a file path + if (options.span && options.span.url) { + + // 💡 FIX: Convert the URL object to a string before using string methods + const url = options.span.url.toString(); + + // Check if the path points into the node_modules directory + if (url.includes('node_modules')) { + // Suppress warnings from node_modules + return; + } + } + // Log all other warnings + console.warn(message); + } + } } - // Log all other warnings - console.warn(message); - } } - } } - } });