You will build analytics system that would present usage analytics about a website by collecting events sent to the platform (similar to Mixpanel.com).
- Add controls for time-ranges in relevant charts (you can implement it in any way that still works with the default requirements)
- Showing events on Google Map (cluster events).
you can use whichever library you choose, but this one is recommended) - Showing graph with unique sessions by day with option to change date
- Showing graph with unique sessions by hour with option to change date
- Showing retention cohort week by week
- Showing log of all events - search option and filter by event name using regex.
The Events Log
should load only 10 events, and load more only when the client scrolls down the log, order by time.
- Showing page views for on each page.
- Showing pie charts with users by operating system usage.
- use mongodb Atlas
- POST "/event" - adding new event to event collection.
- Any other entry point needed.
Sample of event (you can add any other properties you if wish):
{
"_id": "VATb6bdcOEW",
"session_id": "d788bae3-6909-49a2-a54a-6d50d35b3c70",
"name": "signup",
"distinct_user_id": "O-5mFsaxp9",
"date": 1603316369846,
"os": "ios",
"browser": "chrome",
"geolocation": {
"location": {
"lat": 81,
"lng": 86
},
"accuracy": 1708
},
"url": "http://localhost3000/signup"
}
- Add Error Boundaries around each tile (chart).
- Use Styled Components for styling.
- Make it responsive for any screen size.
- Showing time per url per user
- Showing time spent on each page by all users.
- Make your own custom tiles.
- Make the tiles resizable.
- Creating piece of code that send events from clients to the server and save it.
- Add an option to change chart type (pie | bars | line) in the same tile
- Make the tiles move by drag and drop.
- Make the time-frame adjustable on all charts
- While loading data show loading indicator you built using canvas tag
- Add any feature you wish
Upload your clienet and server to Github and submit the repository link to the Exersice on google classroom