Skip to content

Latest commit

 

History

History
44 lines (27 loc) · 1.91 KB

README.md

File metadata and controls

44 lines (27 loc) · 1.91 KB

React Test

This repository is documenting about react test

Project Description

Hello there, i will describe about this react test. First of all i need between 15-20 minutes to create this project, it look so long right? Because I didn't work on the React project for 1.5 months, that's why I needed a little warm-up to remember all react concepts. But if I hired, i will take a time to warming up for preparation, so when the project get started i ready to show my best performance.

If you look at my commit history, then you will see messages that are push gradually, because I remember the note "If you can deliver a good user experience" sentence "user experience" here I remember to make some improvements at some time, yeah so maybe that's a little explanation from me.

Thank you

Demo

https://react-testing-dzaki.netlify.app/

Scope

Create a simple/small image search engine connected to the pixabay api in ReactJS with this Mockup ( it’s a mockup, feel free to do your own UX/UI ):

We will need to be able to search for a color/ flower and you will retrieve data from pixabay and display it

Rules

  • Use at least once await and async functions (to get data from API)
  • Use UseEffect Hook
  • Use UseState Hook
  • Use Javascript ( no typescript )
  • Use Tailwind

Some features that may improve user experience to this react application

  • Image scaling when hover inside container
  • Responsive well
  • Showing modal contain detail information when image is clicking
  • Loading more features to show more images
  • Show not found message if user search something not found at pixaby database
  • Replacing avatar if not found with image placeholder, try image in 7 order

How to release

Please create a public github project with this small React JS Project and share the link with me !

Please let me know if there any better approaches for this case, thanks