π 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/
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).
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.
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.
βοΈ 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
- ReactJs
- React Hooks
- React Router
- React Icons
- React Toastify
- AuthContext
- Firebase
- Styled Components
- Date-fns
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>
Thanks to the following people who contributed to this project:
Kayke Fujinaka |
This project is under license. See the LICENSE file for more details.