neo-todo-api/frontend/README.md

# Neo Todo App Frontend

## Dev Log

### Styling the frontend

- Used the [MUI](mui.com) React component library using Material Design by Google.
- Font used is `Roboto`. Font is imported to `src/App.tsx`.

#### Use ThemeProvider

To override the default MUI looks, we create a ThemeProvider at `src/ThemeProvider.tsx`.

#### React Hook useMemo

useMemo is a React Hook that lets you cache the result of a calculation between re-renders. Made for running expensive synchronous operations less often.

#### MUI (Material UI)

##### Palette Mode

Change default component colors to suit one's needs.

##### CSSBaseline

Reset the CSS injected into `<head>`. A collection of HTML element and attribute style-normalizations, you can expect all of the elements to look the same across all browsers.

##### useMediaQuery

This React hook listens for matches to a CSS media query. It allows the rendering of components based on whether the query matches or not.

##### Container's maxWidth

This will make sure Material UI's Container will not expand to fill the entire screen and instead just stop expanding at around 960px (which is `md`).

### Configure the page's title (Browser Tab Text)

Use `react-helmet-async`, wrap it around the `App` in `App.tsx`.
Feat(Frontend): Reset 2023-07-21 15:34:16 -04:00			`# Neo Todo App Frontend`
Initial commit 2022-11-18 16:08:50 -05:00
Feat(Frontend): added ThemeProvider - ThemeProvider will change the default Material UI looks. CSSBaseline in ThemeProvider will reset and normalize the browser's styling, making sure our app looks the same in any browser. - ThemeProvider will be used as the parent of any styled components. 2023-07-21 17:57:13 -04:00			`## Dev Log`
Initial commit 2022-11-18 16:08:50 -05:00
Feat(Frontend): added ThemeProvider - ThemeProvider will change the default Material UI looks. CSSBaseline in ThemeProvider will reset and normalize the browser's styling, making sure our app looks the same in any browser. - ThemeProvider will be used as the parent of any styled components. 2023-07-21 17:57:13 -04:00			`### Styling the frontend`
Initial commit 2022-11-18 16:08:50 -05:00
Feat(Frontend): added ThemeProvider - ThemeProvider will change the default Material UI looks. CSSBaseline in ThemeProvider will reset and normalize the browser's styling, making sure our app looks the same in any browser. - ThemeProvider will be used as the parent of any styled components. 2023-07-21 17:57:13 -04:00			`- Used the [MUI](mui.com) React component library using Material Design by Google.`
			- Font used is `Roboto`. Font is imported to `src/App.tsx`.

			`#### Use ThemeProvider`

			To override the default MUI looks, we create a ThemeProvider at `src/ThemeProvider.tsx`.

			`#### React Hook useMemo`

			`useMemo is a React Hook that lets you cache the result of a calculation between re-renders. Made for running expensive synchronous operations less often.`

			`#### MUI (Material UI)`

			`##### Palette Mode`

			`Change default component colors to suit one's needs.`

Feat(Frontend): Authentication Context 2023-07-21 22:22:19 -04:00			`##### CSSBaseline`
Feat(Frontend): added ThemeProvider - ThemeProvider will change the default Material UI looks. CSSBaseline in ThemeProvider will reset and normalize the browser's styling, making sure our app looks the same in any browser. - ThemeProvider will be used as the parent of any styled components. 2023-07-21 17:57:13 -04:00
			Reset the CSS injected into `<head>`. A collection of HTML element and attribute style-normalizations, you can expect all of the elements to look the same across all browsers.

Feat(Frontend): Authentication Context 2023-07-21 22:22:19 -04:00			`##### useMediaQuery`
Feat(Frontend): added ThemeProvider - ThemeProvider will change the default Material UI looks. CSSBaseline in ThemeProvider will reset and normalize the browser's styling, making sure our app looks the same in any browser. - ThemeProvider will be used as the parent of any styled components. 2023-07-21 17:57:13 -04:00
			`This React hook listens for matches to a CSS media query. It allows the rendering of components based on whether the query matches or not.`
Feat(Frontend): Authentication Context 2023-07-21 22:22:19 -04:00
			`##### Container's maxWidth`

			This will make sure Material UI's Container will not expand to fill the entire screen and instead just stop expanding at around 960px (which is `md`).

			`### Configure the page's title (Browser Tab Text)`

			Use `react-helmet-async`, wrap it around the `App` in `App.tsx`.