React, Material UI 5 e Typescript

React website with custom theme that can be managed by the user, developed in React and site management using context

---

Project developed with React, using context of the React for custom theme functionality.

This implementation enabled a fully customized interface with immediate visualization and application.

Main tools

• Node.js
• Typescript
• React
  • Material UI
  • Unform
  • Yup

How to start the project

1. Download the project by running a git clone

git clone https://github.com/andresinho20049/Curso-de-React.git

2. Inside the project folder type:

npm run start
# or
yarn start

Note: To run this project you will need to have Node installed on your machine.

3. And you also need to start in Json Server:

npm run mock
# or
json-server -w ./mock/db.json -p 4000

4. After installing the project dependencies and generating the build, it will open in your browser at the url: http://localhost:3000/

5. On the login screen, log in with: User: admin@admin.com Password: 1234

Custom Theme

How was it developed?

• ModalCustomThemeContext:
  • ModalCustomThemeContext is a context that encompasses the entire Dialog component used to customize the theme
  • ModalCustomThemeContext has a State with ThemeOptions typing
  • In the AppThemeContext(main Context that encompasses the entire App), there is a PersistentState(State that stores in localStorage) This persistentState stores the Custom Theme and if it does not exist, it creates a new ThemeOptions.
  • Then in the ModalCustomThemeContext a new state is created with the values of the AppContext's custom theme as initial data, so when the user enters the modal, the theme's attributes will have the values previously saved by them.
  • In the ModalCustomThemeContext, customThemeProps and setCustomThemeProps are created based on data from the custom theme or the current theme. Like this:

  const { customTheme, setCustomTheme, setThemeName } = useAppThemeContext();
  
   const currentTheme = useTheme();
   const [customThemeProps, setCustomThemeProps] = useState<ThemeOptions>(customTheme || currentTheme as ThemeOptions);
  

  • The ModalCustomThemeContext receives the setCustomTheme and setThemeName methods, because when the user confirms editing the custom theme, a callback is executed within this context that updates the persistentState and changes the current theme to the custom theme.
  • Within this same context, there is a useMemo that executes whenever customThemeProps is updated

  const theme = useMemo(() => {
       return createTheme(customThemeProps);
  
   }, [customThemeProps])
  

  • This theme generated after running useMemo is used to update the preview theme within Dialog.
  • The provider of this context returns:
    • theme: Theme to update preview
    • customThemeProps: used in the form to edit theme
    • setCustomThemeProps: Executed in the Form's onChange
    • applyTheme: Executed on Form Submit
• ModalCustomTheme:
  • ModalCustomTheme is the child Dialog/Modal of the context explained above

  {
     "ModalCustomThemeContext":{
        "ModalCustomTheme": {
           "SettingCustom": {},
           "ThemeProvider": {
              "PreviewCustom":{}
           }
        }
     }
  }
  

  • Above I try to illustrate what the structure of ModalCustomTheme would be like, the important thing to emphasize in this representation is the Parent/Child hierarchy.
  • With the context encompassing the entire Dialog, it is possible within the entire component to retrieve/manipulate data, and thus execute actions from the context. And with Preview being a child of ThemeProvider, it is possible to receive the theme generated by useMemo from ModalCustomThemeContext and apply this theme to the preview.

Preview

Libraries used

I will talk a little about the tools/libraries used, why they were developed in such a way, mainly the points that were developed differently from the approach used in the course.

Material UI 5

Material UI is a React UI component library that implements Google's Material Design.

Axios

Axios is a Promises-based HTTP client for making requests. Axios brings some advantages and simplifications, making it better to use than just Fetch, such as simple configuration, automatic JSON conversion, Interceptors, etc...

Uniform

Unform, forms API, advantage in using it because it does not use state, so when it is typed in the input, the other inputs do not suffer rendering.

Yup

Yup is a JavaScript schema builder for value analysis and validation.

Bcrypt

Bcrypt optimized in JavaScript with zero dependencies. Compatible with bcrypt C++ binding in node.js and also working in browser. Used in this project to save an encrypted password and compare the hash in the login service.

Js-Cookie

A simple and lightweight JavaScript API for handling cookies

JsonServer

Rest API (Fake), used for mocking.

Considerations

It is important to emphasize that the security/authentication requirements of this application are not valid for a service in production, in a real development scenario, there will probably be a back-end service that will possibly perform an Oauth2 authentication and return a JWT token.

Json Server was used, thus replacing the "back-end", therefore disregarding security requirements, the focus of this project is front-end development with React and Material UI.

Developer André Carlos
Project: React, Material UI 5 and Typescript
Backend: JsonServer