Frontend

Uspolis Admin Frontend 🏛

This is the documentation for the frontend of Uspolis Admin application, made in React

Running

Make sure that you have Node.js installed

Clone the repository:

git clone https://github.com/PCS-Poli-USP/USPolis-Admin-Frontend.git

Install the dependencies:

npm install

Start the project:

npm start

Libraries

The main library used is Chakra UI, that is a component library for React. For data visualization we use TanStack library, specifically is used a datatable maded with the TanStack Table. Finally for allocation visualization, is used Fullcalendar library, either standard views and custom views are used.

Design patterns

Colors

Main colors used are:

Uspolis-Blue: #408080
Uspolis-Gray: #CCCCCC

Otherwise we use colour scheme in components that are from Chakra.

Font-Family

Ubuntu and Sans-serif

Icons

Is used IconButton in several pages, the source of icons is from ReactIcons, particullary we use Bootstrap Icons, here is the list of icons used:

BsFillPenFill with yellow colorScheme for edit button

BsFillTrashFill with red colorScheme for delete button

BsClipboardCheck with Uspolis-Blue for preferences button

BsCalendarDateFill with teal colorScheme for allocation button

Feedbacks

For feedbacks messages we use Toast, we use success and errors toasts for giving the user a feedback after create/edit/delete a class, classroom etc.

The configuration used:

const toast = useToast();

const toastSuccess = (message: string) => {
  toast({
    position: 'top-left',
    title: 'Sucesso!',
    description: message,
    status: 'success',
    duration: 3000,
    isClosable: true,
  });
};

const toastError = (message: string) => {
  toast({
    position: 'top-left',
    title: 'Erro!',
    description: message,
    status: 'error',
    duration: 3000,
    isClosable: true,
  });
};

And the result is: