<!--  -->

<p style="text-align: center";> The Islamic University – Faculty of Engineering
Computer Engineering Department
</p>
<hr />
<h1 style="text-align:center; font-weight: bolder"> Systemic Mock Interviews </h1>
<h4 style="text-align: center">
Final Graduation Project Report<br>
<br >
Submitted in Partial Fulfillment of the Requirements<br>
<br>For<br>
<br>
The Bachelor of Science Degree in Computer Engineering
</h4>
<h2 style="text-align:center; margin-top: 80px; font-weight: bolder";>
<!-- By -->
Students
</h2>
<div style="text-align:center">
<div style="display: inline-block;margin-right:3% ">
<h3 style="text-align: center">Amran Elmasri</h3>
<h3 style="text-align: center">Abdallah Alsharif</h3>
</div>
<div style="display: inline-block;margin-left:3%">
<h3 style="text-align: center">Mahmoud Elhato</h3>
<h3 style="text-align: center">Tareq Abu Aqlain</h3>
</div>
</div>
<hr />
<h3 style="text-align:center; font-weight: bolder">
Supervisor
</h3>
<h3 style="text-align:center;">
Dr. Ahmed Mahdi
</h3>
<hr />
<h4 style="text-align:center; font-weight: bolder">
Acknowledgment
<br>
</h4>
<p>
We would like to express our deepest gratitude to our supervisor, Dr. Ahmed Mahdi, for his invaluable guidance, support, and expertise throughout the duration of our graduation project. His insightful feedback, constructive criticism, and dedication have played a crucial role in shaping the success of this project.
Furthermore, we would like to acknowledge the contributions of the four students involved in this graduation project. Each member has demonstrated exceptional commitment, teamwork, and technical skills, which have been instrumental in the development and completion of the project. Their individual efforts and collaborative spirit have truly made this project a remarkable achievement.
We extend our sincere appreciation to Dr. Ahmed Mahdi and our fellow team members for their unwavering commitment and contribution to this project. Their guidance, encouragement, and collaboration have been pivotal in making this graduation project a valuable learning experience and a stepping stone in our academic journey.
</p>
- # Introduction
- Interviewing is an ability that someone will need throughout their career in many fields; it is important to develop this skill early on. If someone has little interview experience, has not had an interview recently, or is anxious about the interview process, they may want to seek out opportunities to practice this skill. Interviewing skills are useful in many different career paths and can be intimidating, but like any other skill, the best way to improve is to learn the basics, prepare, and then practice. This experience will help the interviewee be better prepared for interviews and allow them to reflect on feedback from their interview partners.
- Whether someone is interviewing for a job or other important opportunity, they will be evaluated based on labor market requirements. As someone prepares for the interview, it is important to remember that successful interviews involve more than just getting an offer - there is also the skill of managing the interview itself. The interviewer is looking for an excellent employee who will contribute positively to the organization and who has the skills and desire to succeed.
- As you look for opportunities, it is important to find something that you enjoy and are good at. Successful interviewers keep this balance in mind. If your only focus is on getting an offer, you may end up misrepresenting yourself or neglecting your own needs, leading to a job that you don't want or don't enjoy. This can be detrimental to both you and the employer, as it leads to a waste of valuable time. To present yourself in the best light and increase the chances of finding a job that you will be satisfied with, it is important to prepare carefully, research the job you are applying for, and present your most professional and authentic self in your interviews.
- This is what you will practice in this experiment. By participating in this experiment, you will have the opportunity to improve your interviewing skills and be better prepared for any future opportunities that may come your way, whether it be for a job, training, or anything else you may be competing for.
<div>
- # Problem Statement
- <b> Practice makes perfect </b> (Really, this is very strong statement): The more you practice the various scenarios you could encounter in a job interview, the more you will be prepared. You’ll be able to show off all the research you’ve done on the company, because you’ll know the information inside and out.you’ll have an answer ready because you’ll already have heard them (or one like it) during the mock interview. You will also have plenty of time to practice consistent eye contact and positive body language, as well as display confidence and enthusiasm.
- <b> Feeling stressed after real interview questions</b>: (Be consistent with small letter and capital letters) Job interviews are nerve-wracking and stress-inducing. Under pressure, There are several tricks to help you calm your nerves, but none will serve you as well as solid knowledge, preparation, and practice. Mock interviews give you the opportunity to shake out those jitters during several practice runs.
- <b>Critical feedback about your performance makes perfect </b>: When you role-play with someone who understands you, the position you want, and the industry you hope to enter, you can receive helpful feedback about what you’re doing right – and wrong. Take that feedback your interview skills. Mock interviews with trained career specialists can be particularly valuable because they can give you tips on what hiring professionals in your field may be looking for, ways you can prepare, how to handle your nerves, and best practices for following up after an interview.
- <b>Confidence during the real interview makes perfect</b> (Avoid strong statement): Have you ever done well on an exam because you knew the material? Mock interviews are like study sessions that build your ability to perform well and boost your confidence. Studies suggest that the power of positive thinking and self-confidence help applicants to do better in interviews.
- # Specification/Requirements
- customer requirements are the specifications of what customer need or expect from a software system or application. These requirements are a crucial aspect of software development as they form the foundation for the design and development process, ensuring that the resulting product is fit for purpose and meets the needs of its intended customer.
- In order to determine customer requirements, it is necessary to conduct a thorough analysis of the customer and their needs. This can involve various methods such as interviews, surveys, focus groups, and observation of user behavior. By gathering this information, you can gain a deeper understanding of the customers' needs, preferences, and goals.
- customer requirements typically encompass a range of factors, such as the functionality and features that the customer requires, the performance and reliability of the system, the usability and user experience, and any constraints or limitations that may apply. The requirements may also include any legal, regulatory, or ethical considerations that need to be taken into account.
- In software development, customer requirements are often documented in a requirements specification document or a user story. This document outlines the user requirements in detail, providing a clear and concise description of what the software system should do, how it should behave, and what features it should provide. This document is used as a guide for the development team and forms the basis for testing and validation of the system.
- Overall, customer requirements are a critical part of the software development process, ensuring that the final product meets the needs of its customers and provides the functionality, usability, and performance that they require.
</div>
<div>
- ### **List of the specifications/requirements**:
1. **Functional Requirements**:
* Ability to create an account and log in
* Implement user registration functionality using React.js for the front-end development.
* Develop user authentication and validation using Node.js for the back-end development.
* Integrate with a MongoDB database to store and retrieve user account information.
* Ability to select a type of interview to practice
* Design and implement a user interface for selecting interview types using React.js.
* Retrieve and display available interview types from the backend using Node.js and a web API.
* Question bank with different categories and levels of difficulty
* Create a database schema in MongoDB to store the question bank.
* Develop an algorithm to retrieve and display questions based on selected categories and difficulty levels.
* Timer for each question and overall interview
* Implement a timer component using React.js to track the duration of each question and the overall interview.
* User feedback mechanism to provide tips and recommendations for improvement
* Implement a feedback mechanism to provide tips and recommendations for improvement based on recorded responses.
* Option to save and review past interviews
* Store completed interviews and related data in the MongoDB database.
* Implement functionality to retrieve and display past interviews for users to review.
2. **Non-Functional Requirements**:
* User-friendly interface with easy navigation and clear instructions
* Secure authentication and data encryption
* Fast and reliable performance
* Compatibility with different browsers and operating systems
4. **customer Requirements**:
* User personas to define the target audience
* Use cases to outline the scenarios in which the tool will be used
* Consideration of user experience and ease of use
* Customization options for users to adjust the difficulty level and type of feedback provided
* Accessibility considerations to ensure the tool is usable for a diverse range of users.
</div>
<div>
- # System Architecture:
```
+----------------+ +--------------+
| | | |
| Client |<--->| Frontend |
| | | |
+----------------+ +--------------+
| |
| HTTP/HTTPS | Zoom API
| |
+----------------------------------------------+
| |
| |
| |
+------------------+ +-----------------+------+
| | | |
| Authentication | | Backend |
| and Authorization| | |
+------------------+ +------------------------+
| |
| |
| |
+------------------+ +----------------+ +----------------+-------+
| | | | | |
| Interviewee | | Interview | | Interviewee Data |
| Management | | Scheduling | | and Feedback |
+------------------+ +----------------+ +------------------------+
| |
| |
| |
+------------------+ +----------------+ +----------------+-------+
| | | | | |
| Interviewer | | Code Challenge | | Interviewer Data |
| Management | | Management | | and Feedback |
+------------------+ +----------------+ +------------------------+
| |
| |
| |
+------------------+ +----------------+ +----------------+------+
| | | | | |
| Admin | | Reviews | | Admin Data |
| Management | | | | and Feedback |
+------------------+ +----------------+ +-------------------------+
| | |
| | |
|---------------------------------------------------------------------|
| |
| Database and file storage |
| |
----------------------------------------------------------------------
```
</div>
<div>
- ## The system architecture includes the following components:
- **Client**: The user interface that the user interacts with, built using (React js)
- **Frontend**: The component that handles client-side logic and communication with the backend via HTTP/HTTPS.
- **Backend**: The server-side component that handles user authentication, authorization, and all other functionalities using a backend programming language (Node.js in our project).
- **Database and File Storage**: The storage component that stores user data and feedback for interviewees, interviewers, and admins, as well as code challenges and code submissions (MongoDB in our project).
- **Authentication and Authorization**: The component that handles user authentication and authorization using industry-standard protocols such as OAuth or JWT.
- **Interviewee Management**: The component that manages interviewees' data and scheduling, allowing them to start practice interviews, and storing their feedback and performance.
- **Interviewer Management**: The component that manages interviewers' data, code challenges, and feedback, allowing them to provide feedback to interviewees, as well as view their history and performance.
- **Admin Management**: The component that manages admin data and allows them to manage interviewee, interviewer, and interviewer application data.
- **Interview Scheduling**: The component that handles scheduling interviews between interviewees and interviewers, communicating with the Zoom API to create meetings and send email notifications.
- **Code Challenge Management**: The component that allows interviewers to create and manage code challenges and review interviewees' code submissions.
- **Reviews Management**: The component that manages interview feedback and reviews.
</div>
<div>
* # System Design:
* **Frontend Design**:
* The frontend and user interface will be designed using ReactJS.
* The UI will be divided into reusable components, such as buttons, modals, forms, and tabs.
* React Router will be used to handle the navigation between different pages of the application.
* Redux will be used to manage the state of the application and handle data flow between components.
* **Backend Design**:
* The backend will be designed using Node.js and Express.js
* The backend will serve as an API to the frontend
* The backend will handle user authentication and authorization using JSON Web Tokens (JWT)
* MongoDB will be used as the database to store user information, interview data, and other related information
* Mongoose will be used as an Object Data Modeling (ODM) library to interact with the MongoDB database
* The backend will expose RESTful endpoints to allow the frontend to create, read, update, and delete data.
* **API Design**:
* The API will follow a RESTful architecture with clear and descriptive endpoints
* Each endpoint will have a specific purpose and be designed to return relevant data
* The API will use HTTP status codes to communicate the outcome of each request
* The API will handle user authentication and authorization using JWT
* The API will be designed to be scalable and easily maintainable
</div>
<div>
- # System Validation/Testing
The website contains the landing page ( logo and description of the website.)
and there is a button to sign up and log in, When the user clicks the sign-up button, a Modal will show up with the sign-up form. When the user clicks the login button, a Modal will show up with the login form.
<div>
- [x] **Sign up as a user (interviewee)**:
Sign up form will have a full name field, an email field, a password field, a confirm password field a submit button and a cancel button. When the user click the submit button, the user will be able to sign up as an interviewee based on the requirements of the form. When the user click the cancel button, the Modal will close.
After the user sign up, an email will be sent to the user's email address. The user will be able to verify the email address. When the user click the verify button, the user will be able to login.



</div>
<div>
- [x] **login as a user (interviewee)**:
Login form will have a email field, a password field, a submit button and a cancel button. When the user click the Login button, the user will be able to login based on the requirements of the form. When the user click the cancel button, the Modal will close.

After the user login, the user will be able to see the dashboard. The user can click the profile button to see the profile of the user. The user can click the logout button to logout.
by Clicking on the the profile tab, the user will be able to see the user information. There will be a Start a Practice interview button.

When the user click the Start a Practice interview button, a Modal will show up with a multi steps form to create an interview. The user can click the Cancel button to close the Modal.
1. The first step of the multi steps form will be the specialization. The user can click the next button to go to the next step.

2. The second step of the multi steps form will be the language. The user can click the next button to go to the next step.

3. The third step of the multi steps form will be the questions category. The user can click the next button to go to the next step.

4. The fourth step of the multi steps form will be the available dates and hours for the specifications that were entered. The user can click the next button to go to the next step.
If no available dates and hours are found, a message will be shown and the user will be able to click the back button to go to the previous step.

5. The fifth step of the multi steps form will be informing the user that the interview is created and he got matched with interviewer. The user can click the done button to close the Modal.

* The user can see more details about the interview either in the dashboard or in the email that was sent to the user.


* The user can see tabs that is about upcoming interviews, interview history, reviews and settings.
* By clicking on the tabs respectivley The user can see the interviews that are upcoming, the past interviews, the reviews of the interviews and the settings.

* Upcoming interviews tab will show the details of the interviews that are upcoming. The user can click on join button, a new browser tab will redirect the user to zoom application to join the interview. or cancel button to cancel the interview.


* Cancel interview will send an email to the user that the interview is canceled.
* Reviews tabs will have a filter button. When the user click the filter dropdown button, the user can see the filter options. The user can click the filter options to filter the reviews based on saved and unsaved reviews.

<div>
* Settings tab will have an optional inputs including (image, link to cv, level of experience and bio). The user can click the save button to save the optional inputs.

</div>
</div>
<div>
- [x] **Sign up as a interviewer**:
* At the bottom of the landing page, there is a section for creating a new interviewer (join us now)

* Sign up form will have two steps, the first step for create interviewer information which includes a full name field, an email field, a password field, a confirm password field, and a next button, When the user clicks the next button, it will go the second step which includes the specialization, experience level, checkbox languages, and CV Link.
so when the user clicks on the Done button the user will be able to sign up as an interviewer based on the requirements of the form. When the user clicks the previous button, the user will go back to the previous step.



After the interviewer sign up, an email will be sent to the interviewer email address. The interviewer will be able to verify the email address. When the user click the verify button, the user will be able to login.

* After creating an account for the interviewer it will appear as an application in the admin part of the application section and the admin able to accept or reject this application

* If the admin accepts this application (for the interviewer), the interviewer will be removed from the application section and appear in the interviewers section (it's accepted by the admin)

* When the interviewer login it will appear this page

* So on this page, the interviewer can select a scheduled time to be as available for the interviewee









</div>
<div>
* **Admin**
* After the admin login, the admin can click the profile button to see the dashboard.
* The admin can see tabs that is about interviewees, interviewers, interviewers applications, and logout.
* Interviewees tab will show the details of the interviewees. The admin can click on the delete button to delete the interviewee.

* Interviewers tab will show the details of the interviewers. The admin can click on the delete button to delete the interviewer.

<div>
* Interviewers applications tab will show the details of the interviewers applications. The admin can click on the delete button to delete the interviewer application, the approve button to approve the interviewer application, and the reject button to reject the interviewer application.

</div>
* Logout will logout the admin.
</div>
</div>
<div>
<br>
<br>
<br>
<br>
- # Conclusion
In conclusion, this project proposal aims to help individuals develop their interviewing skills through practice and reflection. Interviewing is a valuable skill that can be applied in many different career paths, and it is important to not only be prepared to receive an offer but also to manage the interview itself. By participating in this experiment, individuals will have the chance to improve their interviewing skills and increase their chances of finding a job or opportunity that they will be satisfied with. It is important to prepare carefully, research the position, and present one's authentic self in order to make a positive impression during the interview process.
</div>
<div>
- # Realted Work
### [- Pramp](https://www.pramp.com/#/)
##### The idea behind the program is to teach a candidate how to prepare for a programming interview. You need to sign up for a free account to receive feedback on your interview from your peers.
- You are matched with interviewers based on your choice for a programming language
- Interviews are live, one-on-one video sessions with the person you are matched with.
### [- InterviewBuddy](https://interviewbuddy.in/)
##### Create a profile with the details of your professional qualifications. Choose a time slot for the interview and receive a curated list of material to study for the session. After giving the mock-interview, you will receive comprehensive feedback on your performance and a link to the recording of the interview.
- No need to download any software to use the site.
- A detailed scorecard specifies your areas of strengths and weaknesses.
### [- Gainlo](http://www.gainlo.co/#!/)
##### Gainlo is an interview preparation resource for engineering students. Professional interviewers conduct mock interviews and provide feedback on your performance.
- Interviews are on Skype and also use code-sharing tools.
- You get feedback immediately at the end of the interview and can ask any questions on your end that you might have.
### [- InterviewBit](https://www.interviewbit.com/)
##### On InterviewBit, you get a series of interview questions for practice. Pay attention to the advice on how to give the right answers to these questions.
- You can get referrals to actual tech companies if your profile matches the needs of a company.
- You receive an organized plan to study interview questions in order of difficulty.
### [- Interviewing](https://interviewing.io/)
##### The program offers anonymous technical interview practice with actual engineers from across a host of top tech companies, from Google to Facebook, Microsoft, and more.
- If the anonymous interview session goes well, there is the possibility of getting in touch with your interviewer using your real name and credentials and getting a job offer.
- You receive feedback on your performance and suggestions on how to improve.
### [- Technical Mock Interview](https://www.techmockinterview.com/)
##### You get to practice your interview skills in front of a panel of professional engineers. Many of them have worked for the largest tech companies and conducted many actual interviews.
- After the interview, you get a detailed hiring result that consists of verbal and written feedback on your performance.
- Price per session: $109 for Coding, $129 for System Design, and $159 for Data Science
### [- Prepbunk](https://prepfully.com/)
##### You create an account on the Prepbunk website and fill in a form regarding your professional details. The form gets submitted to the team behind the site. You then arrange to appear for a mock interview, either over the phone or Skype.
- You're interviewed by industry professionals instead of a simulator.
- You can also opt for a mock interview without any feedback if you prefer self-assessment.
### [- My Interview Practice](https://myinterviewpractice.com/)
##### You interact with an interview simulator. An interview script appears before you in the form of one question at a time. You must answer in a set amount of time. The time limit is meant to replicate the pressure experienced during an actual interview.
- Study a recording of your interview performance afterward.
- You can add your own interview questions to the simulator.
- # Appendix
### Appendix A: Database Architecture
In this appendix, we provide a visual representation of the database architecture used in our project. The image below illustrates the components and their relationships within the database.

### Appendix B: System Architecture
#### A.1 Client
- User interface built using React.js
- Responsible for client-side logic and communication with the backend via HTTP/HTTPS
#### A.2 Frontend
- Handles the client-side logic and communication
- Reusable components for buttons, modals, forms, etc.
- Navigation handled by React Router
- State management with Redux
#### A.3 Backend
- Developed using Node.js and Express.js
- Serves as an API to the frontend
- Handles user authentication and authorization using JSON Web Tokens (JWT)
- Utilizes MongoDB as the database with Mongoose as the ODM library
- Exposes RESTful endpoints for CRUD operations
#### A.4 API Design
- Follows a RESTful architecture with clear and descriptive endpoints
- Uses HTTP status codes for request outcomes
- Implements user authentication and authorization with JWT
- Scalable and maintainable design
#### A.5 System Validation/Testing
- Unit testing to test individual components
- Integration testing to ensure components work together
- System testing to verify the system meets requirements
- Acceptance testing to validate user needs and requirements
- Performance testing to assess system performance and scalability
- Security testing to ensure data protection and prevent unauthorized access
### Appendix C: User Requirements
#### B.1 Functional Requirements
- Ability to create an account and log in
- Selection of interview type to practice
- Question bank with categories and difficulty levels
- Timer for each question and overall interview
- Recording of video and audio responses
- Playback and review of recorded responses
- User feedback mechanism for improvement
- Saving and reviewing past interviews
#### B.2 Non-Functional Requirements
- User-friendly interface with clear instructions
- Responsive design for mobile and desktop devices
- Secure authentication and data encryption
- Fast and reliable performance
- Compatibility with different browsers and operating systems
- Scalability to accommodate a large number of users
#### B.3 Technical Requirements
- React.js for frontend development
- Node.js for backend development
- MongoDB database for user accounts and interview data
- Web API to connect frontend and backend
- Testing framework for automated testing
- Deployment and hosting plan
### Appendix D: User Feedback
#### C.1 User Personas
- Definition of target audience
- Understanding user characteristics and preferences
#### C.2 Use Cases
- Scenarios in which the tool will be used
- User interactions and expected outcomes
#### C.3 Customization and Accessibility Considerations
- Difficulty level and feedback customization options
- Accessibility features for diverse user needs
</div>
<!-- - **Unit testing**: This approach involves testing each component of the system individually. For example, testing the functionality of a login form or the email verification process. Unit testing helps catch bugs and errors early in the development cycle.
- **Integration testing**: This approach involves testing how the different components of the system work together. For example, testing how the front-end and back-end communicate with each other or how the database integrates with the rest of the system. Integration testing helps ensure that the different parts of the system work as intended.
- **System testing**: This approach involves testing the system as a whole to ensure that it meets the specified requirements. For example, testing the interview creation process end-to-end to ensure that the user can create an interview and get matched with an interviewer. System testing helps ensure that the system works as expected and meets the needs of the users.
- **Acceptance testing**: This approach involves testing the system with real-world scenarios to ensure that it meets the user's needs and requirements. Acceptance testing is typically done by the end-users or stakeholders of the system and can help catch any issues or gaps in the system's functionality or usability.
- **Performance testing**: This approach involves testing the system's performance and scalability under different conditions, such as heavy user loads or large amounts of data. Performance testing helps ensure that the system can handle the expected traffic and usage.
- **Security testing**: This approach involves testing the system's security measures to ensure that it can protect sensitive user data and prevent unauthorized access or attacks. Security testing helps ensure that the system is secure and meets any compliance or regulatory requirements. -->