Ecologi Trees
Local Setup
To run the project locally make sure to have installed Node.js and Yarn then launch in the terminal:
yarn install && yarn dev
This will open up the local development of Next.js on localhost:3000
Live Online Demo
You can find an online version of this project here: https://ecologi-trees.vercel.app
My Approach to the Solution
- First I cleaned up the API response on the server side, optimizing it once for all users. I grouped the items by day and ordered all the dates in chronological order;
- Then I switch to the Frontend, looking for the right library to showcase the Graph quickly, I choose "recharts" being one of the most used with React and also being currently supported;
- Finally I decided to revalidate the data from the API every 10 seconds with Next.js
revalidate
option.
Libraries used
- "next", "react", "react-dom" to use React with Next.js;
- "recharts" used as the library to display the number of trees daily;
- "styled-components" used to style the UI elements like on ecologi main site.
Optimizations to the API?
In a production version of the API I would:
- Group by Days the items;
- Order results from API by dates to make it chronological;
- Add filters to make it possible to query specific timeframes.