System Calling App

System for better management of a company's services and customers.

🚀 Aplication link

Link: http://jgsl-systemcalling.netlify.app

🔧 Adjustments and improvements

✔️ The project has been finished.

• Routes with react router dom
• Pages home, login and register
• Components title and header
• Pages dashboard, customers and profile
• Authentication and data storage in firebase
• Route privatization
• Pages allcustomers and new
• Component modal
• JSX
• Stylization with CSS
• Use the react toastify library
• Responsiveness

📁 Pages

• Home: the user chooses between logging in or registering.
• Login: the user logs in.
• Register: the user registers.
• Dashboard: screen that shows all the calls already registered, it is also possible to register a new call by clicking on the 'New call' button.
• Customers: on this screen the user can register a new customer and see all the items already registered.
• Profile: in the profile section, the user can log out or edit their data: 'photo', 'number' and 'name'.
• AllCustomers: the user has the analysis of all registered customers.
• New: section to register new users.

🎮 How project works

O projeto consiste num sistema onde o USUÁRIO tem um melhor gerenciamento do seu negócio, podendo cadastrar clientes e chamadas de serviços, como:

• A empresa/cliente X contratou Y serviço. O serviço está em progresso, foi criado na data ZZ/ZZ/ZZZZ e o assunto é sobre as finanças da empresa X.

A primeira página do projeto é onde o usuário escolherá entre login ou se cadastrar na plataforma. Após a escolha e o efetuamento do login ou cadastro, o usuário será redirecionado para a 'Dashboard', página principal do sistema e receberá um toast de boas-vindas.

Já logado, o usuário tem acesso ao sistema com 3 seções no menu lateral (se estiver no Desktop), caso a largura da tela seja menor que 600px o menu estará na parte superior. Essas seções são dividas entre 'Dashboard' (página principal), 'Clientes' e 'Minha conta'.

Na seção 'Dashboard', o visitante tem acesso a todos os chamados registrados, caso não haja nenhum haverá um botão para cadastrar novos chamados. Os chamados são listados numa tabela ordenada pela data, os últimos a serem cadastrados serão os primeiros a aparecerem na lista.

Na seção 'Clientes', o usuário terá acesso a lista com todos os clientes/empresas e também poderá registrar novos clientes/empresas.

Na seção 'Profile', o usuário terá a possibilidade de alterar seus dados pessoas, cadastrados previamente na página 'Register'.

⚠️ Detalhes

O usuário conseguirá acessar a home apenas se estiver logado. Caso não esteja, ele será redirecionado para a Home.

O usuário já logado também não conseguirá voltar para a Home, pois não tem sentido ele logar novamente.

O usuário já logado só pode acessar a Home, caso efetue o log out, no menu Profile, no botão 'Sair' localizado no canto superior direito da tela.

👨‍💻 Technologies

Technologies and libs used in the project:

• HTML
• CSS
• JavaScript
• ReactJS
• Firebase
• React-Router-Dom
• Undraw Illustrations
• LocalStorage
• React Hooks
• React-Icons

🤝 Collaborator

João Guilherme

📕 Requirements

Before starting 🏁, you need to have Git and Node installed.

🏁 Starting

# Clone this project
$ git clone https://github.com/jguilhermesl/system-calling
# Access
$ cd system-calling
# Install dependencies
$ yarn or npm 
# Run the project
$ yarn start or npm start 
# The server will initialize in the <http://localhost:3000>