This goal of this document is to provide an opinionated outline of what the perfect FE codebase would look like in the Raygun platform & how to achieve it.

No need to complicate things, let’s keep it simple.

🖼️ Picture perfect

What does the ideal FE world look like?

🥅 Goals

Goal	Reasons
Fewer dependencies	Less maintenance required
	Less to learn = Easier learning curve & Onboarding
Standardised folder structure	Replicable, Predictable
Standardised technologies
Modern technologies and implementations	Engineers upskill in technologies that are cutting edge = Easier to hire people / job benefit
	Easier to find help & resources online
Follows headless architecture	Separation of concerns

Business logic in the back end
What you see & ‘feel’ in the frontend | | | Aids our API first strategy | | | Agility to move the FE stack in the future with ease | | Design systems are fully implemented | Easier to build features | | | Easier to complete site-wide improvements | | | Provides design with a toolkit |

🔨 Technologies

React - Library for building the UI based on components

ReactRouter - Enables "client side routing”

Redux - Library for managing and centralizing application state

React Redux - Official React bindings for Redux

Redux-toolkit - The official, opinionated, batteries-included toolset for efficient Redux development

~~Webpack - Module bundler to allow us to ship the code~~

Vite - Mordern module bundler

Axios - Promise based HTTP client for the browser

~~Grunt - JavaScript task runner so we can automate & chain various repetitive tasks~~

Yarn - Preferred dependency packaging system

eCharts - Charting library

Scss/Sass - Style management language of choice