📞 CALL SYSTEM

🔎 The Call System or Call System is a tool used to centralize user demands. It serves to establish a management routine for these requests.

🗔 Check out the app: https://www.linkedin.com/in/kayke-fujinaka/

📄 Explanation

The project was carried out using the framework ReactJs connecting with Firebase which helped with authentication, registration, login and data persistence.

🎲 How ​​the Project Works

It serves to establish a management routine available to the user, having some functionalities, such as, for example, creating a ticket, registering a company, editing ticket/customer information, editing the profile, etc.

The user can create clients or companies, which will be registered within the site, being able to create calls later.

If the user wants to register a call. He needs to put:

• Which customer needs this service. Thus, a list of some companies will appear;
• The subject that needs to be addressed or discussed;
• The status of the call, namely: In Open, In Progress or Answered;
• Complete that serves to better describe the problem, aiming to have a more effective communication (Optional).

⚠️ Notes

The visitor will not have access to private routes. If you have not registered or logged in to the site. Therefore, whenever he tries to access the URL without being registered/logged in, he will be redirected to the homepage.

In addition, the user will not be able to return to the home page when already logged in. Thus, he will need to log out on the Profile page to return to the Login or Registration screen.

📁 Pages

The site has a total of 5 pages, which are:

• Login: The page to login and access the site.
• Registration: The page that has the functionality to register users on the site and thus have access to other private pages.
• Dashboard (Private): The page that has the functionality to record tickets.
• New Ticket (Private): The page that has the function of adding a new ticket on the Dashboard.
• Customers (Private): The page that has the functionality to register a company, putting the company name, CPNJ and the company address.
• Profile (Private): The page that presents the information (name, email and avatar) of the registered user, which has the functionality to edit them, except for the email.

🎯 Steps

✔️ Global Project Styles
✔️ Adding Firebase
✔️ Login and Registration Page/Routes
✔️ Login and Registration Structuring/Styling
✔️ Dashboard Page/Route (Private Route)
✔️ Context Created
✔️ Importing Firebase Tools
✔️ Login/Register functionality with Firebase
✔️ Adding Toastify
✔️ Header component
✔️ Component Title
✔️ User Profile Page/Route (Private Route)
✔️ Profile Structuring/Styling
✔️ Edit Profile
✔️ Customers Page/Route (Private Route)
✔️ Customers\ Structuring/Styling ✔️ Register a Company in Customers
✔️ Dashboard Refactoring
✔️ Dashboard Structuring/Styling
✔️ New Page/Route (Private Route)
✔️ Functions on the page for new tickets
✔️ Option to search ticket in Dashboard
✔️ Modal Structuring/Styling
✔️ Edit ticket
✔️ Finished Project --- ⚙️ Extra ---
✔️ Adding Styled-Components

🚀 Technologies

• ReactJs
• React Hooks
• React Router
• React Icons
• React Toastify
• AuthContext
• Firebase
• Styled Components
• Date-fns

📕 How to use it?

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

# Clone this project
$ git clone https://github.com/Kayke-Fujinaka/Call-System

# access
$ cd call-system

# install dependencies
$ yarn or npm

# Run the project
$ yarn start or npm start

# The server will initialize in the <http://localhost:3000>

🤝 Collaborators

Thanks to the following people who contributed to this project:

Kayke Fujinaka

📝 License

This project is under license. See the LICENSE file for more details.

 

Go back to top