{"id":21560663,"url":"https://github.com/mariocc29/star_wars","last_synced_at":"2026-04-12T22:56:16.309Z","repository":{"id":228833215,"uuid":"774900169","full_name":"mariocc29/star_wars","owner":"mariocc29","description":"Exemplary Angular project aimed at assessing code quality with meticulous attention to detail. It interfaces with a Restful API to retrieve data on starships and pilots from the Star Wars universe.","archived":false,"fork":false,"pushed_at":"2024-03-26T15:02:30.000Z","size":2319,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-24T11:13:52.427Z","etag":null,"topics":["adobe-xd","angular","figma","frontend","scss"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mariocc29.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2024-03-20T12:01:50.000Z","updated_at":"2024-03-26T15:10:26.000Z","dependencies_parsed_at":"2024-03-25T17:46:07.753Z","dependency_job_id":"3c57ba14-57d1-47bb-8dbe-c8206aec89fc","html_url":"https://github.com/mariocc29/star_wars","commit_stats":null,"previous_names":["mariocc29/star_wars"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mariocc29%2Fstar_wars","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mariocc29%2Fstar_wars/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mariocc29%2Fstar_wars/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mariocc29%2Fstar_wars/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mariocc29","download_url":"https://codeload.github.com/mariocc29/star_wars/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244155762,"owners_count":20407416,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["adobe-xd","angular","figma","frontend","scss"],"created_at":"2024-11-24T09:16:40.768Z","updated_at":"2026-04-12T22:56:11.252Z","avatar_url":"https://github.com/mariocc29.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Star Wars \n**Half-Serious Test Angular frontend**\n\n### Overview\n\nAngular application that allows evaluating the quality of the code, meets the requirements with attention to detail.\n\nThe purpose of this application is to connect an APIRestful and get starships and pilots from Star Wars.\n\n## Requirements\n\n* The landing page should show the list of all Star Wars spaceships with a summary of the specifications for each of them.\n* When clicking on a starship, it shows the details of the spaceship, including the list of the pilots.\n* When clicking on a pilot listed in the spaceship details, the app leads the user to the details of the selected pilot.\n\n### Constraints\n\n1. It’s mandatory to be able to come back to the spaceship list at any moment, or to the last page visited.\n2. Data should load only once when the app is launched. It should not call the API thereafter, as long as the page is not refreshed.\n3. You can’t use the “wrapper swapi” offered on the site for the calls made to the web service.\n\n## Technologies\n\nThe following technologies are used in this project:\n\n||Version|Command for checking\n|-|-:|-|\n|node|20.11.1|node --version\n|npm|10.2.4|npm --version\n|angular-cli|17.3.0|ng --version\n\n## Deployment\n\nTo deploy the application, follow these steps:\n\n1. Install dependencies:\n\n```bash\n  npm install\n```\n\n2. Start the server:\n\n```bash\n  ng serve\n```\n\n## Running Tests\n\nExecute the following command to run the tests:\n\n```bash\n   ng test\n```\n\n## Solution Approach\n\nThe solution for building the Landing Page - StarWars involves the following steps:\n\n\u003e Note:\n\u003e This project was migrated from my old repository [GitHub: malfoc](https://github.com/malfoc)\n\n**Design Thinking:** Due to the creative freedom that this project had, certain stages of the Design Thinking methodology were implemented. Others were omitted due to time constraints. \n\nAfter empathizing with and defining the requirements of the project, we proceeded with ideating.\n\n\u003e Note:\n\u003e\n\u003e This project is an Angular test for a hiring process, in which we aimed to assess code quality and meet the requested functional requirements. As such, the design is not optimized for mobile devices, and responsiveness was not taken into account during development. While we understand the importance of responsiveness in most projects, in this case we chose to focus on other technical aspects.\n\n**Inspiration \u0026 References**\n\n* https://dribbble.com/shots/14543693--Artist-Info-Carousel-Concept\n* https://dribbble.com/shots/17471156-MetaSpace-Metaverse-Landing-Page\n* https://dribbble.com/shots/20247474-Education-Website-Design-business-landing-web-page-site-designer\n* https://dribbble.com/shots/4686153-Toy-store-website\n* https://dribbble.com/shots/14921442-Mandalorian-CONCEPT\n\n\u003e Credits:\n\u003e\n\u003e The Loading Page:\n\u003e See the Pen [Loading Animation](https://codepen.io/42EG4M1/pen/bVMzze) CSS by Tatsuya Azegami ([@42EG4M1](https://codepen.io/42EG4M1))\n\n**Wireframes**\n\nIn the folder ./wireframes from my old repository you will find four schematic pages as a visual guide that represents the skeletal framework of the project, created using [Adobe XD](https://helpx.adobe.com/support/xd.html).\n\n**Mockups**\n\nIn the folder ./mockups from my old repository you will find the model pages as graphic guidelines of the to-be system, created using Figma.\n\n**Graphic Guidelines**\n\n||HEX Color\n|-|-:\n|bg|#E3E7EB\n|primary|#181A1C\n|secondary|#EDF1F4\n|tertiary|#B0B4B7\n\n**Fonts:**\n\nProvider|Font Family|Font Size|Font Weight|CSS Selector\n|-|-|-|-|-\n|Google Fonts|Montserrat|150px|Bold|H1\n|Google Fonts|Montserrat|70px|Bold|H2\n|Google Fonts|Montserrat|36px|Bold|H3\n|Adobe Fonts|Proxima Nova|24px|Bold|.text-title\n|Adobe Fonts|Proxima Nova|20px|Bold|.text-subtitle\n|Adobe Fonts|Proxima Nova|18px|Bold|.text-bold\n|Adobe Fonts|Proxima Nova|18px|Regular|\n\n## Additional Features\nAt least one of the following bonuses should be used for the project demo.\n\n* Show what you can do with css/scss. (chosen)\n* If you have time, use other parts of the SWAPI (like the planets, the films, etc) (chosen)\n* Connect an API like https://unsplash.com/developers to add visuals.\n\nIn this case, this project did require hinting at the planet's API to get the name of the planet related to the key Pilot.Homeworld and attach it to the pilot model.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmariocc29%2Fstar_wars","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmariocc29%2Fstar_wars","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmariocc29%2Fstar_wars/lists"}