CONNECT IT-Solutions

Table of Contents

• Deployed Website
• Built With
• Getting Started
• Description
• Documentation
• Commit History
• Screenshots
• Contributors

Deployed Website :

NOTE: Heroku is planning to prevent free servers soon, so maybe when you see this, the website will not be there anymore.

• You can see the deployed website on Heroku here

Built With :

• Node js
• Express js
• MongoDB
• JSON Web Token
• React js
• Redux
• Material UI

Getting Started

This is a list of needed instructions to set up your project locally, to get a local copy up and running follow these instructions.

1. Clone the repository.

2. cd into backend folder and create a file named "config.env" and fill it with this fields with your information.

   
   

   NODE_ENV=dev
   PORT=[PORT YOU WANT]
   DATABASE=[CONNECTION STRING OF YOUR DATABASE]
   USER=[DATABASE USER NAME]
   DATABASE_PASSWORD=[YOUR DATABASE PASSWORD]
   JWT_SECRET=[YOUR JWT SECRET STRING]
   JWT_EXPIRES_IN=[DATE example: 1d "for one day"]
   JWT_COOKIE_EXPIRES_IN=[Date example: 1 "for one day"]
   

3. Follow this article to install node js and npm Install Node js and npm

   .

4. cd backend && npm i && npm start

5. cd .. && cd frontend && npm i && npm start

Description

This website was implemented for an internship program at Safecotech Company.
It is a website for submitting and solving tickets in the IT industry.
The client could be a company or a person and he is able to submit a ticket to be viewed by website admins and then answered, look on solved tickets before to see if he can find a problem similar to his one or manage his own currently being answered tickets.
The admins can see pending tickets that are not assigned to any admin yet, manage their own current tickets that the admin is discussing with client about it or see the solved tickets to look for a problem that might be similar to the problem he is currently solving.
Each user has information like name, email, company name, password and maybe a photo. He can update his photo at any time, sign up new account, log in, log out and delete his account.
Each ticket could has attachments (supporting any file type), title, description, comments, category(Network, Service, System and Telecommunications), priority(Ordinary, Important and Critical), project, created at date, client and admin if he assigned himself to the ticket.
If any admin wants to answer a ticket, he can assign it to him and discuss with the client and send him answers.
If the client finds that his problem is solved, he can close it and the problem will be moved to the solved tickets and has its answer.
This website is developed in React js for the frontend and in Node js for the backend using MongoDB for the database.

Documentation

You can see a documentation video for the website at Youtube Video Documentation

You can look on the API documentation at API Documentation

You can look on the documentation as a pdf file at PDF Documentaion

Commit History

Screenshots

1. Log In with email and password.

   

2. Sign Up with name, email, company name(optional), password and Upload a user photo(optional).

   

3. Empty "manage your tickets" after Sign Up.

   

4. Submit a new ticket, Category could be "Service", "System", "Network", and "Telecommunications". Attachments could be files of any type.

   

5. Another client at manage your tickets.

   

6. A client can "Update image", "Log out" or "Delete account"

   

7. Logged in with an admin account, opened "pending tickets", and opened a ticket with attachments.

   

8. Opened another pending ticket(If any attachment extension is not for an image like ".pdf" the user can click on it to open a new tab and see or download the attachment).

   

9. Admin assigned the ticket to him by clicking on the fingerprint icon.

   

10. Ticket is moved to "manage your tickets" for the admin and status became "being solved".

    

11. An admin trying to solve another ticket with title: "Database is down" and added comments.

    

12. Client(Owner of "Database is down" ticket) added a comment.

    

13. The admin reached out to an answer and added it.

    

14. Client is satisfied with this answer and clicked on Close Ticket Icon(if he is not satisfied he can continue discussing with the admin to make the admin submit other answers).

    

15. Ticket status became solved, final answer is shown, and the ticket will be moved to "solved tickets" to be seen by other users.

    

16. Another client is looking on "solved tickets" and the recently solved ticket is there with the answer.

    

17. Filter Tickets(Filters could be applied at any where: "manage your tickets", "solved tickets" and "pending tickets").

    

18. Sort tickets on priority, status, and/or Created at date.

    

19. Choose the project, category and/or title to search with.

    

20. Applying sorting tickets on "Created at" date to be from old to new.

    

21. All pending tickets after applying the "Created at" date filter.

    

22. Update a user photo.

    

23. User's photo is updated.

    

Contributors

Frontend

Yousef Khaled

Backend

Moaz Mohammed