INTERNSHIP REPORT
Submitted in partial fulfilment of the requirement for the degree
of Bachelor of Technology
In
COMPUTER SCIENCE ENGINEERING
By:
Mainak Pandit(171365)
DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING AND INFORMATION
TECHNOLOGY
JAYPEE UNIVERSITY OF INFORMATION TECHNOLOGY, WAKHNAGHAT
SOLAN-173234, HIMACHAL PRADESH
TABLE OF CONTENTS
Chapter No.
Topics
Page No.
Student Declaration
2
Certificate from the Supervisor
3
Acknowledgement
4
Summary
5
List of Figures
6
Glossary of terms used
7
Chapter 1
Company’s Profile
8-10
Chapter 2
Introduction to the Project
11-23
Chapter 3
Implementation details
24-32
Chapter 4
Testing and Results
33-34
Chapter 5
Learnings & Conclusion
35-36
References
37
1
DECLARATION
I hereby declare that this submission is my own work carried out at Josh Technology Group,
Gurgaon from Feb, 2021 to May, 2021 and that, to the best of my knowledge and belief, it
contains no material previously published or written by another person nor material which
has been accepted for the award of any other degree or diploma from a university or other
institute of higher learning, except where due acknowledgment has been made in the text.
Place: Gurgaon
Signature:
Date: May 22, 2021
Name: Mainak Pandit
Enrollment No: 171365
2
Project Report Undertaking
I Mr. Mainak Pandit – Roll No. 171365 Branch Computer Science and Engineering is doing
my internship with Josh Technology Group from Feb, 2021 to July, 2021.
As per procedure I have to submit my project report to the university related to my work that I
have done during this internship. I have compiled my project report. But due to COVID-19
situation my project mentor in the company is not able to sign my project report.
So I hereby declare that the project report is fully designed/developed by me and no part of the
work is borrowed or purchased from any agency. And I'll produce a certificate/document of
my internship completion with the company to TnP Cell whenever COVID-19 situation gets
normal.
Signature
Name- Mainak Pandit
Roll No.- 171365
Date- May 22, 2021
3
ACKNOWLEDGEMENT
I take this opportunity to express my sincere thanks and deep gratitude to all those people
who extended their wholehearted cooperation and have helped me in completing this
internship successfully.
First of all, I would like to thank Mr. Pamil Gurung, Mr.Shivam Agarwal, Mr. Ayush Gupta
and Ms. Avantika Gupta my mentors, who mentored me, guided me and challenged me.
I also thank my family and friends who greatly supported me during the course of the
Internship.
Last but not the least, I would like to thank our founders for considering me a part of their
organization and provide such a great Platform to learn and enhance my skills.
A very special thanks goes to all the faculties of Jaypee University of Information
Technology under whom guidance I have been able to excel in my career and become a part
of the JTG family.
Mainak Pandit
171365
Jaypee University of Information Technology
4
SUMMARY
This report is all about what I learned as an intern and the work I carried out in Josh
Technology Group, Gurgaon during my internship period from Feb, 2021 to May, 2021.
Josh Technology Group is a product development company working with various fast
growing US based startups on new products across multiple domains like Web & Mobile
Applications. Being a front end developer intern in this company I got an opportunity to learn
about various projects of different domains being developed and to interact with the team
associated with these projects. I went through the ramp-up process in the first month of my
internship where I have to do different kinds of assignments on different technologies which
enhanced my knowledge in various technologies as well as give me a better idea of how work
is carried out in the development of any application in an organization.
Working here has taught me that a project is not only a piece of code, it is a compilation of
uncountable number of modules and a process behind building these modules. Writing code
is just a small fraction of making an application. Planning, assigning, reviewing, fixing,
testing, compiling and tracking all this process are some other fractions of developing an
application.
I worked on a project named Calyxpod. It is a platform that brings alumni, students, and
faculty at a single place. It is a complete package for any placement activity to be carried out.
From registrations to the interviews and final result declaration, it tracks everything and helps
the company, training and placement cell of the college as well as student to track the process
at each step which makes the placement process very easier. By working on this project
technologies I learned about are: React and AngularJS.
Mainak Pandit
May 22, 2021
5
LIST OF FIGURES
1.
MVC Architecture
16
2.
Flow of Redux state
18
3.
Notification with small text
20
4.
Notification with long text
20
5.
Notification with text containing link
20
6.
How git works?
22
7.
Basic architecture of git
23
8.
View of the homepage
25
9.
Flexbox container styling options
26
10.
Tool for Pixel Perfect
26
11.
Example of designing Email Templates with <table>
27
12.
Rendering Graphs in Angular Assignment
28
13.
Tabular display of data along with filters
28
14.
Various themes provided by Wordpress
29
15.
Login Screen
30
16.
Search screen showing search results
30
17.
An example of fromNow()
31
18.
Font files compatibility in different browser versions
34
19.
Flexbox compatibility in different browser versions
34
6
GLOSSARY OF TERMS USED
Backlog item A project feature desired by customer .
Story- A statement from the end user perspective that defines the software requirements.
Product Backlog A prioritized list of all the desired features of the product being developed,
put together by the product owner.
Scrum An iterative incremental framework for managing complex work, such as product
development.
Sprint A period of time during which the team works on agreed on tasks. The recommended
length is 2 to 4 weeks.
Stand Up A status update of the work done a day before and the work to be done on that day.
Tasks Specific developments required to implement a feature.
VCS Version Control System.
Task Tracker An application such as JIRA use to track tasks such as issues, stories and
bugs.
7
Chapter - 1
COMPANY’S PROFILE
8
1. COMPANY PROFILE
1.1. Summary
Website: www.joshtechnologygroup.com
https://www.facebook.com/LifeAtJosh
Headquarters: Gurgaon, Haryana
Type: Company - Private
Industry: IT Services
Year Founded: 2009
Founders: Shshank Jain, Rishu Gupta, Amit Yadav
1.2. About Us
Josh Technology Group based in Gurgaon, India is a growing team of technology consultants and
innovators. JTG is a niche product development company working with various fast growing US
based startups on new products across multiple domains like Web & Mobile Applications.
JTG provides a rare opportunity to work on various new technologies & use them to innovate across
different domains by transforming ideas into real life products. There is a High Focus on Open Source
Technologies / Frameworks - Java, J2EE, Ruby on Rails, Django, etc.
JTG works primarily on web applications in various domains such as Mobile Advertising Platform,
Automotive Retail, Lead Analytics, E-Commerce Platforms, Social Networking, Corporate Branding
(Sports & Entertainment World). Also working on iPhone, Android & Blackberry Platforms.
Some of the domains on which JTG is working in are as follows - targeted advertising, automotive
retail, lead analytics, energy trading, mentoring platforms, social networking, server monitoring tools,
retail analytics, automotive insurance, medical insurance, health/lifestyle products, video
streaming/analytics, etc. Also working on its own products in the web / mobile space for the Indian
market.
JTG has a highly talented peer group that is very well respected in the technology world. We have
alumni of colleges such as IITs, NSIT, BITs, IIITs, Pune MCA, VIT, etc and Have previously worked
with companies such as Trilogy & Amazon. Clients range from exciting funded Startups in US &
India to Established Fortune 1000 Companies.
9
We work in small scrum teams with focus on fast iterations to deliver value. Our teams' extensive
design and engineering experience is critical to the quality of our work and our ability to deliver
elegant, highly scalable solutions. We lay a very strong emphasis on quality mentorship & learning.
Our culture is at the core of everything we do. We are known to make things happen. Think Big &
Achieve Bigger is the Value We Live By. Having said that we combine work with lots of fun & we
seriously mean it :) So, as we grow we're not only looking to hire the best and brightest, but we're also
looking for people that share our values.
10
Chapter 2
INTRODUCTION TO THE PROJECT
11
2. Introduction to the Project
2.1 About Project
CALYXPOD is a web and mobile application. It enables the Students of an Educational /
Professional Institute to be able to participate & benefit in all campus placements, and other
careers related activities being organised by their respective Colleges / Institutes. Students,
Faculty and Alumni can also interact amongst themselves, share information, job related
details, organise webinars and many other activities to foster an environment of continuous
learning and professional growth.
It tracks everything during a placement process whether it is the registration of students,
selection process during online tests and interviews and the announcement of the results. This
platform even provides the facility of organising online test. It has its own portal where
companies can organise their online test for selection process.
Colleges can use it for organising complete placements activities held in the campus and to
store information of all the students undergoing placement activity. Companies can also use
it to organise their personal placement drive to keep a record of who all are participating,
view their profile, shortlist, organise online tests, and announce results etc.
12
2.2 OBJECTIVES
● For the College
○ Maintain a complete database of the students in their college. All the
information required for placement activities like resume, projects, technical
skills of a student is available by the college.
○ Able to broadcast the placement activities of the company to the students.
○ Have contact information of all the students.
○ Can view notification of new placement drives and different rounds of any
placement activity.
○ View the full time jobs offered to the students.
○ View internship jobs offered to the students.
○ Store the information of all the departments like CSE, EC, Civil etc along with
its team members, students etc.
○ View data department wise.
○ View information about a particular person by applying different filters on the
complete data like department wise etc.
○ Add new students in their record.
○ Give access to the new students joining the portal.
○ Chat with the people.
○ View students of different batches.
○ Filter out the students who are eligible for sitting in a particular placement
drive.
○ View report of their placement activity like percentage of students placed,
highest package etc.
● For the Students
○ Enter their personal details like name, contact information, technical skills,
projects, hobbies, interests etc.
○ Add attachments like ID, results, certificates etc.
○ View opportunities for different profiles.
○ View on-campus placement drives details.
13
○ View off-campus placement drives details.
○ Get in touch with the alumni.
○ Apply for different placement drives.
○ Track his/her status in an ongoing placement activity.
○ View notifications of broadcast events by the college or different placement
broadcasts by the company.
● For the Company
○ Add new positions for recruitment.
○ Add new recruitment drives.
○ Invite colleges and students for recruitment drives.
○ View all the openings.
○ View information of all the recruitment drives.
○ View notifications of different drives, positions, offers etc.
○ View information of all the candidates who have applied for any position.
○ Track the status of candidate.
○ Update the status of each candidate undergoing a placement process.
○ View all the offers and joining information for an opening.
○ View all the information college wise.
○ Mark calendar for interviews, different rounds of a recruitment drive.
○ Announce results for placement process.
○ Inform colleges about the results.
2.3 TECH STACK
Some of the technologies and frameworks used during this project are:
2.3.1 AngularJS
AngularJS is a javascript framework. It is used to build single page applications that are
based on MVC architecture. It is an open-source front-end web application platform led by
the Angular Team at Google and by a community of individuals and corporations.
14
MVC stands for Model-View-Controller. It divides an application into three components:
1. Model: It is responsible for the complete flow of data between view and controller in
an application.
2. View: It is responsible for the presentation of data triggered by the controller
decision.
3. Controller: It is responsible for the complete interaction between the user and the data
model. It perform operations based on the input and modifies the data model.
Figure1 MVC Architecture
Some of the key features of AngularJS are:
● MVC Architecture
● Two-way binding: It is the synchronization of the data with the model. Whenever the
value of the data change the model bound with it automatically gets updated.
● Routing: Since AngularJS helps in making a single page application it provides a
support of routing for transition from one view to another.
● Cross-Browser Application
2.3.2 React
15
It is a Javascript framework developed by Facebook. It is used to build reusable UI
components. Some of its key features are:
● JSX: Javascript Syntax Extension. React tries to put markup and logic at the same
place called component. JSX helps in embedding the markup in JS.
● Components: It is the building block of any React application. Everything can be
scaled down to small components.
● Unidirectional flow of data and flux
There are two types of components in React:
● Functional Components: They are stateless components. If we don't want states in our
component, this is the best choice because they have better performance and more
reusable.
● Class Components: They are the ES6 classes. They have state and support lifecycle
methods.
2.3.3 Redux
It contains state of any Javascript application like React. It is a state management tool. All the
state of an application are stored at a place called store and the application can access these
states from here. Some of the key components of redux are:
● Store: All the state resides here. Application access the states wrapped up in a store.
● Action: It is basically an object that tells the reducer how to change the state. It
contains two properties type and payload.
● Reducer: It returns the state data, it gets triggered by the action type.
Methods used to interact with Redux API are:
● getState(): It returns the current redux state.
● dispatch(): It is used for dispatching an action.
● subscribe(): It is used for listening to the changes in redux state.
Connecting react with redux
16
For connecting react with redux we have two functions:
● mapStateToProps: It connects redux state to the props of the react component.
● mapDispatchToProps: It connects the redux action to the props of react component.
Figure2 Flow of Redux state
2.3.4 Django
It is a high level Python framework for Web. It helps in developing websites fast and easily
with clean pragmatic designs. Its main goal is to ease down the creation of complex databasedriven websites. Some of its main features are:
● Open source
● Vast and supported community
● Fully loaded
● Scalable
● Secure
● Rapid Development
● Versatile
2.3.5 Storybook
It is a very useful open source tool which is used to build UI components for various
frameworks like Angular, Vue, React etc in complete isolation. This tools helps the UI
developers to build their components independently and to showcase them in complete
isolation without any dependence on the backend.
17
A story is made for each component which can have a single state or multiple states and is
showcased on storybook app, completely outside the main app without worrying about any
type of requirement or dependencies.
A story can have many states for example A notification can be a:
i)
Small Text
ii)
Long Text
iii)
Text with a link
Figure3 Notification with small text
Figure4 Notification with long text
18
Figure5 Notification with text containing link
2.3.6 Task Tracker
JIRA is Atlassian’s popular project- and issue-tracking platform used by development and
technical support teams to get more work done and faster. It’s available on-demand through a
monthly subscription (software-as-a-service), or it can be deployed on your own servers for
an upfront license.
It combines:
● issue tracking - a software application that allows to record and follow the progress
of every problem or "issue" that user identifies until the problem is resolved.
● agile project management - an iterative approach to planning and guiding project
processes.
● customizable workflow, and a pluggable integration - integrates with Freshdesk,
GitHub, Zendesk, Zapbook, Asana and so on.
● the kanban board to increase the velocity - consist of to do/in progress/in review/done
divisions
Key Benefits of JIRA Tool and Training
1. Better visibility
One of the primary problems that slows any project down, not just in software
development but also in other areas of life, is a lack of clear and open visibility as to
what tasks need to be done and when.
2. Better prioritization
19
Another benefit of using JIRA is that it allows you to prioritise tasks better and for all
members of the team to see which tasks need to be completed right away and which
can be dealt with later.
3. Increased productivity
When using JIRA, members of a team are always able to see exactly which task is
next up on the list for completion.
4. Anywhere & Anytime
A further benefit of the JIRA software is that it comes with widely available mobile
apps. This means that all team members can stay connected not just when in the office
or on their laptop, but also via their mobiles and tablets too.
20
2.3.6 Git
Git is a distributed version control system. It is also free and open source. It is a very useful
tool for development as it helps in coordinating work among the team members and it also
keeps track of all the changes in any file.
Every project has a git repository maintained locally and globally. Using git several
developers can work on the same code efficiently. Every change made in the code is stored as
Versions. Snapshots of every change is taken to maintain versions. Developers can work on
their local repositories and then push the code on remote repository. In this there won't be any
conflicts in the work done by various developers. If there are conflicts error will occur while
which can be resolved efficiently.
There are various version control systems like CVS, SVN, Mercurial etc
Figure6 How git works?
Let me explain about the architecture:
21
● Working directory is your current location of the folder you are working
with.
● Then you add your files to the staging area before saving the changes
(commit)
● After all the changes are made, you commit the files to the local repository
● Then you push the committed files to the remote repository
● If needed, you can push the changes from the remote repository to the local
repository
● Git allows you to create branches and switch to them when required
● After the changes are complete, you can merge the newly created branches
to the master branch
Figure7 Basic architecture of git
Chapter - 3
IMPLEMENTATION DETAILS
22
3.1 RAMP UPS
Before starting on any project work we have to go through a ramp up process where some
assignments are designed for us such that after complementing those assignments we will
have a good idea about the code structure and coding style followed in any organization
project. We will also learn about the technologies and frameworks used in the projects in
detail through these ramp ups so that we can continue on the project with ease. Codes of these
assignments were thoroughly reviewed and the review cycle continued till the code was
written perfectly according to the norms followed in organization.
3.1.1 RAMP UP 1 - Basic UI Assignment
Designed a UI template of the homepage of a website. Technologies used in this assignment
were HTML, SCSS, Javascript. Gulp was used for compiling SCSS To CSS. Gulp is a tool
used for automating the following tasks: preprocess CSS, minify code, run local server,
optimize images.
Figure8 View of the homepage
23
3.1.2 RAMP UP 2 - Advance UI Assignment
This assignment’s main motive was to learn about flex box.
Flexbox is a CSS property that provides an efficient way of designing layout, align and
distributes space among each item in a container. This property is very useful in designing
complex responsive structure very easily.
Figure9 Flexbox container styling options
In this assignment I designed a homepage of a website which was also pixel perfect with the
digital designs provided by the graphic designer. For pixel perfection a Google plugin was
used.
Figure10 Tool for Pixel Perfect
24
3.1.3 RAMP UP 3 - Email Template
We usually don't use table tags in HTML because it gets difficult for most of the screen
readers to parse the table and display it properly. So it is restricted to use table tags in normal
web pages. But for email templates we use only table tags, even <div> is not use for email
templates. The whole layout is designed using <table>, <tr>, td> tags because most of the
email clients do not support various CSS properties on tags other than <table>, <tr>, td>.
So I designed an email template using table tag in this assignment.
Figure11 Example of designing Email Templates with <table>
25
3.1.4 RAMP UP 4 - Angular 7 Assignment
After learning about basic CSS, HTML, Javascript I moved to frameworks like Angular,
React. I designed 2 sections of a website where I worked on graphs. Through this assignment
I learned various concepts of Angular like components, routing, parent child communication,
sibling communication, data binding, event binding, directives etc.
Figure12 Rendering Graphs in Angular Assignment
Figure13 Tabular display of data along with filters
26
3.1.5 RAMP UP 5 - Wordpress Assignment
Wordpress in a Content management system (CMS). It is an open source and a very useful
tool for designing static websites with changing contents in a short period of time.
Wordpress provides various themes and plugins that are free to download and easy to use for
designing websites with ease. It is SEO friendly, safe, secure and easy to manage. All in all it
is a great tool for designing sites with large changing contents like blogging sites. For a UI
developer wordpress is must know tool. I designed a web page in wordpress where I used
Advance Custom Field plugin. Wordpress provides WP-ADMIN where one can manage the
content to be displayed on the site. It uses HTML and PHP for writing codes.
Figure14 Various themes provided by Wordpress
27
3.1.6 RAMP UP 6 - React Assignment
In this assignment I designed a mini website with login/logout functionality. Data was
retrieved by interacting with an API and later stored in redux state. Connected react props
with redux state to access the data. This assignment taught a lot about react like components,
containers, react-redux interaction, API interaction, routing, type checking with proptypes,
JSX, destructuring data etc.
Figure15 Login Screen
28
Figure16 Search screen showing search results
3.2 CALYXPOD
I implemented various components used for the development of this project during my
internship. Being a Front End developer the task was to design components with some
dummy data and the component needs to be pixel perfect with the designs provided by the
designer. The framework used for front end development was React. Storybook was used for
developing each component. It helped in developing each component independently without
worrying about any dependencies. It also helped in developing reusable components as each
component was represented as a stories covering all the variations of the component as
different states of the story.
Some of the components I developed are:
● Notification Dropdown:
A dropdown component listing all the notifications with the details of each
notification and the time when the notification arrived.
For date and time manipulation we used moment.js library. Time from now the
notification arrived was calculated using fromNow() of moment.js.
moment([2007, 0, 29]).fromNow();
29
// 4 years ago
Figure17 An example of fromNow()
● Company Image Avatar
A reusable company image component that takes size and image as props. It renders a
circular component of the desired size specification with the image provided as props.
If the image is not provided it places a default image.
This component can be used anywhere in the project to display company image with
different specifications.
30
● Select Dropdown
Dropdowns are must have in any website. For consistency one use same styling for a
dropdown through out the website. Then why not make one dropdown and reuse
everywhere. That's what my task was. I designed a dropdown that accepts the
dropdown label and the list of content to be displayed in the dropdown menu as props
and render the dropdown. This component can be used everywhere by importing the
component.
● Table Component
A component that takes metadata and content of the table as props. The metadata
contains the headings of each column along with the relative size of each column. In
the table component I calculated the size of minimum column by dividing 100 by the
sum of relative sizes. This gave me the width of minimum size cell and by using this
value I calculated the width of each cell by multiplying this value with the relative
size of that column. Using this component a table of any number of rows and
columns can be rendered by passing the metadata and content to it.
This approach was used for designing tables instead of <table> because most of the
screen readers can not parse the table. Therefore use of <table> is strictly prohibited
in front end development.
● Share Button Component
A small button component that displays all the social media options on hover for
sharing any information on the various social accounts. For this component Extended
fab button of material ui was used.
Designing these small components pace up the process of front end development because one
can reuse these components instead of writing the same code again and again. It also keeps
the code short and clean.
31
Chapter - 4
TESTING AND RESULTS
32
Testing each and every component in front end development is very important. There are
various aspects that needs to be kept in mind while testing the UI of any web page. Some of
them are:
● Pixel Perfection
● Responsiveness
● Compatibility in different browsers
Development is going on everywhere with a fast pace. Browsers are getting updated within
years but still all browsers do not support all the CSS properties. Also everyone is not using
the latest upgraded version of the browser. Thus it is important to use such properties in the
development of website that a larger group of users. Here are some examples of compatibility
comparisons of different browsers for different properties.
Figure18 Font files compatibility in different browser versions
Figure19 Flexbox compatibility in different browser versions
33
Chapter - 5
LEARNINGS AND CONCLUSION
34
This internship was indeed a pool of knowledge. Not only have I gained knowledge in Front
End Development and different front end frameworks but I have also learned about how
development of any project takes place, how team works, how the work of each employee is
tracked, how work is assigned, what are the different stages of development, what are the
technical problems that one face in the development of any project, what all things are
required before the development of any project, what the code base should be like, what
norms need to be followed in the development.
Talking in terms of technical knowledge, I learned a lot in front end development. Some of
the key learning points are:
● Never use “id” and “important” for writing css properties because the increases the
specificity of the element thus it gets difficult to override the property. Always use
classes.
● Do not use <table> because most of the screen readers can not parse the table. Design
the tables using <div> and flexbox property.
● Apply class “clearfix” to the parent class while using float for an element.
● Make reusable components because it speed up the process of development and keep
the code clean and short.
● Before applying any CSS property check its compatibility with different browsers.
Use only those properties that cover up the browsers used by large group of users.
● DOCSTRING are very important, and every developer should make this as habit to
provide DOCSTRING with their code, so that the code is easily understood by any
other developer.
● While developing any component remember components are stateless, state are used
in containers.
35
REFERENCES
[1] Redux, https://redux.js.org/basics/basic-tutorial
[2] React, https://reactjs.org/docs
[3] Angular, https://angular.io/
[4] Wordpress, https://wordpress.org
[5] React-Redux, https://www.valentinog.com/blog/redux/
[6] Gulp, https://gulpjs.com/
[7] Storybook, https://storybook.js.org/
36