# 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