---
# System prepended metadata

title: Full Stack Reporting Site Design

---

# Full Stack Reporting Site Design
> [TOC]

Sources:
* [Analyst Perspective](https://medium.com/codex/5-super-useful-websites-for-data-analysts-e07629a93b74)
* f

Extra tools:
* Kaggle.com
* Stackoverflow.com
* Excalidraw.com
* Google Trends (trends.google.com)
* Flaticon.com


Back end - connected to datawarehouse and provides api for front end handling huge loads from warehouse with no possibility of crruption due to one way data transmission i.e read not write.

tasks: 
custom raw sql for what data to be sent for analysis , the kpi and relevant dimensions.
what types of visulisations to use and how to implement them using api.

hidden one:
implement the ui with reactjs, with elements in place with style and usability.

The impl fast forwarded:
frontend in vanilla
back end django
no model
custom query
d3 simple bar
new elements need addition but on getting review, we will see


RECREATE THE FRONT END:
why? the front end is of more importance
mine was clumsy

how? proper steps and methodologies

1. front end framework chosen is, react. why? Because they provide structured and efficient way to build dynamic web application
2. set up project structure - react does it on installation - cli from framework and folder for comps, pages , assets etc.
3. design a layout. why? determine placement of navbar, sidebar, login etc. suggestion: figma , adobe xd
4. navigation  - reusbale nar that includes navbar and sidebar,why? consistent across pages. how? using routing library to handle navigation between different pages
5. login and setup pages - form component, user input and validation, auth library to handle authn
6. embed pbi
7. optimise how? minimize filesizes, bundling and minifying js and cs. lazy loading when applicable, and omptimise image assets -> webpack parcel  automate n stuff
8. test - debug how? jest and cypress why> smoother ux
9. deploy - extra; cicd
10. iterate improve