Technologies Used

The components of the web-app are built using the core components of React. The theme also constantly incorporates various other latest technologies.

• React
• Material Design
• Styled Components
• React Router

React

React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes. Declarative views make your code more predictable and easier to debug. Build encapsulated components that manage their own state, then compose them to make complex UIs. Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM.

Material Design

Material is a design system created by Google to help teams build high-quality digital experiences for React, Android, iOS, Flutter, and the web. Material Design is inspired by the physical world and its textures, including how they reflect light and cast shadows. Material Design is guided by print design methods — typography, grids, space, scale, color, and imagery — to create hierarchy, meaning, and focus that immerse viewers in the experience. Material surfaces reimagine the mediums of paper and ink. With the components from the Material-UI library it’s very easy to make use of Material Design elements in your React web or mobile application. The library’s website can be found at: https://material-ui.com.

Styled Components

Styled-components is the result of wondering how we could enhance CSS for styling React component systems. By focusing on a single use case we managed to optimize the experience for developers as well as the output for end users. Utilising tagged template literals (a recent addition to JavaScript) and the power of CSS, styled-components allows you to write actual CSS code to style your components. It also removes the mapping between components and styles – using components as a low-level styling construct could not be easier!

React Router

Components are the heart of React's powerful, declarative programming model. React Router is a collection of navigational components that compose declaratively with your application. Whether you want to have bookmarkable URLs for your web app or a composable way to navigate in React Native, React Router works wherever React is rendering.