News Search is a small React app allowing the user to search news headlines and
sort by publish date, popularity, and relevancy. It leverages
News API's
everything endpoint.
Publishing source logos are provided by Clearbit's
free logo API if available.
It's currently hosted with gh-pages: https://gib.github.io/news-search/
The only requirement to run the project is
Docker desktop.
The project uses docker-compose to encapsulate dependencies. The project's
Dockerfile is based on the node:current-alpine image.
To run the project for development with a local web server, in the project directory, run:
docker-compose up web
This will run npm start in the container. You can also shell into the container
docker-compose run --rm web /bin/bash
Once in the running container, you can run all the available npm scripts or
you can choose to run them through docker-compose.
In the project directory, you can run:
# equivalent to `docker-compose run -rm web npm start`
docker-compose run -rm web npm start
Again, this runs the app in the development mode. Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits. You will also see any lint errors in the console.
docker-compose run -rm web npm test
Launches the test runner in the interactive watch mode. See ReactJS's documentation section about running tests for more information.
docker-compose run -rm web npm run build
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
Nothing is more constant than that feeling of wanting to do just one. more. thing. Here is my current list:
- Loading indicator when background requests are running
- Paging (currently only request the default first 20 articles)
- Request additional pages after scrolling to the bottom of results
- Indicate when there are no more results
- "Delightful" transition of incoming articles
- Fade? Card spin? So many possibilities.
- Tests
- Ensure all components render
- Keep current state with URL params to allow easy sharing of a search and the results
- On Welcome, display current headlines to inspire some something to search