Description | User Stories | Mockups | App Showcase | Features | Improvements | Installation Instructions | Credits

Search bar application that displays relevent images to searched keywords - displayed in a neat grid format.

Tech Stack: JavaScript, React, Node, CSS, HTML, Jest, Enzyme, Axios, Webpack, Babel, CircleCI, Code Climate, Firebase

You'll find the app here, use cmd/window + click to open in a new tab.

As a user, when I use Image Search.
I expect to see a search bar, where I can input text to search for the type of images I want to see.

As a user, when I use Image Search. 
When I have entered a search term and clicked enter to submit the search,
I expect to see a relevent images, laid out on a flexible grid. 

• Search Bar (Using UnSplash's API)
• Image Display Grid

• 100% Test Coverage
  • Learn how to test axios
  • Learn how to test my ImageCard component
• Add styling
• Rebuild the app from scratch using TDD

Clone this repository from github then change directory into it.

$ git clone [email protected]:BenSheridanEdwards/Image_Search_React.git
$ cd Image_Search_React

From inside the project folder, you can run npm start in the terminal to launch the app in the browser.

$ npm start

Launching the app from the command line should open up a new tab in your default browser. If it doesn't, you can navigate to http://localhost:3000 to view the application.

From inside the project folder, you can run npm test in the terminal to run the test suite.

$ npm test

From inside the project folder, you can run 'npm test -- --coverage' in the terminal to see the code coverage for this project.

$ npm test -- --coverage

This project was bootstrapped with Create React App.

This project was tested with Jest & Enzyme.

This project uses continuous integration and deployment with CircleCI & Firebase.

This project utilises Code Climate to ensure high code quality.