https://github.com/diogo405/superdraft-search
https://github.com/diogo405/superdraft-search
Last synced: about 11 hours ago
JSON representation
- Host: GitHub
- URL: https://github.com/diogo405/superdraft-search
- Owner: diogo405
- Created: 2020-09-08T11:50:31.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2020-09-11T02:31:34.000Z (almost 5 years ago)
- Last Synced: 2025-02-25T09:37:39.356Z (4 months ago)
- Language: JavaScript
- Size: 598 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# superdraft-search
## How it works
When the page is loaded it makes an API request to fetch the projects (and form). When the filter button is hit it calls the API passing the form fields.
### Running it in your machine
`npm install`
`npm run start`
API credentials are loaded thru environment variables. See Api.js.
## Architecture
App.js is the central point. It calls the API and shows / hides the components based on the API response.
### Filtering
Filter.js receives a callback via props which is triggered every time the filter button is clicked. The callback has the form as argument and is executed in App.js to call the API.
## Error handling
If something goes wrong a message is displayed: 'Oops something went wrong'.
## Responsiveness
The app is responsive till iPhone SE (320px wide). It basically changes the number of projects in each row thru media queries and flex direction for the form.
## Testing
There's a few E2E tests using Cypress. To run 'em headless type in your terminal (assuming you npm'ed)
`npm run cy:test`
Or if wanna run thru UI
`node_modules/cypress/bin/cypress open`