{"id":21448090,"url":"https://github.com/romdim/mobiquity-ergast","last_synced_at":"2025-03-17T02:09:30.246Z","repository":{"id":36917001,"uuid":"134002339","full_name":"romdim/mobiquity-ergast","owner":"romdim","description":"This is the FE test for Mobiquity, using Ergast API and Angular, for showcasing F1 winners 2005-2015.","archived":false,"fork":false,"pushed_at":"2023-01-04T04:39:14.000Z","size":3821,"stargazers_count":0,"open_issues_count":20,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-23T11:45:37.779Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/romdim.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-05-18T20:42:59.000Z","updated_at":"2021-02-17T23:46:48.000Z","dependencies_parsed_at":"2022-08-30T15:03:24.524Z","dependency_job_id":null,"html_url":"https://github.com/romdim/mobiquity-ergast","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/romdim%2Fmobiquity-ergast","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/romdim%2Fmobiquity-ergast/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/romdim%2Fmobiquity-ergast/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/romdim%2Fmobiquity-ergast/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/romdim","download_url":"https://codeload.github.com/romdim/mobiquity-ergast/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243960665,"owners_count":20375104,"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":[],"created_at":"2024-11-23T03:14:00.059Z","updated_at":"2025-03-17T02:09:30.221Z","avatar_url":"https://github.com/romdim.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# MobiquityErgast\n\nThis project's purpose was to create a SPA that presents a list with all the F1 World Champions starting from 2005 until 2015.\nNavigation was required to check the winners of every race of a selected year. The row that contains the world champion of the year was to be highlighted.\nThe [Ergast API](https://ergast.com/mrd/) was used for this reason.\n\nVarious desicions were taken in terms of UI and UX. I tried to keep things simple by using a well-established design, Material.\nBeyond the obvious I wanted to be coherent with the [Angular Styleguide](https://angular.io/guide/styleguide), create a Dockerfile for convenience, make the website a PWA\nand let it cache responses.\n\nAs no certain kind of visitors were defined for this test, I assumed that the site would target people\nthat know eveything around F1 and want to learn even more, that's why it was essential to me to show\nthe most of the info I could get by the Ergast service. This is why I went with accordion and not grid\nor cards, in order to show the most in a non-intrusive way. Also, photos of the drivers were\nconsidered but was declined as it would make the site static, while it should get the data\ndynamically. Cover photo was declined as well even though unsplash provides some very good, because\nit would push all the data below the fold.\nGoogle Maps was added as it shows the visitor the exact location of the race visualised.\nResponsive layout was a must for all devices.\n\nAngular was chosen as I've already worked with it, love Typescript and also wanted to test v6. I know version 6 may not be the most\nstable one as it is less than a month old, but it was just fine for a simple app.\n\nThe website can be seen at https://romdim.nl/mobiquity-ergast. Github is kind enough to let projects host their services by using the gh-branch.\n\nThe first steps for scaffolding were:\n\n```bash\nnpm i -g npm\nnpm i -g @angular/cli\nng new mobiquity-ergast --style=scss\nng g m app-routing --flat --module=app\nng g m shared\nng g s shared/ergast\nng g c champions\nng g c winners\n```\n\nnpm and angular cli version is 6.0.1.\nSass was chosen for its reusability. (Haven't tried css variables yet)\n--flat puts the file in src/app instead of its own folder.\n--module=app tells the cli to register it in the imports array of the AppModule.\n\nI then created 4 models: Champion, Constructor, Driver and Winner.\nBasic test classes for them and a mock service.\nAdded API url and Google Maps key to environments. (it is restricted to be used only by this site)\nThen I went on to install more dependencies.\n\n```bash\nnpm install --save @angular/material @angular/cdk\nnpm install --save flag-icon-css\nnpm install --save i18n-iso-countries\nnpm install @agm/core rxjs-compat@6 --save\n```\n\nFinally, the page scores excellent in metrics: [GTMetrix](https://gtmetrix.com/reports/romdim.github.io/DYATSW4Y) 96% overall, with 2.3s Fully Loaded Time.\n\n## Docker\n\nYou can use Docker so as not to install anything else than that.\nAfter installing Docker you can run:\n\n```bash\ndocker build . -t me\ndocker run -p 80:80 me\n```\n\nThese commands build the project intended for production server and serve it for you.\nSo you can just go over to [localhost](http://localhost).\n\n## Development server\n\nRun `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.\n\n## Build\n\nRun `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.\n\n## Running unit tests\n\nRun `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).\n\n## Running end-to-end tests\n\nRun `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).\n\n## Contribution\n\nThe project is open for pull requests!\n\n## Special thanks\n\nMany thanks go to:\n\n- [Angular](https://angular.io/) (and [styleguide](https://angular.io/guide/styleguide))\n- [Angular Material](https://material.angular.io/)\n- [Angular Google Maps](https://angular-maps.com/)\n- [flag-icon-css](http://flag-icon-css.lip.is/)\n- [i18n-iso-countries](https://github.com/michaelwittig/node-i18n-iso-countries)\n- [Flaticon](https://www.flaticon.com/) for having free icons\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fromdim%2Fmobiquity-ergast","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fromdim%2Fmobiquity-ergast","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fromdim%2Fmobiquity-ergast/lists"}