{"id":16998323,"url":"https://github.com/ll782/earthquakes","last_synced_at":"2026-04-09T22:51:39.816Z","repository":{"id":118921143,"uuid":"101940865","full_name":"LL782/earthquakes","owner":"LL782","description":"A simple React component, displaying earthquake information from an API","archived":false,"fork":false,"pushed_at":"2022-03-17T22:14:04.000Z","size":152,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-14T15:13:43.854Z","etag":null,"topics":[],"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/LL782.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,"publiccode":null,"codemeta":null}},"created_at":"2017-08-31T00:19:01.000Z","updated_at":"2022-03-17T22:14:07.000Z","dependencies_parsed_at":null,"dependency_job_id":"a2a74507-e8bc-43d9-a2af-4cc52564240c","html_url":"https://github.com/LL782/earthquakes","commit_stats":{"total_commits":32,"total_committers":1,"mean_commits":32.0,"dds":0.0,"last_synced_commit":"518ea8a9b10eb73e80d48cb28c17135bc320b4e1"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LL782%2Fearthquakes","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LL782%2Fearthquakes/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LL782%2Fearthquakes/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LL782%2Fearthquakes/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LL782","download_url":"https://codeload.github.com/LL782/earthquakes/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244920456,"owners_count":20532037,"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-10-14T04:04:52.665Z","updated_at":"2026-04-09T22:51:39.778Z","avatar_url":"https://github.com/LL782.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Earthquake Lister\n\n## The brief\n\n- Create a react component that displays a list of places where earthquakes have happened.\n- List should be filterable by `magnitude` or `magtype` of the earthquake. \n- If the filter does not return any items then display a message to say ‘not found’. \n- You should use React, ES6 and Redux if you think appropriate. \n- Create some (not necessary to unit test everything) tests to show the app works (using either Jasmine or Mocha). \n- Please provide two solutions if you can and the pros and cons of each approach.\n- Do not worry about resetting the filters or styling. \n- Pay attention to reusing and composing components where possible.\n\nUse the following endpoint:\nhttps://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson\u0026starttime=2014-01-01\u0026endtime=2014-01-02\n\nThe list items should display in the following format\n\n`Id: place: mag: magType`\n\ne.g.\n\n```\n- Ak10992887: 117km NW of Talkeetna, Alaska : 1.1 : ml\n- Nc72134401 : 6km E of Mammoth Lakes, California : 0.6 : md\n```\n\nCreate two inputs with buttons:\n\n1. Text Input with button to filter by magnitude\n2. Text Input with button to filter by magtype\n\n\n## Solution 1\n\n### Web view\n\n[http://laurencelord.co.uk/sandbox/earthquake-solution-1/](http://laurencelord.co.uk/sandbox/earthquake-solution-1/)\n\n### Local Setup\n\n```\ngit clone https://github.com/LL782/earthquakes.git\ncd earthquakes/solution-1\nyarn install\nyarn start\n```\n\n[Full instruction in the solution-1 directory](https://github.com/LL782/earthquakes/tree/master/solution-1)\n\n\n### Intentions\n\nQuick approach without too much concern for tooling and the \nstructure of that app beyond the component itself.\n\n- Use [Create React App](https://facebook.github.io/react/docs/installation.html) to get started quickly\n- Use [TDD](https://technologyconversations.com/2014/09/30/test-driven-development-tdd/) \n and an [XP](https://en.wikipedia.org/wiki/Extreme_programming) approach to fulfill the business logic as efficiently as possible.\n- Don't worry about PropTypes (interesting talking point)\n\n\n## Solution 2\n\n### Web view\n\n[http://laurencelord.co.uk/sandbox/earthquake-solution-2/](http://laurencelord.co.uk/sandbox/earthquake-solution-2/)\n\n### Local Setup\n\n```\ngit clone https://github.com/LL782/earthquakes.git\ncd earthquakes/solution-2\nyarn install\nyarn dist\n```\n\n[Full instruction in the solution-2 directory](https://github.com/LL782/earthquakes/tree/master/solution-2)\n\n### Intention\n\nA more carefully crafted app, some exploration into \ntechnology which is less familiar and more time setting up tooling to \nencourage best practice and consistent, high quality code.\n\n- Configure Babel, Webpack and NPM scripts from scratch (don't use create-react-app)\n- Incorporate tooling that encourages best practice (e.g. [eslint](eslint.org), [airbnb](https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb) rules)\n- (Try) [Jest](http://facebook.github.io/jest/) and [Enzyme](http://airbnb.io/enzyme/) for unit tests React components.\n\n---\n\n## Compare the two solutions\n\n\n### Both\n\nClear seperation between UI, business models, data services and config. \n\nEach component has it's own file.\n\nAll files are kept short and sweet with named functions and objects.\n\nClean, human-readable code. Take a look!\n\n\n### Solution 1\n\n`solution-1` has few component files and everything in one directory. It is especially quick and easy to read and understand. However, the components are lacking [prop-types](https://www.npmjs.com/package/prop-types) and there are no linting rules in place to enforce code consistency.\n\nI setup with [Create React App](https://github.com/facebookincubator/create-react-app) which gives a lot for free, such as an optimised build process, the service worker for caching files and hot reloading for speeding up development.\n\n\n### Solution 2\n  \n`solution-2` has each components in it's own directory with room for test files and other related files to be included along side them. The components have names like `QuakeList` and `QuakeListItem` so they wouldn't get lost if the Earth Quake lister was included with other UI features.\n\nI setup without Create React App, for greater control and understanding of every aspect of the setup.\n\n`eslint` with the `airbnb rules` assist with ensuring great code quality and consistency.\n\n---\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fll782%2Fearthquakes","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fll782%2Fearthquakes","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fll782%2Fearthquakes/lists"}