ITSC Internship Presentation

RESUME APPLICATION
IT SOLUTIONS CENTER

PROJECT
REQUIREMEN
TS AND
FEATURES:
• Create a application which will be used by two
types of consumers: Applicants and Managers.
• Users must be able to submit the application
form which includes details like First name,
Last name, Email, Job role along with their
resume attached.
• Managers who are admins must be able to
login using valid credentials and view the list of
applicants in tabular grid form and be able to
delete the applicant(soft delete).
• Managers should be able to sort, search, filter
among the applicants.

TECHNOLOGIES USED:
• Angular2+ Component based architecture for Single Page Application.
• NodeJs and ExpressJs for backend server side programming.
• PostgreSQL as Database storage and BookshelfJs for ORM communication.
• HTTP requests for CRUD operations between front-end and back-end
• Multer library for resume file upload.
• Bcrypt module for storing and verifying password in form of hashes.
• Essential JS2 for displaying applicants data in form of tabular grid in Angular
2.
• Why Angular 2
• Why Essential JS2

SPRINT CYCLE ORGANIZATION
SPRINT-1 SPRINT-2 SPRINT-3
• Applicants Submit form
using Angular2+
Component based
architecture
• Backend Server creation
at port-4200
• PostgreSQL DB Creation
and tables creation
• Connecting Submit form
with backend NodeJs
Server(app.js)
• Data communication
between front end form
and backend server
using Normal SQL query
language.
• Inserting Data from
backend to Database
table created
• Implemented resume
upload using Multer
library.
• Manager Login form
using Angular2+
Component architecture.
• Angular routing for
moving from submit
form to manager login
form
• Manager username and
password authentication.
• Implemented BookshelfJs
library for database
CRUD operation(removed
raw SQL from Sprint-1)
• Data communication for
login authentication.
• Implemented soft delete
of applicant
• Implemented Home page
component
• Added routing variables
for redirecting between
different components
• Essential Js2 for tabular
grid display and sorting
and filtering applicants
• Implementing Bcrypt for
storing password in form
of Hash.
• Adding Bootstrap styles
for different buttons and
alert messages.

Client Server architecture
Applicant Flow
Chart
Manager Flow CHart

DEVELOPMENT PROCESS
Day-1:
• Received the project requirements and understood and spent some time on dividing my
application into small components and estimated time for each components.
• Divided the project into 3 Sprints(approx. 30Hrs each) and distributed my components
among 3 sprints.
Sprint-1:
• Since I was using Anguar2, I created a component for submitform. Added HTML code
using different angular directives like ngmodel, ngif, ngfor, ngsubmit, [hidden] for
capturing the form data and two binding of data.
• Created a .ts file for the submit form and added functions for submit, upload, resume file
selection buttons.
• Created a service.ts file where all the business logic and HTTP request to backend is
written.
• Backend server created at port-4200 and PostgreSQL test Database is created and
connection is established between NodeJs server side and Database.
• ExpressJs is implemented and HTTP requests for CRUD operations is done.
• Data communication between front end submit form and database is implemented using
Raw SQL queries and HTTP requests.
Sprint-2:

• Created another component for Manager login form and HTML code is added with angular
directives like ngmodel, ngsubmit, [hidden], (click) for two way data binding and
communication between .ts file and .html
• Created .ts file where a class for managerform is created with methods like login, delete,
managerlist, ngonint is added.
• Routing component is added for moving between two components on click.
• Created a service.ts file where all the business logic for Login authentication and fetching
users from DB using CRUD operations is written.
• Established communication between front end and database for manager authentication
using HTTP requests and authentication logic.
• Removed the raw SQL queries in Sprint-1 and replaced with Bookshelf.Js queries for both
manager and submitform components.
Sprint-3:
• Implemented EssentialJS2 for displaying applicants fetched in form of tabular grid.
• Added sorting, filtering, paging, searching features using the EssentialJs2 library.
• Created another component Homecomponent which serves as home page for application
and routing directives are added.
• Bootstrap elements are added for UI like alert Messages, button designs and styling of
HTML pages.

CHALLENG
ES FACED
DURING
SPRINTS:
• After creating server and trying to hit the server
on clicking submit using HTTP request I was
getting CORS Access Control Errors.
• Since UI-Grid was not meant for Angular2+, I
initially used Angular Datatables and came
back to Essential Js2 for displaying users data.
• File upload using Multer: This is the part which
I took more time than estimated. I was not able
to store the Resume file and after debugging
errors step by step I found the correct syntax
and method.
• Renaming the resume file uploaded and
capturing the new name to display it in tabular
grid.

THINGS LEARNED
• Since I was already aware of working on AngularJs, I chose to implement my
project using Angular2+ where I learned about the Angular2 and its
architecture, routing and what things are different from AngularJs
• Things get completed perfectly by dividing them into smaller modules and
assigning deadlines to each module.
• Learned basics of NodeJs, ExpressJs, querying using Bookshelf.js, File upload
using Multer.
• Error resolving using the console.log() and alert() functions.
• Using stackoverflow and github forums for understanding why we got that error.
• Debug you code by following the code flow like which is getting called after
which.RESOURCES:
• I mostly used the Documentations of each library/module and then tried to use
stackoverflow, Udemy, youtube tutorials for resolving my errors if any.
• https://stackoverflow.com/
• Learn and Understand NodeJS - https://www.udemy.com/course/understand-
nodejs/

ITSC Internship Presentation

Recommended

More Related Content

Similar to ITSC Internship Presentation (20)

Recently uploaded (20)

ITSC Internship Presentation