BUILD OUT

BUILD OUT

A project report submitted for the partial fulfillment for the award of degree of

MASTER OF COMPUTER SCIENCE

Submitted By

Mr. A. Sai Kumar

(Reg. no: 1913102080113)

Under The Guidence Of

Dr. S. Anitha, M.Sc., M.Phil., PhD.,

Assistant Professor,
PG Department of Computer Science

DWARAKA DOSS GOVERDHAN DOSS VAISHNAV COLLEGE

(AUTONOMOUS)
ARUMBAKKAM, CHENNAI - 600106
 DWARAKA DOSS GOVERDHAN DOSS VAISHNAV COLLEGE
(AUTONOMOUS)
ARUMBAKKAM, CHENNAI - 600106
PG DEPARTMENT OF COMPUTER SCIENCE

BONAFIDE CERTIFICATE

This is to certify that this project work entitled “HIRING PREDICTION TOOL” is a

bonafide record done by SAI KUMAR . A (Reg.No:1913102080113) in partial fulfilment for

award of degree of Master of Science (Information Technology) under our guidance and

supervision, during the academic year 2020 - 2021.

Project Guide Head of the Department

Submitted For The Viva – Voice Examination Held On ………….…………… At

Dwaraka Doss Goverdhan Doss Vaishnav College, Chennai - 600 106.

Internal Examiner External Examiner

 ACKNOWLEDGEMENT

I take this opportunity to express my sincere thanks to everyone in guiding me to complete

this project. I thank the almighty for the blessings that have been showered upon me to
complete the project successfully.

I express my sincere thanks to Principal Dr. S. SANTHOSH BABOO, M.Sc. Ph.D.,

Dwaraka Doss Goverdhan Doss Vaishnav College for his help and valuable guidelines for
the successful completion of this project.

My sincere thanks to the Head, PG Department of Computer Science, Dr.T.Santhanam,

M.Sc., Ph.D., PGDCA for his continued support and his help in compiling the project.

I acknowledge my gratitude to my guide Dr. S. Anitha, M.Sc., M.Phil., PhD., for

providing me an opportunity to do my project work on BUILD OUT.

My special thanks to all faculty members and staff members of PG Department of Computer
Science and Application for their support and encouragement for the successful completion
of the project.

I also thank my friends for providing moral support and timely help to finish the project.

I whole heartedly express my sincere thanks to my lovable parents and relatives who
encouraged me with moral and economic support.
 ABSTRACT

The physical classroom learning nowadays is no longer applicable for the current younger
generations (Gen Y). Internet and distance learning which is generally known as online
education plays a vital roles in the country's education system. It is undeniable that online
education provides ample of benefits to young learners. Nevertheless, there are also many
negative implications from online education. Limited collaborative learning, increase in time
and effort are the several negative implications from online education. This study examines
the implications of online education among students especially in a private higher learning
institution and its effect towards Malaysian national education system. Information has been
collected through surveys, interviews and together with secondary data, and were analysed
using SPSS.

The studies found that there are various serious issues regarding online education and on its
effect on the quality of Malaysian Education System to certain extend. Several problems have
been identified and these issues have to be solved in order to sustain the quality of education
for future generations. Furthermore, Ministry of Higher Education (MOHE) should formulate
a standard policy, monitor closely the implementation of online education, evaluate and
review the method used in teaching and upgrade to maintain the quality of online education
in private higher education institution
 INDEX

TITLE PAGE
S.NO
NO
INTRODUCTION

1.1 ORGANIZATION PROFILE 1

1
1.2 EXISTING SYSTEM 15

1.3 PROPOSED SYSTEM 15

1.4 FUNCTIONAL DESCRIPTION 15

1.5 HARDWARE AND SOFTWARE REQUIREMENTS 16

SYSTEM ANALYSIS
2 18
2.1 USE CASE DIAGRAM

2.3 SEQUENCE DIAGRAM 28

SYSTEM DESIGN
3 29
3.1 CLASS DIAGRAM

3.2 TABLE DESIGN 30

3.3 MODULE DESCRIPTION 31

4 SYSTEM IMPLEMENTATION

4.1 SOFTWARE DESCRIPTION 32

SYSTEM TESTING
5 35
5.1 UNIT TESTING

5.2 INTEGRATION TESTING 37

5.3 ACCEPTANCE TESTING

6. BIBILIOGRAPHY

7. APPENDIX

APPENDIX A – SAMPLE SOURCE CODE

APPENDIX B – I/O SCREENSHOT

 1

CHAPTER 1

INTRODUCTION

1.1 Organization Profile

MAANTT is an educational technology company creating cutting-edge technology

solutions that make learning, outcome driven, and customized for skills and employability.
Banyanpro is a product of MAANTT which is a cloud-based software application for Hiring
and Personalized Learning. They offer general aptitude, Psychometric, IT competency
(Programming or Database or Project based) to help you analyse the quality of your
candidates'.

Why use Banyanpro?

Through its advanced technologies like automation and robotics, using simplified
design thinking models and placing students first, Banyanpro brings in a new way to learn,
practice & apply learning. Banyanpro has the necessary inbuilt tools that help everyone
involved. Ranging from yourself, your students as well as the IT department, all users can
access the portal with ease and convenience. Effective eLearning is what they promise.
Here’s how they do that.

COURSE MANAGEMENT

❖ Multiple Content Types

Build custom courses by uploading videos or re-using presentations and documents.

Curate courses by consuming contents from web-sources.

❖ Tin Can API (xAPI)

Tin Can API allows you to track the learning behavior of users. Curious to know how
your employees are learning on Compliance Policy.

❖ Topic wise Assessments

Track individual learning behavior and verify their knowledge and skill on each topics
and sub-topics.

❖ Learning Paths
 2

Add structure to your training programs by ability to control both the order and the
time-frame in which the courses become available to the learners.

❖ Learning Compliance

Complete control over the individuals or group learning progress and take corrective
measures based on learning compliance report.

LEARNING DELIVERY

❖ Digital Certificates

Design your own certificates that are issued for qualified learners for predefined
periods of time. You can use it for issuing certificate for completing compliance
training or any technical training.

❖ Digital Badges

Get recognition for learning and then share it on social media like Facebook, LinkedIn
or Twitter. A digital badge is an online representation of a skill you've earned and it
can't be duplicated.

❖ Blended Learning

Blend the online learning with traditional classroom methods by inviting learners
through video conference.

❖ Flip Class Room Model

Reverse the traditional learning environment by delivering instructional content

online and make classroom learning more dynamic and interactive environment.

❖ Gamifications

Bring learning to life with Badges and Leader boards. Motivate your employees to
learn and earn points and compete with peers.

❖ Video Conferencing

Collaborate and learn with integrated video conference feature or customize based on
your requirement.
 3

ASSESSMENT MANAGEMENT

❖ Question Bank

A Library containing thousands of questions on a specific subject which will help to

organize and prevent cheating.

❖ Blooms Taxonomy

Bloom’s taxonomy is a powerful tool to help your organization to develop powerful

learning objectives.

❖ Competency and Sub Competency

Generate support for building competency models in your organization.

❖ Item Analysis

Assess the quality of each questions and it's options to improve the efficiency of your
Assessments.

❖ Invite

Invite candidates to assessments by sending unique link and allow them to take
assessments on their comfort anytime or anywhere.

❖ Web Proctoring

Ensure the authenticity of the test taker and prevent him/her from cheating by using
advanced Web proctoring features.

❖ Discussion Forum

Employees can teach each other, clarify assumptions and improve collaboration.

❖ Randomization

Improve the Assessment quality by randomizing questions and answers.

ENTERPRISE READY

❖ Custom Roles or User Types

 4

Limit employee's access to certain features via custom user types or Roles.

❖ High Security

Communication over secure protocol and enforcing various security mechanisms.

❖ Integrations

It's very simple to integrate Banyanpro with hundreds of other third-party web apps
like Slack, GitHub etc.

❖ Single Sign On (SSO)

Banyanpro supports LDAP, SAML2 and Active directory to improve the user
experience.

❖ Branching

Group your learning environment to branches and each group is like a separate
department.

❖ API

An extensive list of Rest-API to communicate with other learning portal and get the
data you need.

❖ GDPR Compliant

Comply with GDPR with features that let you respect users’ privacy to collect
approval, exclude users who have opted out of data collection and allow users to self-
delete.

WHITE LABELLING

❖ Highly Customizable

Choose your own domain customize your emails templates based on your
organization needs.

❖ Themeable

Customize the look and feel of your portal by choosing color to match your
organization.
 5

❖ Make it yours

Add your logo and favicon, change the colors, and create branded sign in page.

SYSTEM

❖ Responsive

Access Banyanpro anywhere, anytime and by using any device.

❖ Multilingual

Banyanpro supports localization and internalization. You can configure your regional
languages based on your leaner preference.

❖ Infrastructure

Azure cloud blazing fast servers, improve the speed of delivery and availability.

❖ Web Standards

Banyanpro built on top of the modern web standard and technologies.

In a nutshell Banyanpro is

❖ Easy to use
Banyanpro is really easy to use. They built it to increase your satisfaction and fun from
personalized learning.

❖ Reports and Analytics that make sense

Simple and comprehensible reports and analytics which helps to take decisions easily.

❖ Scalable to any size

Banyanpro is scalable to any enterprise size and easy integration with other existing
Apps.

❖ Highly Customizable
Your own Banyanpro with custom domain, your logo and theme.
 6

❖ Supports Regional languages

Make Banyanpro more personalized by switching on or off to any language.

❖ 99.9% Availability
Banyanpro is cloud based so no need to install, update or backup any software or
hardware.

Banyanpro aims to solve today’s learning challenges across schools, colleges,

universities, and organizations and enable students and workforce to prepare and perform at
their very best in tomorrow ’s digital economy. Banyanpro offers the best Hiring and
Learning solution for any industry. They have their feet firm in Healthcare, Aviation,
Franchise, Call Centers, Automotive and Education.

Banyanpro can be used for,

Digital Assessment for Hiring

Assess your candidates’ skills and job fit with our proctored assessments. They offer General
Aptitude, Psychometric, Software Programming and Database to help you analyze the quality
of your candidates'. Pick your assessments and hire the best fit.
 7

CREATE YOUR ASSESSMENT -

Choose our predefined assessments for the skills you need or add individual questions from
question bank to a new empty Assessment. You can also create your own custom question
bank and add questions to build an assessment tailored to your needs.

INVITE CANDIDATES -

Save time by inviting all your candidates to an assessment through one simple user interface.
Enter their email addresses or bulk upload, choose a deadline for an assessment, and hit the
invite button.

CANDIDATES TAKE THE ASSESSMENT -

The Invited candidates will receive an email with a link to the online assessment. Candidates
take the assessment from the comfort of their homes at their convenience. Secure your online
exam with banyanpro.
 8

RANK AND HIRE TOP TALENT -

All candidates will be sorted and graded into PASS or FAIL . They also provide a feature to
filter the candidates on various parameters and notify candidates by sending them pass or fail
emails. You can download and use the assessment report to ask the candidate for more details
during an interview.

ASSESSMENT TYPES

General Aptitude Test -

Assess candidates on Verbal, Non-Verbal, Logical, and IQ for multiple roles to ascertain their
analytical and problem-solving skills.

Programming -

Conduct online programming challenges on C, C++, JAVA, C#, Python, JavaScript and PHP.
Banyanpro supports 13 different programming languages to evaluate candidates hands-on
Technical, Logical and Problem-Solving skills.

Psychometric Test -

Evaluate candidate’s psychological compatibility with eliminating deficiencies in a face-to-

face interview process. Banyanpro supports Big-5 and RIASEC personality Tests.

Real project Based -

Evaluate candidates with Real projects which includes different layers, Front end, Business
Logic and Database programming. Banyanpro supports assessments for .NET Full stack, Java
Full Stack and MEAN Stack.

Personalized Learning

Every human is unique, need special care to provide learning experiences for reaching
individual achievements.

WHY PERSONALIZED LEARNING?

When you need customized learning for each individual's strengths, needs, skills and
interests. Each individual gets a learning path based on what they know and how they learn
best. You can also use Banyanpro when you need digital assessment for hiring to assess your
candidate’s skills and job fit with their proctored assessments.
 9

Power to Author

• Design and Deliver courses with flexible learning design

• Tools for monitoring learner behaviour to influence learning effectiveness
• Design classes encouraging ‘doing’

Learner Centric

• Learn by doing
• Encourage peer learning using collaboration power
• Improve learning engagement using Gamification elements
• Mobile friendly

Best in class Operation

• 24/7 support
• Helps you reach a mass audience
• Good customization features

FEATURES
 10

❖ Create or Curate courses -

Create courses from Video, Audio, PDF, and Documents. Curate course from any
multimedia elements like YouTube and Web Pages.

❖ Learning Paths -

Select the courses which you want to tied together for learners to progress through,
mastering a particular subject.

❖ Topic wise Assessments -

Assessments make it easy to ensure that the critical knowledge is properly delivered.

❖ Blended Learning -

Combine e-learning with instructor led training to deliver courses.

❖ Design and issue Custom Certifications -

Design and issue certificates based on your need.

❖ Learner Progress -

Track individual learners or group of learners learning compliance.

❖ Design your theme -

Enhance your brand by building a theme that conveys your own company personality and
style. Banyanpro lets you choose your theme by using a user-friendly interface.

LEARNING TYPES

BanyanPro offers the best Learning solution for any industry.

❖ Bundle of Courses -

Starting learning for free with a wide range of free online courses covering different
subjects.

❖ Learning Paths -
 11

Boost your skills. Stay sharp. Get ahead. A structured training programme of your
choosing, and dramatically reduce your time to learning proficiency.

❖ Cloud Labs -

Real cloud environments that help developers and IT professionals. Self-paced labs that
provide hands-on practice with Cloud technologies in a live environment.

TECHNOLOGIES

BanyanPro enables teams to assess candidates on the technologies listed below, with ease.

PROGRAMMING LANGUAGES
C
General-purpose, imperative computer programming language.

C++
Imperative, object-oriented and generic programming language.

C#
A simple, modern, general-purpose, object-oriented programming language by Microsoft.

PYTHON
General-purpose, high-level programming language.
 12

JAVA
General-purpose, concurrent, class-based programming language.

PASCAL
Small, efficient language using structured programming and data structuring.

R
Statistical computing and graphics programming language.

PERL
Family of high-level, interpreted, dynamic programming languages.

JAVASCRIPT
Scripting language of the Web.

JQUERY
jQuery is a JavaScript library designed to simplify HTML DOM tree traversal and
manipulation.

SHELL
Computer program designed to be run by the Unix shell.

INFORMATICA
Data integration/ETL tool.

NODEJS
A cross-platform runtime environment for developing server-side web applications.

REACT
A JavaScript library to build user interfaces.

SELENIUM
Used for test automation only web applications.

UFT
HP Unified Functional Testing (UFT) / QTP.

DATABASES
ANSI SQL
Structured Programming Language for storing, manipulating and retrieving data in databases.
 13

ORACLE
All Content · Database · Fusion Middleware · Enterprise Manager

MYSQL
RDBMS being used for developing various web-based software applications.

MS SQL SERVER
ORDBMS, platform dependent, both GUI and command-based software.

MONGODB
Database and leading NoSQL database. MongoDB is written in C++.

APPLICATION FRAMEWORKS
HTML5
HTML5 is the latest and most enhanced version of HTML.

CSS3
CSS3 is a latest standard of css earlier versions(CSS2).

ANGULAR
Super heroic JavaScript MVW framework.

To keep pace with ever-changing business demands Banyanpro uses Cloud Labs

HOW IT WORKS?

CHOOSE CLOUD LAB FROM LIBRARY -

Banyanpro supports more than 50 technology labs, guided exercises and hands-on. Choose
the cloud lab and fly.

INVITE CANDIDATES -

Save time by inviting all your candidates to a assessment through one simple user Invite or
enrol the learners and assign chosen cloud lab.

TRACK THEIR PROGRESS -

You can track their progress and provide timely feedback for improvements.

DRIVE BUSINESS OUTCOME -

 14

Measure individual progress and drive business outcome.

WHY CLOUD LABS ?

• Launch cloud labs in minute

Choose the lab and its configuration and launch it.

• Scalable

Scalable to any enterprise size and easy integration with other Apps.

• Total cost savings

Pay as you go. No need to spend on infrastructure hence total cost savings.

• Fully secured

Secure cloud environment with best in class infrastructure.

FEATURES

• 50+ technology labs

• Rich reports and analytics
• On-demand
• No installation and no compatibility issue
• 24X7 Support
• Real production environment
• Pay as you go
• Seamless integration

MANY WAYS TO USE BANYANPRO

❖ CLOUD LABS FOR ENTERPRISES -

Upskill or Reskill your employees on the latest technologies with Banyanpro cloud labs.

❖ CLOUD LABS FOR EDUCATIONAL INSTITUTIONS -

Make your students industry ready by providing Banyanpro cloud labs on latest
technology stacks.
 15

❖ CLOUD LABS FOR LEARNING PROVIDERS -

Enable students by providing hands-on experience with Banyanpro cloud labs.

1.2 EXISTING SYSTEM

Nowadays, online learning turns out to be more and more practiced. Many traditional
universities started to share their courses online for free. It represents an easy and
comfortable method to achieve knowledge in almost every field, from law and accounting, to
human sciences, such as psychology and sociology or history. Online learning is a great
alternative to traditional universities, especially for people who can’t afford the time and
money to take real courses

1.3 PROPOSED SYSTEM

Online education has become an important method in knowledge innovation, dissemination

and application with the development of internet and network database. The objective of this
project is to develop a better, faster and more reliable technique. Right now there are many
platform to learn but there no platform to develop to motivate yourself you as author to make
you as motivator. But in our platform we provide to develop as author by writing content. So
we are giving a chance. It is an open source so any one can access according to their
feasibility Depending on the reach about the content we are going to give achievements for
the particular person. People can become author and self motivator Each user has a particular
mobile number so chances of duplications will be less The user details are maintained
confidentially
1.4 FUNCTIONAL DESCRIPTION

• Registration is offered. Then a registered user logs into our web application
• Users can access the web application once they are verified by the admin
• Based on their role they will be taken to home page or admin page
• Users can post the contents, follow the skills, like, dislike and report the posts and
update their profile
• Admin can verify or delete the verification request from the users
• Admin will add the skills and bit titles, for the top most posts admin will provide
achievements
 16

1.4.1 Work Area

▪ Java Script - JavaScript, often abbreviated as JS, is a programming language that

conforms to the ECMAScript specification. JavaScript is high-level, often just-in-time
compiled, and multi-paradigm. It has curly-bracket syntax, dynamic typing,
prototype-based object-orientation, and first-class functions
▪ React JS - React is an open-source front-end JavaScript library for building user
interfaces or UI components. It is maintained by Facebook and a community of
individual developers and companies. React can be used as a base in the
development of single-page or mobile applications
▪ Mongo DB - It is an open source NoSQL database management program. NoSQL is
used as an alternative to traditional relational databases. ... MongoDB is a tool that
can manage document-oriented information, store or retrieve information. MongoDB
supports various forms of data
▪ NodeJS - Node.js is an open-source, cross-platform, JavaScript runtime environment
that executes JavaScript code outside a web browser.
▪ Express JS- It's a web framework that let's you structure a web application to handle
multiple different http requests at a specific url. Express is a minimal, open source and
flexible Node. js web app framework designed to make developing websites, web
apps, & API's much easier.

1.4.2 Aim of the project

• To develop a intensive application for content writing

• Aesthetic user interface, making it an enriching experience for users

1.4.3 Key features and scope of the project

• Content writing
• Responsive design
 17

1.5 HARDWARE AND SOFTWARE REQUIREMENTS

1. Necessary resources – 1 Pc
2. Number of developers – 1
3. Required skills
a. Knowledge about HTML, CSS, JavaScript, ReactJs, NodeJS,ExpressJS and
MongoDB,
b. Microsoft Visual Studio code IDE
c. Post Man
d. MongoDB Atlas
4. Hardware requirements:
a. Intel® Pentium® or AMD processor, 2 GHz with MMX or equivalent
b. 4 GB RAM or more
c. 75 MB of available disk space or more
5. Environment and development tools required for the development process
a. Microsoft windows 7 or higher
b. Microsoft Visual Studio Code IDE

1.5.1 Technology Used

• RESTful Webservice
• JWT
• Git

1.5.2 Libraries Used

• Nodemon
• Bootstrap
• Material -UI
• ExpressJS

1.5.3 Data Formats

Data at server side: JSON

When user selects to store details entered on client side (i.e. on DB) then the data is
saved in string format.
 18

CHAPTER 2

SYSTEM ANALYSIS

2.1 Software Requirements:

• Front end : React JS, HTML, CSS, JS

• Web application : Expressjs

• Back end :Nodejs,MongoDB

2.2 USE CASES

2.2.1 Use cases for a User:

Use Case U1 Sign up

Actor User

Sign up to create a new profile by entering all the mandatory details. On

Basic Flow successful signup the user receives a confirmation alert and redirected to
the home page

Exception Flow On unsuccessful signup user receives an error alert.

Use Case U2 Login

Actor User
 19

Basic Flow Login with valid credentials to access the application

On unsuccessful login user receives an error alert.

Exception Flow

Use Case U3 Edit profile

Actor User

Basic Flow Update user profile and save.

Use Case U4 Add Post

Actor User

Basic Flow Add Post

Use Case U5 Follow and Un follow

Actor User
 20

Basic Flow Can follow and unfollow the skills

Use Case U6 Like and Dislike

Actor User

Basic Flow Add like and dislike for the posts

Use Case U7 Report

Actor User

Basic Flow Report a particular post

Use Case U8 Report like and dislike

Actor User

Basic Flow Can like and dislike the report

 21

Use Case U9 Search

Actor User

Basic Flow According to the page the user can search the posts and skills

Use Case U10 View posts

Actor User

Basic Flow User can read the posts

Use Case U11 Post edit

Actor User

Basic Flow Edit the posts

Use Case U12 Delete post

Actor User
 22

Basic Flow Delete the posts

Use Case U13 Achievements

Actor User

Basic Flow View the achievements received for the posts

Use Case U14 Attend Qiz

Actor User

Basic Flow Attends the Quiz based on post

Use Case U15 Score

Actor User

Basic Flow Displays the score based on correct answers

 23

Use Case U16 Logout

Actor Candidate

Logout from the tool by clicking on Logout button from the profile
Basic Flow
dropdown icon.

2.2.2 Use cases for Admin:

Use Case A1 Login

Actor Admin

Basic Flow Login with valid credentials to access the application.

Exception Flow On unsuccessful login admin receives an error alert.

Use Case A2 View requests for verification

Actor Admin

Basic Flow View all the requests for verification.

 24

Use Case A3 Action on requests

Actor Admin

Grant verification for a user by clicking verify button or delete

Basic Flow
verification request by clicking on delete button.

Use Case A6 Giving Achievements

Actor Admin

Basic Flow Gives achievements for the top posts of the day

Use Case A7 Add skill

Actor Admin

Basic Flow Add new Skill

Use Case A8 Edit Skill

Actor Admin
 25

Basic Flow Edit the existing skills

Use Case A9 Delete skill

Actor Admin

Basic Flow Delete the skill

Use Case A10 Add bit

Actor Admin

Basic Flow Add bits for the skills.

Use Case A11 Edit bits

Actor Admin

Basic Flow Edit the bit titles for the skills

 26

Use Case A12 Delete bits

Actor Admin

Basic Flow Delete the bit titles for the skills

Use Case A13 Top skill posts

Actor Admin

Basic Flow Views the skill top posts

Use Case A14 Adds Quiz

Actor Admin

Basic Flow Adds excel sheet for questions and ansers

 27

Use Case A15 Update Quiz

Actor Admin

Basic Flow Edits questions and answers for the quiz

Use Case A16 Delete Quiz

Actor Admin

Basic Flow Delete the questions and answers for the quiz

Use Case A17 Logout

Actor Admin

Logout from the application by clicking on the logout button in the

Basic Flow
navigation bar
 28

2.2 SEQUENCE DIAGRAM

FrontEnd (ReactJS) BackEnd (NodeJS) MongoDB

 29

CHAPTER 3

SYSTEM DESIGN

3.1 CLASS DIAGRAM

 30

3.2 TABLE DESIGN

 31

3.3 MODULE DESCRIPTION

1. Post
2. Profile
3. Skill
4. Authorization

Post

Manages the posts that are posted by the users and they are accessed by other users for
flexible work that are liked disliked and reported by the users

Profile

The profile module represents the information of the user where they can store their
user information and it can also have a verification flag to identify their profile status. This
acts as a dashboard for the user and may have other smaller modules which serves their
purpose

Skill

Skills access the features based on user privileges. This module represents the
information of the skills and are subdivided into bit type contents

Authorization

Control access to features based on user privileges. Based on their privilege’s users
can access certain features. Only the authorized users can access those features.
 32

CHAPTER 4

SYSTEM IMPLEMENTATION

4.1 SOFTWARE DESCRIPTION

VISUAL STUDIO CODE:

Visual Studio Code is a source-code editor that can be used with a variety of programming
languages, including Java, JavaScript, Go, Node.js and C++.It is based on the Electron
framework, which is used to develop Node.js web apps that run on the Blink layout engine.
Visual Studio Code employs the same editor component (codenamed "Monaco") used in
Azure DevOps (formerly called Visual Studio Online and Visual Studio Team Services).

Visual Studio Code can be extended via extensions, available through a central repository.
This includes additions to the editor and language support. A notable feature is the ability to
create extensions that add support for new languages, themes, and debuggers, perform static
code analysis, and add code linters using the Language Server Protocol.

Visual Studio Code includes multiple extensions for FTP, allowing the software to be used as
a free alternative for web development. Code can be synced between the editor and the
server, without downloading any extra software.

Visual Studio Code allows users to set the code page in which the active document is saved,
the newline character, and the programming language of the active document. This allows it
to be used on any platform, in any locale, and for any given programming language.
 33

4.2 PROGRAMMING DEVELOPMENT

NAVIGATION STRUCTURE

• Home
• User login
o Home page
o View detailed post
• Skill
o View all skills
▪ Follow and unfollow skills
• Admin login
o Admin page to take action on all verification requests and reports
o Admin views top posts
o Admin adds skill details and bit details

WEB APPLICATION FEATURES

• Create user account

• User login
• Update profile and able to add, and update user information
• View all posts with likes dislikes and reports
• User adds likes dislikes and reports for the posts
• Search posts
• View skills
• Follow and unfollow skills
• Add post
• User logout
• Admin login
• Views top posts and provides achievements for the posts
• Add skills and bit details
• Updates skill and bit details
• Accept verification request or delete a request
• Admin logout
 34

PRODUCT FEATURES

• Application installation is not required; users access the application on the web
• Updates and upgrades to newer versions are automatic
• Any computer with an Internet connection can become an access point to an
application, no matter what operating system is installed.
• The risk of viral infection is greatly decreased when running an application on the
web instead of an executable.
 35

CHAPTER 5

SYSTEM TESTING

Testing is the process of executing a program or system with the intent of

finding errors. Or, it involves any activity aimed at evaluating an attribute or
capability of a program or system and determining that it meets its required
results. Software is not unlike other physical processes where inputs are received, and
outputs are produced. Where software differs is in the way it fails. Most physical
systems fail in a fixed (and reasonably small) set of ways. By contrast, software can
fail in many bizarre ways. Detecting all the different failure modes for software is
generally infeasible.
Testing is one of the most important stages in software development which can
prove whether the implementation and the requirements are in fidelity with each other.
Testing can also confirm if the software specifications are complete and consis tent.
One of the main goals of testing is to have a minimum number of test cases that will
find most implementation errors. The software/system that is been tested out here is
known as OBSE (Objective Business Specification Environment). This is a process
wherein the queries submitted online are evaluated by a group of experts.
5.1 UNIT TESTNG:
Unit testing is a software development process in which the smallest testable
parts of an application, called units, are individually and independently scrutinized for
proper operation. Unit testing involves only those characteristics that are vital to the
performance of the unit under test. The units in a system are the modules and routines
that are assembled and integrated to perform a specific functio n. In a large system,
many modules at various levels are needed. Unit testing focuses on the modules,
independently of one another, to locate errors.
Unit testing can be time-consuming and tedious. It demands patience and
thoroughness on the part of the development team. Rigorous documentation must be
maintained. Unit testing must be done with an awareness that it may not be possible to
test a unit for every input scenario that will occur when the program is run in a real -
world environment.
Some of the unit testing that compiles to the OBSE are:
 36

Feeding the system with all combinations of data should test all the calculations. For
valid data, programs should respond in the positive way and for invalid data programs
are to be created such that it catches the errors and shows the user.
The contact no: consists of ten digits including the special characters, so during
testing one should ensure that the programs do not accept anything other than the ten -
digit code for the employee no.

Another e.g. for valid and invalid data check is that, in case ten-digit no is entered
during the entry of transaction, and that number does not exist in the master file, or if
the number entered is an exit case, then the programs should not allow the entry of
such cases.
Thus, all conditions present in the program should be tested. Before
proceeding, one must make sure that all the programs are working independently.

5.1.1 IMPLEMENTATION OF UNIT TESTING:

The usage of the unit testing could be seen registration form of the p roject
clearly. The fields are tested in many cases and conditions.
o If the fields are empty, the browser shows an alert message.
o In fields like contact number if text is entered the browser shows an
alert message. And there is also vice done for another fi eld.
 37

TESTING TEST CASES

Id Scenario Test Cases Expected Result Actual Result Pass/

Fail

1 Enter null in It should not do It will show an error Pass

Registration mandatory fields. the registration message.
and show error.

Enter incorrect data It should not do It will show an error Pass

the registration message.
and show error.

Enter correct data It should let do the It will show the Pass
of all required field registration. message of

successful
registration.

2 Enter null username It should not do It will show an error Pass

or password. the login and show message.
error.

Enter wrong data of It should not do It will show an error Pass

username or the login show message.
Login password. error.

Enter correct data It should let do It will show the Pass

of username or login. message of
password. successfully login.

3 Enter null in It will not give It will not show any Pass
Search Posts mandatory fields. any searched result.
result.
 38

Enter correct data It should show It will show the Pass

Search Posts of all required field. the posts.
Appropriate posts.

4 Enter null in It will not give It will show the Pass

Add a Post mandatory add the post messages that enter
Fields the required details.

Enter correct data It should add the It will add the post Pass
of all required field. post successfully.

5 Enter null in It will not give It will show the Pass

mandatory permission to add messages that enter
Fields the information the required details.
Add user
Enter correct data It should add It will successfully Pass
information
of all required field. the information. add the information.

6 Approve the applied It should approve It will approve Pass

verification request. the user the user verification
verification request.
Approve / request.
Delete the
verification Delete the applied It should It will delete the Pass
request verification request. delete the verification request.
verification
request.
 39

5.2 INTEGRATION TESTING:

Also known as Integration and Testing (I&T), is a software development
process which program unit are combined and tested as groups in multiple ways.
There are two major ways of carrying out an integration test, call ed the bottom-up
method and the top-down method.
Bottom-up integration testing begins with unit testing, followed by tests of
progressively higher-level combinations of units called modules or builds.
In top-down integration testing, the highest-level modules are tested first, and
progressively lower-level modules are tested after that. In a comprehensive software
development environment, bottom-up testing is usually done first, followed by top-
down testing.
The process concludes with multiple tests of the complete application,
preferably in scenarios designed to mimic those it will encounter in customers'
computers, systems and networks. At this stage, end users and operators become
actively involved in testing. While testing one should also test to find discrepancies
between the system and its original objective, current specifications and systems
documentation.

5.2.1 IMPLEMENTATION OF INTEGRATION TESTING:

Integration testing is applied to this system after attaching all PHP prog rams to
the appropriate links. This checks the functionality of the system by clicking the links.

5.3 ACCEPTANCE TESTING:

System testing must also verify that file sizes are adequate, and their indexes have
been built properly. Sorting and rendering procedures assumed to be present in lower
level modules must be tested at the systems level to see that they in fact exist and
achieve the results modules expect.
 40

CHAPTER 6

CONCLUSION

While developing the system a conscious effort has been made to create and
develop a software package, making use of available tools, techniques and resources –
that would generate a proper System While making the system, an eye has been kept on
making it as user-friendly, as cost-effective and as flexible as possible. As such one may
hope that the system will be acceptable to any user and will adequately meet his/her
needs. As in case of any system development processes where there are a number of
shortcomings, there have been some shortcomings in the development of this system
also.
The purpose of the Build Out is achieved. By providing extremely rich and
minimalistic graphical user interface, web application is fast and in an aesthetic form.
Now User can enchance there skills by providing the content that may be useful for
others and the person who uploads it. This will also allow the candidates to upskill
themselves by finding out their weakness.
This tool is designed to work on any devices and the page is responsive to the size of
the display. Eye catching UI and sleek design gives a seamless user experience. Multiple
users can use the web application without sacrificing any performance is a major advantage.

Future Enhancements

❖ Providing post reviews

User can post a review for each and every post by giving star ratings and comments
for the post
❖ Viewing all the user’s details
Employees will need to know about the total number of applicants and their details.
This is crucial so that they can start weeding out the candidates.

❖ User can add skills

User can add the skills and its details
 41

BIBLIOGRAPHY

[1] Douglas Crockford. Javascript: The world's most misunderstood programming

language. http://javascript.crockford.com/javascript.html, 2001. Accessed May 24, 2008.

[2] Douglas Crockford. JSLint: The JavaScript verifier.http://www.jslint.com/, 2002.

Accessed August 4, 2008.

[3] Douglas Crockford. JavaScript: The good parts. O'Reilly Media, 2008

[4] Douglas Crockford. JavaScript: The world's most misunderstood programming language
has become the world's most popular programming
language. http://javascript.crockford.com/popular.html, 2008. Accessed May 24, 2008.

[5] ECMA. Standard ECMA-262, ECMAScript language specification, 3rd edition. ECMA
International, December 1999.http://www.ecma-
international.org/publications/standards/Ecma-262.htm ...

[5] React JS Documentation [Online] Available at : https://reactjs.org/docs/getting-

started.html

[6] MongoDB Documentation [Online] Available at: https://docs.mongodb.com/

[7] NodeJS Documentation [Online] Available at: https://nodejs.org/en/docs/

 42

APPENDIX A : Sample Screens

User: Register Page

User login page

 43

User Login with otp

Home page
 44

User -To view full post

User – Post reports

 45

User – Add a report for the post

User- Skills page

 46

User – Add post page

User profile page

 47

User-Achievements for the posts

User-Posts page
 48

Admin-Home page

Admin - Add skills

 49

Admin- Edit and delete skill page

Admin –add bit questions page

 50

Admin –Questions page

Admin Add questions

 51

Admin – User Verifcation page

 52

APPENDIX B : Sample Code

Intial.js
import React from 'react'
import{Link,Route} from 'react-router-dom';
import Carousel from 'react-bootstrap/Carousel'
import 'bootstrap/dist/css/bootstrap.min.css';

const New = () => {

return (
<div className="wrapper">
<div >
<nav className='navbars'>
<Link to='/navbar/home' className='navbar-links'>
BUILD OUT
<i class='fab fa-firstdraft' />
</Link>
<div class="topbar-items">
<ul className="navbar-menu">
<li className="navbar-item">
<Link to='/login' className='navbar-links'>
Login
</Link>
</li>
<li className="navbar-item">
<Link to='/contactus' className='navbar-links'>
Contact Us
</Link>
</li>
</ul>
 53

</div>
</nav>
<div class="app-container">
<div className="admin-cards">
<span></span>
<div className="card-body">
<Carousel>

<Carousel.Item>
<a href="#react"><img
className="d-block w-100"
src="https://effectussoftware.com/blog/wp-content/uploads/2020/02/What-is-React-
JS.jpg"
alt="First slide"
/></a>
</Carousel.Item>
<Carousel.Item>
<a href="#java"><img
className="d-block w-100"
src="https://www.softzone.es/app/uploads-softzone.es/2020/09/Programar-Java.jpg"
alt="Second slide"
/></a>

</Carousel.Item>
<Carousel.Item>
<a href="#nodejs"><img
className="d-block w-100"
 54

src="https://developers.redhat.com/sites/default/files/styles/article_feature/public/blog/2021/0
3/nodejs-reference-architecture_2x.png?itok=foFxRy8O"
alt="Third slide"
/></a>

</Carousel.Item>
<Carousel.Item>
<a href="#python"><img
className="d-block w-100"
src="https://content.techgig.com/thumb/msid-79386213,width-860,resizemode-4/5-
Myths-around-Python-programming-language-that-every-programmer-must-
know.jpg?88712"
alt="Fourth slide"
/></a>

</Carousel.Item>
<Carousel.Item>
<a href="#angular"><img
className="d-block w-100"
src="https://www.amarinfotech.com/wp-content/uploads/2020/01/Why-Angularjs-is-the-
best-front-end-framework.jpg"
alt="Fifth slide"
/></a>

</Carousel.Item>
</Carousel>
</div>
</div>
 55

<div class="c-con">
<div class="c-card" id="react">
<div class="c-card-img">
<img className="d-block" src="https://effectussoftware.com/blog/wp-
content/uploads/2020/02/What-is-React-JS.jpg" alt="React"></img>
</div>
<div class="c-card-con">
<p>React (also known as React.js or ReactJS) is an open-source front-end
JavaScript library for building user interfaces or UI components. It is maintained by
Facebook and a community of individual developers and companies. React can be used as a
base in the development of single-page or mobile applications. However, React is only
concerned with state management and rendering that state to the DOM, so creating React
applications usually requires the use of additional libraries for routing, as well as certain
client-side functionality.</p>
<a href="https://reactjs.org/">React Tutorial</a>
<a href="https://reactjs.org/docs/getting-started.html">View Documentation</a>
</div>
</div>
<div class="c-card" id="java">
<div class="c-card-img">
<img className="d-block" src="https://www.softzone.es/app/uploads-
softzone.es/2020/09/Programar-Java.jpg" alt="Java"></img>
</div>
<div class="c-card-con">
<p>Java is a high-level, class-based, object-oriented programming language that is
designed to have as few implementation dependencies as possible. It is a general-purpose
programming language intended to let application developers write once, run anywhere
(WORA), meaning that compiled Java code can run on all platforms that support Java
without the need for recompilation. Java applications are typically compiled to bytecode that
can run on any Java virtual machine (JVM) regardless of the underlying computer
architecture. The syntax of Java is similar to C and C++, but has fewer low-level facilities
than either of them.</p>
<a href="https://www.oracle.com/java/technologies/">Java Tutorial</a>
<a href="https://www.oracle.com/java/technologies/">View Documentation</a>
</div>
</div>
 56

<div class="c-card" id="nodejs">

<div class="c-card-img">
<img className="d-block"
src="https://developers.redhat.com/sites/default/files/styles/article_feature/public/blog/2021/0
3/nodejs-reference-architecture_2x.png?itok=foFxRy8O" alt="Nodejs"></img>
</div>
<div class="c-card-con">
<p>Node.js is an open-source, cross-platform, back-end JavaScript runtime
environment that runs on the V8 engine and executes JavaScript code outside a web browser.
Node.js lets developers use JavaScript to write command line tools and for server-side
scripting—running scripts server-side to produce dynamic web page content before the page
is sent to the user's web browser. Consequently, Node.js represents a "JavaScript
everywhere" paradigm, unifying web-application development around a single programming
language, rather than different languages for server-side and client-side scripts.</p>
<a href="https://nodejs.org/en/">NodeJs Tutorial</a>
<a href="https://nodejs.org/en/docs/">View Documentation</a>
</div>
</div>
<div class="c-card" id="python">
<div class="c-card-img">
<img className="d-block" src="https://content.techgig.com/thumb/msid-
79386213,width-860,resizemode-4/5-Myths-around-Python-programming-language-that-
every-programmer-must-know.jpg?88712"
alt="Python"></img>
</div>
<div class="c-card-con">
<p>Python is an interpreted high-level general-purpose programming language.
Python's design philosophy emphasizes code readability with its notable use of significant
indentation. Its language constructs as well as its object-oriented approach aim to help
programmers write clear, logical code for small and large-scale projects.</p>
<a href="https://www.python.org/">Python Tutorial</a>
<a href="https://www.python.org/">View Documentation</a>
</div>
</div>
<div class="c-card" id="angular">
 57

<div class="c-card-img">
<img
className="d-block"
src="https://www.amarinfotech.com/wp-content/uploads/2020/01/Why-Angularjs-is-the-
best-front-end-framework.jpg"
alt="Angular"
/>
</div>
<div class="c-card-con">
<p>AngularJS is used as the frontend of the MEAN stack, consisting of MongoDB
database, Express.js web application server framework, AngularJS itself (or Angular), and
Node.js server runtime environment.</p>
<a href="https://angularjs.org/">Angular Tutorial</a>
<a href="https://angularjs.org/">View Documentation</a>
</div>
</div>
</div>

</div>

</div>
<footer class="c-footer">
<div class="c-inner">
Copyright BuildOut. All rights reserved. For internal use only.
</div>
</footer>

</div>
)
}
export default New
 58

User Register.js

import React,{useState} from 'react'

import Axios from 'axios';
// import './Register.css'
import { Link } from 'react-router-dom';
import 'bootstrap/dist/css/bootstrap.min.css';
import {useHistory} from 'react-router-dom';

const Register = (props) => {

const history=useHistory()

const[name,setName]=useState('');
const[email,setEmail]=useState('');
const[phoneNo,setphoneNo]=useState('');
const[passwordd,setPassword]=useState('');

// const[errors,setErrors]=useState({})
function validateForm() {
if(!name)
return("Name Required")
}

function ValidateEmail()
{
if (!email)
{
return ("Email Required")
}
 59

else if (!/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-
]+)*$/.test(email))
{
return("Invalid Email")
}
}
function validatephoneno(){
if(!phoneNo)
{
return("Phone No Required")
}
else if(!/^\d{10}$/.test(phoneNo)){
return("Number Should Be Greater Than 10")
}

}
function validatepassword(){
if(!passwordd){
return("Password Required")
}
else if(!/^(?=.*[0-9])(?=.*[!@#$%^&*])[a-zA-Z0-9!@#$%^&*]{7,15}$/.test(passwordd))
{
return("password should have one uppercase,number and special character ")
}
}
const submit=(a,c,d,e)=>{
const register={
user_name:a,
email_id:c,
phoneNo:d,
password:e,
 60

}
Axios.post('http://localhost:8000/users/addUser',register)
.then((res)=>{ console.log(res.data)
alert(res.data.message)
return Axios.post('http://localhost:8000/verify/verification',{
user_id:res.data.data._id,
})
.then((res)=>{
console.log(res.data) })
.catch((e)=>console.log(e))
})

.catch((e)=>{alert(e.message)})
console.log(register)
}

const handlesubmit=(e)=>{

e.preventDefault()
}

return (
<div class="wrapper">
<nav className='navbars'>
<Link to='/navbar/home' className='navbar-links'>
BUILD OUT
<i class='fab fa-firstdraft' />
</Link>
<div class="topbar-items">
<ul className="navbar-menu">
 61

<li className="navbar-item">
<Link to='/login' className='navbar-links'>
Login
</Link>
</li>
<li className="navbar-item">
<Link to='/Register' className='navbar-links'>
Register
</Link>
</li>
</ul>
</div>
</nav>
<div class="app-container bit-container">
<div class="admin-cards reg-form">
<span></span>
<div class="card-body">

<form class="login-form" onSubmit={handlesubmit} className="form">

<h3>Register</h3>
<div className="form-inputs" >
<label htmlFor="name" className="form-label" > Name</label>
<input type="text" name='name' placeholder=" Enter Your Name"
className="form-control" onChange={(e)=>setName(e.target.value)}/>
{validateForm()}
</div>

<div className="form-inputs">
<label htmlFor="email" className="form-label"> Email</label>
<input type="email" name='email'placeholder=" Enter Your EMAIL"
className="form-control " onChange={(e)=>setEmail(e.target.value)} />
 62

{ValidateEmail()}
</div>
<div className="form-inputs">
<label htmlFor="phone NO" className="form-label"> Phone NO:</label>
<input type="text"name='phoneNo' placeholder=" Enter Your PHONE NO"
className="form-control"onChange={(e)=>setphoneNo(e.target.value)} maxLength='10'/>
{validatephoneno()}
</div>
<div className="form-inputs">
<label htmlFor="password" className="form-label"> Password</label>
<input type="password" name='password'placeholder=" Enter Your
PASSWORD" className="form-control"onChange={(e)=>setPassword(e.target.value)}/>
{validatepassword()}
</div>
<div class="reg-button">
<a className="login"
onClick={()=>{submit(name,email,phoneNo,passwordd);props.history.goBack()}}
disabled={validateForm()}>Register </a>
</div>
</form>

</div>
</div>

</div>
<footer class="c-footer">
<div class="c-inner">
Copyright BuildOut. All rights reserved. For internal use only.
</div>
</footer>

</div>
 63

)
}
export default Register

User login.js

import React,{useState}from 'react'

import {useDispatch} from 'react-redux';
// import './login.css'
import { Link} from 'react-router-dom';
import { login } from '../Redux/Auth/Login/Action';
import 'bootstrap/dist/css/bootstrap.min.css';
const Login = () => {
const dispatch=useDispatch();
const[email_id,setEmail_id]=useState('');
const[password,setPassword]=useState('')

return (

<div class="wrapper">
<nav className='navbars'>
<Link to='/navbar/home' className='navbar-links'>
BUILD OUT
<i class='fab fa-firstdraft' />
</Link>
<div class="topbar-items">
<ul className="navbar-menu">
 64

<li className="navbar-item">
<Link to='/login' className='navbar-links'>
Login
</Link>
</li>
<li className="navbar-item">
<Link to='/Register' className='navbar-links'>
Register
</Link>
</li>
</ul>
</div>
</nav>

{/* <div class="topbar-class">

<div class="contain">
<h5 className="app-name">BuildOut</h5>
<div class="topbar-items">
<Link to='/login' className='topbar-links'>
Login
</Link>
<Link to='/Register' className='topbar-links'>
Register
</Link>
</div>
</div>
</div> */}
<div class="app-container bit-container">
<div class="admin-cards login-page">
<span></span>
 65

<div class="card-body">
<form class="login-form form-group">
<h3>Login</h3>
<div className="login-inputs" >
<label htmlFor="email" className="form-label" > Email</label>
<input type="email" name='email' placeholder=" Enter Your Email"
className="form-control" onChange={(e)=>setEmail_id(e.target.value)}/>
</div>
<div className="login-inputs">
<label htmlFor="password" className="form-label" > Password</label>
<input type="password" name='password' placeholder=" Enter Your Password"
className="form-control" onChange={(e)=>setPassword(e.target.value)}/>
</div>
<div class="login-button">
<a class="login"
onClick={()=>{
dispatch(login(email_id,password))
}

} > Login</a>
<Link class="login" to='/loginotp'>Login with otp </Link>
</div>
</form>
</div>
</div>

</div>

<footer class="c-footer">
<div class="c-inner">
Copyright BuildOut. All rights reserved. For internal use only.
 66

</div>
</footer>

</div>

)
}

export default Login

Post.js

import {useSelector,useDispatch} from 'react-redux';

import { Avatar, Card } from '@material-ui/core';
import { dislike,like} from '../Redux/Auth/Login/DisplayAction';
import ThumbUpAltIcon from '@material-ui/icons/ThumbUpAlt';
import ThumbDownIcon from '@material-ui/icons/ThumbDown';
import SimpleModal from './Pop';
import { Link } from 'react-router-dom';

const Post = ({id}) => {

const dispatch=useDispatch();
const user = useSelector(state => state.user.user)
console.log(user)
const Display = useSelector(state => state.display.display)
console.log(Display)
 67

return (
<div class="row">
{Display.map(e=>id === e.skill._id ?
<div className="col-xl-12 col-lg-12 col-12">

<div className="admin-cards">
<span></span>
<div className="card-head">
<Avatar alt={"title"} src={e.skill.photo} />
<div className="card-head-in">
<div className="card-head-name">
<h5>{e.skill.Title}</h5>
<div class="name">
{e.user.user_name}
</div>
</div>
</div>
</div>
<div className="card-body">
<div className="card-body-in">
<strong> Title:</strong> {e.bit.title}
</div>
<div className="card-body-in">
<strong> Content:</strong>{e.content}
</div>
<div className="card-foot">
<ThumbUpAltIcon className={e.like.includes(user._id)?"like_icon":"like_icons"}
onClick={()=>{dispatch(like(e._id,user._id));}} size={100}/>{e.like.length}
 68

<ThumbDownIcon
className={e.dislike.includes(user._id)?"dislike_icon":"dislike_icons"}
onClick={()=>{dispatch(dislike(e._id,user._id))}} size={100}/>{e.dislike.length}
<div class="d-flex flex-fill align-items-center justify-content-center">
<div className="link">
<Link to={{pathname:'/navbar/postDetails',state:e}} >View</Link>
</div>
<div class="link">
<Link to={{pathname:'/navbar/quiz',state:e.bit._id}}>Attend Quiz </Link>

</div>
</div>

<div className="warning">

<SimpleModal postid={e._id} count={e.reports.length}/>

</div>
</div>
</div>
</div>
</div>
:<></> )}

</div>

)
}

export default Post

 69

Styles.css

.app-container {
min-height: calc(100vh - calc(4.5rem + 2.5rem));
padding: 2rem;
}
@media (min-width: 1280px) {
.admin-home-cards {
margin: 0 12rem;
}
}
/* .admin-home-cards{
display:flex;
flex-direction: column;
} */

.admin-home-cards {
display: flex;
flex-direction: column;

position: relative;
}
.admin-cards {
display: flex;
flex-direction: column;
margin-bottom: 3rem;
/* box-shadow: 10px 10px 10px rgb(0 0 0 / 20%); */
border-radius: 0.75rem;
background: transparent;
border: 2px solid #2bae66ff;
 70

color: #000;
width: 100%;
transition: 0.5s;
position: relative;
}
.admin-cards:hover {
transform: translateY(-20px);
}
/* .admin-cards:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 0.75rem;
background: linear-gradient(45deg, #ffbc00, #ff0058);
}
.admin-cards:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #00d0ff;
filter: blur(10px);
} */
.skill_name a {
color: #000;
 71

text-transform: capitalize;
cursor: pointer;
}
.skill_name a:hover {
text-decoration: none;
color: #2bae66ff;
}
.admin-warning {
justify-content: flex-end;
display: flex;
flex: 1;
}
/* .admin-cards span {
position: absolute;
top: 2px;
left: 2px;
right: 2px;
bottom: 2px;
z-index: 2;

background: #000;
border-radius: 0.75rem;
} */

.admin-cards .card-head {
position: relative;
z-index: 10;
border-radius: 0.75rem 0.75rem 0 0;
display: flex;
align-items: center;
 72

justify-content: flex-start;
padding: 0.5rem;
color: #fff;
/* border-bottom: 2px solid #15f4ee; */
background: #2bae66ff;
}

.admin-cards .card-head-in {
display: flex;
margin-left: 1rem;
justify-content: space-between;
align-items: center;
flex: 1;
color: white;
}
.card-head-name {
flex: 1;
padding-left: 1rem;
}
.card-head-name .name {
margin-left: 1rem;
}
.admin-cards .card-body {
padding: 1rem;
position: relative;
z-index: 10;
}
.admin-cards .card-body-in {
margin-bottom: 0.5rem;
display: -webkit-box;
 73

-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.admin-cards .card-foot {
display: flex;
align-items: flex-start;
margin-top: 2rem;
margin-bottom:1rem;
margin-right:1rem;
}
.card-foot .warning {
justify-content: flex-end;
display: flex;
}
.card-foot .link {
display: flex;
align-items: center;
justify-content: center;
margin-left: 1rem;
}
.card-foot .link a {
color: #000;
border: 2px solid #2bae66ff;
border-radius: 0.5rem;
text-decoration: none;
padding: 0 1rem;
font-weight: 500;
transition: 0.5s;
}
 74

.like_icon,
.dislike_icon {
margin-right: 2px;
}
.dislike_icon {
margin-left: 1rem;
}

/* Skill page */

.card-head-in .title {
color: white;
font-size: 1rem;
font-weight: 600;
text-decoration: none;
}
.col-2 {
display: flex;
}
.card-body p {
font-size: 1rem;
margin-left: 1rem;
}
.skill-card-foot {
display: flex;
padding: 0 1rem 1rem;
flex: 1;
align-items: flex-end;
}
 75

.skill-card-foot .skill-button {
flex: 1;
}
.skill-card-foot.home-skill-button .skill-button {
flex: 0 0;
color: #000;
border: 2px solid #2bae66ff;
border-radius: 0.5rem;
padding: 0.5rem 1rem;
font-weight: 600;
text-transform: capitalize;
text-decoration: none;
cursor: pointer;
display: flex;
justify-content: center;
}
.skill-card-foot.home-skill-button {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
.skill-button a {
padding: 0.25rem 1rem;
background: transparent;
text-transform: uppercase;
cursor: pointer;
color: #000;
border: 2px solid #2bae66ff;
border-radius: 1rem;
 76

font-weight: 600;
}
.add-skill {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.add-skill .add-skill-box {
box-shadow: 1px 1px 6px 2px #2bae66ff;
padding: 3rem;
color: #000;
font-size: 1.25rem;
font-weight: 600;
}

.skill-title,
.skill-file,
.skill-text {
margin-bottom: 1rem;
}
.skill-button {
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
}
.skill-button a:hover {
/* box-shadow: 0 5px 10px 0 #15f4ee inset, 0 5px 10px 0 #15f4ee,
0 5px 10px 0 #15f4ee inset, 0 5px 10px 0 #15f4ee; */
 77

text-decoration: none;
}

/* Editbit */
.app-container.bit-container {
display: flex;
align-items: center;
justify-content: center;
}
.bit-card {
padding: 2rem;
position: relative;
display: flex;
flex-direction: column;
border: 2px solid #2bae66ff;
border-radius: 0.5rem;
justify-content: center;
align-self: center;
}
.bit-card .bit-card-in {
margin-bottom: 1rem;
background: transparent;
color: #000;
border: 2px solid #2bae66ff;
border-radius: 0.5rem;
padding: 1rem;
display: flex;
text-transform: capitalize;
min-width: 20rem;
}
 78

.admin-cards.add-post {
width: auto;
padding: 2rem;
}
.margin-left {
margin-left: 1rem;
}
.mt-3 {
margin-top: 1rem;
}
.add-post-select {
display: flex;
margin-bottom: 1rem;
}
.addpost-text {
margin-bottom: 2rem;
}
.bit-icons {
display: flex;
flex: 1;
align-items: center;
justify-content: flex-end;
}

.edit-icon {
margin-right: 1rem;
}

.bit {
margin-top: 1rem;
 79

/* navbar */
nav {
background: #2bae66ff;
height: 4.5rem;
display: flex;
align-items: center;
font-size: 1.2rem;
padding: 1rem;
border-bottom: 2px solid #2bae66ff;
position: sticky;
z-index: 999;
top: 0;
font-family: sans-serif;
}
nav .navbar-links {
color: #fff;
font-size: 30px;
text-decoration: none;
padding: 0.5rem 1rem;
margin: 1rem 1rem;
}
nav ul .navbar-links {
color: #fff;
font-size: 18px;
text-decoration: none;
padding: 0.5rem 1rem;
font-family: poppins;
border-radius: 10px;
 80

margin: 1rem 1rem;

cursor: pointer;
transition: 1.5s;
text-transform: uppercase;
}
nav ul .navbar-links:hover {
border: 2px solid #fff;
}

.navbar-item .navbar-search {
border: 2px solid #15f4ee;
}
.navbar-item {
color: #fff;
}
.makeStyles-searchIcon-3 {
color: #fff;
}
.MuiInputBase-root {
border: 2px solid #fff;
border-radius: 0.5rem;
box-shadow: 5px 5px 56px #fff;
}
.navbard-item.profile-item svg {
width: 2em;
height: 2em;
}

.wrapper {
background-color: #fff;
 81

/* post details */
.post-img {
height: 30px;
}
.card-head img {
height: 4rem;
width: auto;
}
.card-foot-in {
display: flex;
flex: 1;
padding-left: 2rem;
}

/* profile */
.profile {
display: flex;
justify-content: center;
align-items: center;
height: auto;
color: #000;
text-decoration: none;
font-size: 1.25rem;
font-weight: 500;
/* border:2px solid #15f4ee;
border-radius: .5rem; */
}
.profile:hover {
 82

text-decoration: none;
color: #000;
}
.profile-card {
border: 2px solid #2bae66ff;
padding: 0.25rem 1rem;
margin-bottom: 0.5rem;
border-radius: 3rem;
display: flex;
align-items: center;
justify-content: flex-start;
min-width: 10rem;
margin-right: 1rem;
}
.skill-button.postdetail-btn {
margin-top: 3rem;
color: black;
}
.postdetail-btn a {
color: black;
}
.profile-skills {
position: relative;
display: flex;
flex: 1;
align-items: center;
flex-wrap: nowrap;
}
.profile-follow {
min-height: 20rem;
 83

}
.skill_name {
color: black;
display: flex;
align-items: center;
justify-content: space-between;
flex: 1;
}
/* login */
.login-page {
width: auto;
}
.login-form {
margin: 3rem;
color: #000;
}
.form-label {
color: #000;
}
.login-button {
margin-top: 1rem;
}
.login {
padding: 0.25rem 1rem;
border: 2px solid #2bae66ff;
border-radius: 0.5rem;
color: #000;
font-weight: 600;
font-size: large;
cursor: pointer;
 84

}
.login:last-child {
margin-left: 1rem;
}
.login:hover {
text-decoration: none;
color: #000;
}
.form-control:hover {
box-shadow: 1px 2px 30px #fff;
}

.reg-form {
width: 50%;
padding: 3rem;
}
.card-body h3 {
text-align: center;
}

.reg-button {
display: flex;
align-items: center;
justify-content: center;
margin-top: 1rem;
}

.carousel-control-prev,
.carousel-control-next {
top: 50%;
 85

@media (max-width: 590px) {

.profile__body {
display: flex;
flex-direction: column;
}
}
@media (max-width: 590px) {
.profile__body__left {
width: 100%;
}
.new {
width: 100%;
margin-left: 0;
margin-top: 2rem;
}
}
.textfield {
color: white;
}
.MuiAvatar-fallback {
margin-right: 0;
}
.reports {
flex: 0 0 30%;
width: 30%;
position: relative;
margin-left: 2rem;
}
 86

.app-container.post-con {
display: flex;
}
.reports .card-body h2 {
text-align: center;
border-bottom: 2px solid #15f4ee;
padding: 1rem;
}
.reports .card-body {
padding: 0;
}
.report-body {
margin: 0 1rem;
border-bottom: 1px solid #ccc;
padding: 1rem 0;
}
.report-body .icon {
flex: 1;
display: flex;
justify-content: flex-end;
}

.Quiz {
background-color: #fff;
padding: 1rem 1.125rem;
box-shadow: 0 1px 5px rgb(158 164 186 / 20%);
border-radius: 0.375rem;
margin-bottom: 1rem;
border: 1px solid #000;
}
 87

.quiz-button {
margin-top: 2rem;
}

.quiz-btn {
margin-right: 1rem;
}
.create__icon {
margin-left: 0;
}
 88

BackEnd
const express = require('express');
const {checkPermission}=require('../Middleware/permission')
const router =express.Router();

const User =require('../Model/User')

const Skill=require('../Model/Skill')
const Bit =require('../Model/Bit')
//add a skill

router.post('/addskill',checkPermission(), async (req, res) => {

try {
const newskill = new Skill(req.body);

await newskill.save()
.then((e)=>res.status(201).send({data:e}))
}
catch (err) {
res.status(404).send({err:"invalid data"});
}
});
// router.post('/adduser',async(req,res)=>{

// try{
// const adduse= new Skill.find({});
// }
// })
 89

//to display all skills

router.post('/skills',checkPermission(), async (req, res) => {

try {
const skill = await Skill.find({});
res.send(skill);
} catch (error) {
res.status(404).send({ error: 'Path not found' });
}
});

//to display skill using id

router.post('/id_skill',checkPermission(), async (req, res) => {

try {
const skill = await Skill.findById({_id:req.body._id});
res.send(skill);
console.log(skill);
} catch (error) {
res.status(404).send({ error: 'Path not found' });
}
});

//to get skill count

router.post('/totalcounts',checkPermission(), async (req,res)=>{
try{
const skill=await Skill.find({});
const count=skill.length;
console.log(count);
res.status(200).send({"Total Skills":count})
 90

catch (error) {
res.status(500).send({ error: 'bit not found' });
}
});
// skill id to count to bits presented
router.post('/count',checkPermission(),async (req,res)=>{
try{
const skill=await Bit.find({skill_id:req.body.skill_id});
const count=skill.length;

console.log(count);
res.status(200).send({"Total Skill Bits":count})
}

catch (error) {
res.status(500).send({ error: 'skill not found' });
}
});

router.post('/newuser',checkPermission(),async (req,res)=>{
try{
const user=await Skill.find({user_id:req.body.user_id});
const userdetails= user.map((e)=>{
return{
user_id:e._id,
title:e.Title,
Description:e.Description
 91

}
})
res.status(200).send({"user":userdetails})
}
catch (error) {
res.status(500).send({ error: 'user not found' });
}
});

router.post('/getskill',checkPermission(),async (req,res)=>{
try{
const user=await Skill.find({followers:req.body.user_id})
console.log(user);
const skill=user.map((e)=>{
return{
Title:e.Title
}
})
res.send(skill)

}
catch (error) {
res.status(500).send({error:'error message'})
}
});
router.post('/userskills',checkPermission(),async (req,res)=>{
try{
const skill=await Skill.find({followers:req.body.user_id});
const skilldetails= skill.map((e)=>{
 92

return{
user_id:e.user_id,
skill_id:e._id,
title:e.Title,
Description:e.Description,
photo:e.photo
}
})
res.status(200).send({"skills":skilldetails})
console.log(skill)
}
catch (error) {
res.status(500).send({ error: 'skill not found' });
}
});

router.get('/allusers',checkPermission(),(req,res)=>{
Skill.find()
.populate("followers","_id user_name")
.then((skills)=>{
res.send(skills)
}).catch(err=>{
console.log(err)
})

})

router.get('/userskills',checkPermission(),(req,res)=>{
Skill.find({followers:req.body._id})
.populate("followers")
 93

.then((skills)=>{
res.send(skills.followers)
}).catch(err=>{
console.log(err)
res.status(404).send({message:"not followed any skill"})
})

})

//delete a skill
router.delete('/deleteskill/:id',checkPermission(), async (req, res) => {
try {
const skill = await Skill.findById(req.params.id);
if (!skill) {
return res.status(404).send({ error: 'skill not found' });
}
skill.remove()
res.send(skill);

} catch (error) {
res.status(500).send({ error: 'Internal server error' });
}
});

router.post('/follow',checkPermission(),async(req,res)=>{
const skill = await Skill.findOne({ _id:req.body._id});
console.log(skill)
const user = req.body.user_id
console.log(user)
const follow = skill.followers.includes(user)
 94

console.log(follow);
if (follow === true) {
skill.followers.remove(user)
}
else{
skill.followers.push(user)
}
try {
await skill.save();
res.status(201).send(skill);
} catch (err) {
res.status(500).send("invalid skill")
}})

router.patch('/updateskill/:id', async (req, res) => {

const updates = Object.keys(req.body);

console.log(updates);
const allowedUpdates = ['Title'];
const isValidOperation = updates.every((update) => {
return allowedUpdates.includes(update);
});

if (!isValidOperation) {
return res.status(400).send({ error: 'Invalid Operation' });
}

try {
 95

const skill = await Skill.findById(req.params.id)

console.log(skill);
if (!skill) {

return res.status(404).send({ error: 'skill not found' });

}
updates.forEach((update) => {
skill[update] = req.body[update];
});
await skill.save();
res.send(skill);
} catch (err) {
res.status(500).send({error: err.message});
}

});

module.exports = router