Skip to content

Latest commit

 

History

History
63 lines (33 loc) · 3.12 KB

README.md

File metadata and controls

63 lines (33 loc) · 3.12 KB
Raw

Plant Finder

Live App URL: https://jhu-code-challenge.herokuapp.com

Initial Wireframe: https://i.imgur.com/TEciPcs.jpg

Clickable Prototype Demo: Adobe XD Flipping Card

Plant Finder Screenshot

My Creative Process and Execution

1.I evaluate and analyze the data.

I create questions to think before I dive into the code

I examine the data set and size to see what kind of data is available. Then I create questions to think before I dive into the code

Who would benefit from using the data set?

Answer based on the DataSF website, Anyone who is interested in:

  • Greening neighborhoods
  • Enhancing our urban ecology
  • Surviving the drought.

What is the goal of the application?

To clearly communicate the data to the user. Make sure the user experience isn't confusing by balancing out the animation and effects with clear and consise UI.

I tried to make the data interesting and fun by making the cards flip to display hidden data under the "Interesting Fact" section that I created on the back of the cards.

flipping card UI UX

What are the project requirements?

To search and filter San Francisco plants

2. Visual Brainstorm during the early stages.

Quickly create wireframes, mock-ups/ Prototypes to visually brainstorm how I would like to layout the content for the app.

Wireframe: https://i.imgur.com/TEciPcs.jpg

Clickable Prototype Demo: Adobe XD Flipping Card

3. Based on the data, project requirements and app purpose, I research technology options that will visualize the data in the way I would like.

4. Select the technology stack for the app and start coding!

Why did I choose React for this project?

  • To avoid reloading the entire page every time the data changes by using the React Virtual DOM. React only updates what is necessary making it FAST!
  • The Plant Finder API Endpoint is already hosted externally so I felt no need to go full stack for this project. I simply used the "view" layer known as React and pulled in the API JSON.
  • React provides modular code that is concise thanks to ES6 JS syntax!
  • There are so many awesome technology tool options, libraries and packages to use within React!