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!