README.md

Welcome to Reaccoon web app

How to run and use the app ?

Run the app

First, create a .env.local file in the root of the project with the following content :

REACT_APP_API_URL="http://localhost:8080/api/reaccoon"
PORT=8081
REACT_APP_GOOGLE_CLIENT_ID="your google client id"

To launch the app in dev mode do the following commands:

npm install

Then:

npm start

You can also use docker to run in dev mode :

sudo docker-compose -f docker-compose.dev.yml up

Use the app

You have a full documentation on how to use the app on the docs file.

Technical documenations ⚙️

This web application is using React with TypeScript.

Data fetching

The state management and the API's calls are using Redux Toolkit Query.

All the API's call are located in the serviceApi.ts file.

Example :

This will call the route /service of the API.

    services: builder.query<Service[], void>({
      query: () => "/service",
      providesTags: ["Service"],
    }),

And this is how to get the result of your fetching (in the serviceInfo) element :

const {
  data: serviceInfo,
  refetch: refetchServiceInfos,
  isFetching: isFetchingServiceInfo,
} = useServiceQuery(service.name);

If you want more informations about how to use the Redux Toolkit Query, check out the documentation.

UI elements

All the UI elements are taken from the Material UI library.
Animations are taken from Framer Motion library

Colors be must strictly respect the graphical chart of the Reaccoon project.
A MUI palette is set in the App.tsx file to make sure buttons will respect the right colors :

const themeMUI = createTheme({
  palette: {
    primary: {
      main: "#0165F5",
    },
    secondary: {
      main: "#a37c5b",
    },
    warning: {
      main: "#FFF7FA",
    },
  },
});

For all other elements, please use the theme located in the ./constants/theme.ts :

const themeConfig = {
  palette: {
    common: {
      black: '#000',
      white: '#fff',
      grey: '#E2DDFF'
    },
    primary: '#0165F5',
    secondary: '#a37c5b',
    background: '#FFF7FA',
  },
  spacingUnit: 8
};

As you can see the three main colors of the Reaccoon project are :
The blue : #0165F5
The brown : #a37c5b
The white : #FFF7FA

Folders organization

All new component must be function that renders JSX code.
Component that represents a whole page must be located in the pages folder, the rest must be located in the components folder.
The tottality of your css files must be located in the styles folders.

👥 Authors 👥

DevOps & Backend Team :

• @martinvanaud
• @tibo-pdn
• @Gurvan-Le-Letty

Mobile & Frontend Team :

• @maxime-carabina
• @victorpalle
• @Clement-Fernandes