{"id":18775894,"url":"https://github.com/andreoav/dragons-test","last_synced_at":"2026-04-02T18:53:29.256Z","repository":{"id":55301654,"uuid":"228265599","full_name":"andreoav/dragons-test","owner":"andreoav","description":"Dragons frontend browser using React and TailwindCSS","archived":false,"fork":false,"pushed_at":"2021-01-05T18:17:53.000Z","size":787,"stargazers_count":2,"open_issues_count":1,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-12-29T09:24:39.836Z","etag":null,"topics":["cypress","dragons-api","emotion","hooks","react","tailwindcss"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/andreoav.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}},"created_at":"2019-12-15T23:04:53.000Z","updated_at":"2023-03-04T05:28:41.000Z","dependencies_parsed_at":"2022-08-14T20:11:19.228Z","dependency_job_id":null,"html_url":"https://github.com/andreoav/dragons-test","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/andreoav%2Fdragons-test","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andreoav%2Fdragons-test/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andreoav%2Fdragons-test/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andreoav%2Fdragons-test/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/andreoav","download_url":"https://codeload.github.com/andreoav/dragons-test/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239683475,"owners_count":19679951,"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":["cypress","dragons-api","emotion","hooks","react","tailwindcss"],"created_at":"2024-11-07T19:44:13.552Z","updated_at":"2025-12-15T04:30:13.657Z","avatar_url":"https://github.com/andreoav.png","language":"JavaScript","readme":"# Frontend challange - Dragons API\n\n## Tech stack\n\n- [Create React App](https://create-react-app.dev/)\n- [TailwindCSS](https://tailwindcss.com/)\n- [Emotion](https://emotion.sh)\n- [SWR](https://swr.now.sh/)\n- [Formik](https://jaredpalmer.com/formik/docs/overview)\n- [Reach Router](https://reach.tech/router)\n- [date-fns](https://date-fns.org/)\n- [react-loading-skeleton](https://www.npmjs.com/package/react-loading-skeleton)\n- [Jest](https://jestjs.io/)\n- [Cypress](https://www.cypress.io/)\n- [Storybook](https://storybook.js.org/)\n- [Font Awesome](https://fontawesome.com/)\n\n## Instructions\n\n### To install the dependencies run\n\n```\nyarn install\n```\n\n### To run the application\n\n```\nyarn start\n```\n\nFake login: **admin/admin**\n\n### To run jest tests\n\n```\nyarn test\n```\n\n### To run cypress tests (start the application first)\n\n```\nyarn cypress\n```\n\n## Tech decisions\n\n### CSS\n\nThe app consists of a Create React App boilerplate tweaked with babel-plugin-macros to some customization, like tailwind as my CSS framework.\nTailwind provides useful css classes to improve productivity, and everything is based on a configuration file that may be tweaked to the user needs. With the tailwind.macro I can use Tailwind together with emotion and classnames library.\n\n### State Managment\n\nThis project uses React Context API and useReducer hooks to handle state management.\n\n### Data fetching\n\nData fetching is made using swr hooks. SWR is library that orchestrates and handle many important things about data fetching. It optimizes our rendering and perform cache invalidation/revalidation, making the application more responsive.\n\n### Testing\n\nAll unit and integration tests are made using Jest.  \nE2E tests were developed with the cypress library.\n\n### Components\n\nThe application is split in many components and each component has a dedicated Storybook file.\n\n### Routing\n\nThe application uses Reach Router to handle routing. All routes are lazy loaded with React Lazy and React Suspense to improve application performance and decrease the initial bundle downloaded by the browser.\n\n## Author\n\nAndreo Vieira @ \u003ccontato@andreovieira.com.br\u003e\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandreoav%2Fdragons-test","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandreoav%2Fdragons-test","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandreoav%2Fdragons-test/lists"}