aleeweb / plant-finder Goto Github PK

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

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

Clickable Prototype Demo: Adobe XD Flipping Card

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

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

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

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.

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!

• 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!