A photo searching app where iMage the photo wizard will conjure up some images for you! Enter a search term, and let him work his magic to find related photos.

You can view it live here: https://image-search-app-ts-react.netlify.app/

It is a single-page application (SPA) for searching photos via the Unsplash API.

Created with React and TypeScript. This is my first project with TypeScript and using Hooks in React.

Deployed to Netlify

• Started by analysing the requirements of the project
• Noted initial thoughts/ideas
• Broke down requirements into user stories in a KanBan board on Miro
• Focused on the features needed to meet the requirements at a minimum + drew simple wireframe in Miro
• Further broke down each story into smaller tasks
• Worked with branches / pull requests for each of the smaller tasks
• Once I had a minimum working app, I focused on styling and adding features from my backlog that time permitted

• Decorative header for context (and a little bit of fun!)
• Search form: form fields consisting of label, text input and button, for user to enter search term
• Image list: once search term is submitted, relevant images will be rendered
• Pagination: max number of results presented per page
• Accessibility: Semantic HTML elements, form label associated with text input to ensure purpose of form control is presented to screen readers

UI/UX:

• Have a 'clear' option for the search field which resets the page
• Present the results in a masonry-style grid
• Feedback if there are no search results returned ('e.g. no results found, try again!'), and do not show page number when no results
• Improved pagination: next/previous buttons
• Mobile improvements: bigger form buttons, hide keyboard when submit clicked
• Homepage presented with random photos before user search
• Highlight text field when in focus
• Update URL with current page number
• Disable Search button until value is typed in
• The ability to click on an image and copy it's URL to clipboard (useful especially for developers wanting to use photos in their projects)

Accessibility:

• Update primary colour to meet contrast ratio guidelines (make darker, e.g. #0039F5 passes at normal and large text sizes) to ensure visibility for users with low vision
• Add section elements within for improved navigation between content

Development:

• Validation on search input
• Styling: Use of CSS variables/Sass for repeated styles + Sass modules to compile into one stylesheet
• Use of React Router for improved pagination
• Use of user keys: user to enter own API key (current key temporary for quick access for reviewer, will be changed and not included in future)
• Unit testing with Jest to include form submission and fetching data

In the project directory, you can run:

To install dependencies

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

Or view live: https://image-search-app-ts-react.netlify.app/

Thank you for reading - have a great day! ☀️