GOVERNMENT COLLEGE OF ENGINEERING

TIRUNELVELI - 627007
GOVERNMENT ASSISTED INTERNSHIP
Internship Project Report

Name & Register No A.Supriya

950821104040
Head of the Institute
Dr. P.Latha
Principal
Head of the Department Dr. G. Tamilpavai
Professor/CSE

Internship Coordinator Dr. A. Krishnaveni

Professor/Mech

Faculty Coordinator Dr. E. Siva Sankari

Associate Professor/CSE

1
 AN INDUSTRIAL TRAINING REPORT

Submitted by

A . S U P R I Y A (950821104040)
In partial fulfillment for the award of the degree of

BACHELOR OF ENGINEERING
IN
COMPUTER SCIENCE AND ENGINEERING

GOVERNMENT COLLEGE OF ENGINEERING

TIRUNELVELI -627007

2
3
 ACKNOWLEDGEMENT

First of all we would like to thank THE ALMIGHTY for giving a sound health
throughout the project phase. We extent our sincere gratitude to our PARENTS for
their moral, emotional and financial support.
We express our sincere thanks to GOVERNMENT OF TAMILNADU and
COMMISSIONER, Directorate of Technical Education, Chennai for giving this
opportunity to do the internship with financial support.

We also wish to convey our hearty thanksto our college principal Dr.P. LATHA,
M.E., PhD MISTE.,,Government College of Engineering,Tirunelveli for her
kind patronage.

we express our sincere gratitude to Dr. G. TAMIL PAVAI M.E., PhD MISTE.,
Head of the Department of Computer Science Engineering for facilitating us with
necessary resources and for her support to complete the Internship successfully.

We would like to extend our sincere thanks to Dr. A. KRISHNAVENI, M.E.,PhD

MISTE, Professor who arranged and reviewed the progress of our Government
Assisted Internship.

Our special thanks to our faculty advisor Dr. E. SIVA SANKARI M.E., Ph.D.,
Assistant Professor,who has been guiding us with kind advice,encouragement
throughtout the internship and helping us to complete this Internship with great
success.

We are indebted to convey our hearty thanks to General Manager Mr.VINOTH

RAJA KUNAPANDIAN for his kind guidance and advice.

With we express our sincere thanks to Manager (HR) Mrs. A.ANTO JOVITA
MARY for his guidance during this internship.

4
 COMPANY PROFILE
ICANIO TECHNOLOGIES, TIRUNELVELI

ABOUT ICANIO:
Icanio technologies, credible and ingenious software development company,
persistently delivering extensive solutions in application development, product
development and digital engineering.
Our distinguished design-led development process emphasizes that the
features and functionality of our apps and web systems lead to an innovative product,
validated by exhaustive user research.
Trusted software development company delivering solutions in Web, Mobile
& Product Development.

CONTACT INFORMATION:
Phone: 063791 67118
Website: https://www.icanio.com
Address : AP Towers No.A16, NGO ‘A’ Colony,North Main Road,
Tirunelveli-627007

5
 TABLE OF CONTENTS

CHAPTER CONTENT PAGE NO

1 INTRODUCTION 7
1.1 Front end development 7
1.2 Basics of Front end development 7

2 SIMPLE CALCULATOR USING REACT JS 9

2.1 Project overview 9
2.2 Implementation Details 9
2.3 Features 10

3 REACT COMPONENTS, LIFECYCLE, HOOKS 12

3.1 React Components 12
3.2 Component Lifecycle 12
3.3 React Hooks 13

4 SLIDER, SORTING USING REACT MUI 14

4.1 Slider 14
4.2 Sorting 15

5 NEXCENT WEBPAGE USING REACT MUI

COMPONENT 17
5.1 Desktop view 18
5.2 Tablet view 18
5.3 Mobile view 19

6 TASK PRO 20
6.1 Header Section 21
6.2 Form Section 21
6.3 Illustration Section 22

7 PERFIDO 23
7.1 SplashScreen 23
7.2 LogIn 24
7.3 Pricing 26
7.4 SignUp 29
7.5 Payment 30

8 STUDENT INFORMATION SYSTEM 32

8.1 Basic elements 32
8.2 Layout overview 34
8.3 Syntax 36

9 PARKXPERT 37
9.1 Logo and Branding 37
9.2 Sign-up form 39

6
 CHAPTER 1

INTRODUCTION:

1.1 Frontend Development:

Frontend development is the part of web development that focuses on the
visual and interactive aspects of a website or web application. It involves everything
that users see and interact with in their web browsers. The primary goal of frontend
development is to create an engaging, user-friendly interface that enhances the overall
user experience.

1.2 Basics of Frontend Development:

Languages:

i. HTML (HyperText Markup Language): The backbone of web content, used to

structure pages with elements like headings, paragraphs, links, and images.
ii. CSS (Cascading Style Sheets): Used for styling HTML elements, controlling
layout, colors, fonts, and overall aesthetics.
iii. JavaScript: A programming language that enables interactive features, such as
dynamic content updates, form validation, and animations.

Frameworks and Libraries:

i. CSS Frameworks: Libraries like Bootstrap or Tailwind CSS simplify styling and
responsive design.
ii. JavaScript Libraries/Frameworks: Tools like React, Angular, or Vue.js help in
building complex user interfaces more efficiently.

Responsive Design:

Techniques ensuring websites function well on various devices and screen sizes,
using CSS media queries and flexible layouts.

7
Version Control:

Systems like Git help developers manage changes in code and collaborate with
others effectively.

Tools and Development Environment:

Code editors (e.g., VS Code), browser developer tools, and build tools (e.g.,
Webpack) enhance productivity and streamline the development process.

Best Practices:

Writing clean, maintainable code, optimizing performance, ensuring

accessibility, and following design principles are essential for effective frontend
development.

i. Clean and Maintainable Code: Write clear, organized code for easier updates
and collaboration.
ii. Consistent Design: Use design systems or style guides to maintain visual
consistency across the application.
iii. User-Centric Approach: Prioritize the user experience by conducting usability
testing and gathering feedback.

Performance Optimization:

Techniques to enhance website speed and efficiency, including image

optimization, lazy loading, and minimizing JavaScript and CSS files.

Accessibility:

Ensuring websites are usable by people with disabilities, adhering toguidelines

like WCAG (Web Content Accessibility Guidelines).

8
 CHAPTER 2

SIMPLE CALCULATOR USING REACT JS:

The development of a simple calculator application using ReactJS. The
objective was to create a user-friendly interface that performs basic arithmetic
operations, demonstrating the capabilities of React for building interactive web
applications.

2.1 Project Overview:

Purpose:
The calculator allows users to perform basic operations such as addition,
subtraction, multiplication, and division. It is designed to provide immediate feedback
and ensure a smooth user experience.

Technology Stack:
Framework: ReactJS
Language: JavaScript (ES6)
Styling: CSS
Development Environment:Create React App

2.2 Implementation Details:

Setting Up the Project:
The project was initiated using Create React App, which sets up the necessary
environment and file structure for a React application. The following command was
executed.
Creating the Calculator Component:
A `Calculator.js` component was created to handle the logic and display of the
calculator.
The key features of this component include:
i. State Management:The component uses React’s `useState` hook to manage the
current input string.

9
ii. Event Handlers:Functions are defined to handle button clicks, clear inputs, and
calculate results.
iii. Input Display:The current input and result are displayed in a read-only input field.

UI Design:
The user interface was designed using CSS for a clean and simple layout.
The calculator consists of:
i. An input field for displaying calculations.
ii. A grid of buttons representing digits and operations.

2.3 Features:
i. Basic Operations: The calculator supports addition, subtraction, multiplication, and
division.
ii. Clear Functionality: Users can reset their calculations at any time.
Error Handling:Invalid calculations display an "Error" message.

Input Validation:
Ensuring that the input is valid before calculation was a challenge. The use of the
`Function` constructor mitigated risks associated with `eval`, but further input
sanitization is recommended for production applications.

User Experience:
Designing an intuitive interface that responds to user input promptly was
crucial. Ensuring all buttons were clearly labeled and accessible contributed to a
positive user experience.

Future Improvements:
i. Advanced Functions: Adding support for more complex mathematical operations
(e.g., exponentiation, square roots).
ii. Memory Functions:Implementing memory functions to store and recall values.
iii. Responsive Design: Ensuring the calculator is fully responsive for mobile devices.

10
 CALCULATOR

Fig:2.3 Calculator using Javascript

11
 CHAPTER 3

REACT COMPONENTS ,LIFECYCLE, HOOKS:

React is a popular JavaScript library for building user interfaces, particularly
single-page applications. This report explores the core concepts of React, including
components, lifecycle methods, and hooks, which enable developers to create
dynamic and interactive web applications.

3.1 React Components:

Definition:
React components are the building blocks of any React application. They are
reusable, independent pieces of UI that manage their own state and logic.

Types of Components:
i. Functional Components: These are simple JavaScript functions that return JSX.
They do not manage their own state until hooks are introduced.
ii. Class Components: These are ES6 classes that extend React.Component and can
manage their own state and lifecycle methods.
Component Props and State:
i. Props: Short for properties, props are read-only data passed from parent to child
components. They allow components to be dynamic and customizable.
ii. State: State is a mutable data structure that allows components to manage their
own data. Changes in state trigger re-renders.

3.2 Component Lifecycle:

Lifecycle Phases:
React components go through various lifecycle phases:
Mounting: The phase when a component is being created and inserted into the DOM.
Key methods include:
i. constructor()
ii. componentDidMount()

12
Updating:This phase occurs when a component's state or props change. Key methods
include:
i. shouldComponentUpdate()
ii. componentDidUpdate()
Unmounting: This phase occurs when a component is being removed from the DOM.
The key method is:
i. componentWillUnmount()

3.3 React Hooks:

Hooks are special functions that allow functional components to use state and
lifecycle features without needing to convert them into class components. Introduced
in React 16.8, they promote better organization of component logic.

i. useState: Allows functional components to manage local state.

ii. useEffect: Allows you to perform side effects in functional components, replacing
lifecycle methods.

Advantages of Using Hooks:

i. Simpler Code: Hooks enable cleaner and more readable code by eliminating the
need for class components.
ii. Reusability: Logic can be extracted into custom hooks, promoting code reusability.
iii.Easier Testing:Functional components with hooks are easier to test due to their
predictable behavior.

13
 CHAPTER 4

SLIDER,SORTING USING REACT MUI:

4.1 SLIDER:

Fig:4.1 Slider

The MUI `Slider` component in React allows you to create an interactive

control for selecting a value from a range. The slider can be horizontal or vertical and
can be customized to fit various use cases.

Key Features:
Value Display:You can track the current value of the slider, typically shown as a
tooltip or label. This value is dynamic and updates as the user interacts with the slider.

Range Control: You can define the minimum and maximum values for the slider,
setting boundaries for what the user can select.

14
Step Size: The step size determines how granular the increments or decrements will
be. For example, if the step size is 1, the slider moves in whole numbers.

Customization: MUI allows you to modify the appearance of the slider, such as
changing the color, size, or orientation. It can be integrated with different design
elements to match the overall UI theme.

Event Handling:When the slider is moved, an event is triggered, allowing you to

update the displayed value or perform other actions based on the slider's position.

Value Label:The slider can display the current value as the user moves it, which
improves usability and clarity.

Overall, the `Slider` component provides flexibility for a wide range of

scenarios where users need to adjust values visually, such as volume controls,
brightness adjustments, or any numeric range selection.

4.2 SORTING:

Fig:4.2 Sorting

15
 To implement sorting by upvotes in ascending and descending order using
Material-UI (MUI) in React, you would typically:

1. State Management: Maintain state for both the sorting order and the data being
sorted. For upvotes, the state will store the current sort direction and the sorted data.

2. Sort Function:Create a function to sort the data based on upvotes. The function
should toggle between ascending and descending order when the user clicks the sort
button.

3. Button or Trigger:In your UI (as shown in your image), you can create buttons
labeled "Most Upvoted" or similar to trigger the sorting logic.

4. Table Rendering:Display the sorted data in the table, which should automatically
update when the state changes.

Key features:
State Setup:You would store your table data (like the upvotes, titles, and dates) and
the current sorting direction (ascending or descending) in the component's state.

Sorting Logic:Create a function that sorts the data array based on the upvotes. This
function will check the current sort direction and adjust the order accordingly.

Button Click Handlers:When a user clicks the "Most Upvoted" button, the sorting
function is triggered, and the data in the table is rearranged based on the number of
upvotes. If the sort order is ascending, clicking the button again could reverse it to
descending.

16
 CHAPTER 5

NEXCENT WEBPAGE USING REACT MUI COMPONENT:

Fig:5.1 Nexcent Web Page in Different views

17
5.1 Desktop View (1440px):
Header:
Title: "Lessons and insights from 8 years"
Subtitle: "Our Clients" with icons representing different clients.
Button: "Get Started" (call to action).
Main Section:
Headline: "Manage your entire community in a single system"
Descriptions of features:
Membership Management
Online Reservations
Clubs and Groups
Visual: Image showcasing the system’s interface.
Client Highlight:
Section: "Helping a local business reinvent itself"
Stats: "2.4M Clients", "824,878 users", "128,857 transactions"
Button: "Learn More"
Secondary Section:
Feature: "How to design your site footer like we did"
Image: Responsive mobile design example.
Button: "Read More"
Footer Section:
Navigation links (Company, Services, Support).
Social media icons.
Copyright details.

5.2 Tablet View (744px):

Header:
Title: "Lessons and insights from 8 years" (slightly smaller text than desktop).
Client logos/icons appear in a tighter, smaller layout to accommodate the reduced
screen width.
Main Section:
Similar content as desktop, but the layout stacks vertically instead of side-by-side.

18
 Features (Membership Management, Reservations, Clubs/Groups) are listed in a
single column.
Client Highlight:
Content is stacked vertically: text first, then image, followed by stats.
Stats (Clients, Users, Transactions) appear in a smaller font.
Secondary Section:
Reduced text size for "How to design your site footer like we did."
The button and image are more compact and vertically aligned.
Footer Section:
Navigation is compact, with social media links stacked or in a small horizontal line.

5.3 Mobile View (360px):

Header:
Title: "Lessons and insights from 8 years" (much smaller font size).
All client logos are either stacked or placed in a compact row.
Main Section:
Content is in a single-column, vertical format.
Features (Membership Management, Reservations, Clubs/Groups) are listed one
after another with small icons.
Image is resized to fit mobile width, potentially displayed underneath the feature
descriptions.
Client Highlight:
Text, image, and stats are stacked vertically.
Stats are displayed in a very compact form with smaller fonts to fit within the
mobile view.
Secondary Section:
"How to design your site footer like we did" content is stacked.
Image takes up a good portion of the screen width, and the button is centrally
aligned.
Footer Section:
Stacked links for Company, Services, and Support.
Social media icons may be presented in a single line or stacked for easier navigation
on mobile.

19
 CHAPTER 6

TASKPRO:

Fig:6.1.i Header section

Fig:6.1.ii Login

20
 Fig: 6.1.iii College Information

6.1 Header Section:

Logo:
Positioned on the top left.
Text: "Task Pro" accompanied by a logo, which is a purple icon in the shape of
squares.

Title:
Large, bold heading: "Create an Account".
Subtitle: "Let's get started" in a smaller, lighter font, positioned right under the title.

6.2 Form Section:

Form Title:
No separate title, as the "Create an Account" heading at the top of the form
serves as the main heading for this section.

21
Form Fields:
1. User Name:
Placeholder text: "Enter your Full Name".
2. Email Address:
Placeholder text: "Enter your Email ID".
3. Mobile No:
Placeholder text: "Enter your Department".
4.Button:
Prominent purple button labeled "Proceed".
Link:
Below the form, there is a link to the login page: "Have an account? Login".
The word "Login" is highlighted and clickable.

6.3 Illustration Section:

Illustration:
Positioned on the right side of the screen.
Depicts an illustration of a group of people working around a large calendar or
task planner.
The illustration uses vibrant colors, with people holding devices, writing on the
calendar, and engaging in teamwork.
Design Layout:
Two-Column Design:
The left side contains the form, while the right side is dominated by an
illustration.
The left section uses a minimal white background, while the right illustration
section is placed on a light purple background for contrast.

Call to Action:
Purpose:
The form is designed to onboard users by collecting their full name, email, and
department.
The clear call-to-action is the "Proceed" button, which is the next step for account
creation.

22
 CHAPTER 7

PERFIDO:

7.1 SPLASHSCREEN:

Fig:7.1 SplashScreen

The splash screen represents the initial loading screen for the "Perfido"
project, designed with a sleek and modern aesthetic. It displays a clean, minimalistic
interface with the project logo and a "Loading..." indicator.

Key Elements:
Logo:The Perfido logo, which consists of a circular shape in a teal color followed by
the name "Perfido" in bold, white text. The logo stands out against the dark
background, creating a visually appealing contrast.

Loading Indicator:The word "Loading..." is positioned below the logo in light gray,
giving the user feedback that the system is in the process of loading content.

23
Background:The background is a solid black, offering a professional, high-tech look.
The design includes dynamic, concentric arc shapes in vivid purple, green, and cyan,
radiating from the corners of the screen to add vibrancy without overwhelming the
simplicity of the layout.

Color Palette:
Background: #000000 (black)
Primary Accent (Logo):#00CC99 (teal)
Secondary Accents (Arcs):Bright purple, cyan, and green arcs for visual flair.
Text Color:#FFFFFF (white) for "Perfido" and light gray for "Loading..." text.

Design Principles:
Simplicity and Focus:The design keeps the user's focus on the core brand elements
without clutter. The logo and loading text are centered, maintaining a clear visual
hierarchy.
Modern Aesthetic:The arc shapes add a modern and energetic feel to the screen
while remaining subtle.
User Feedback:The "Loading..." indicator informs the user that the page is
processing, ensuring clarity about the status.

User Interaction:
No direct user interaction is required on this screen; it is purely informative and
part of the application's load time experience.

7.2 LOGIN:
The login screen for the "Perfido" project is designed with a modern and
professional aesthetic, offering a simple and intuitive interface for users to log into
their accounts. The layout is centered on the page, with clear call-to-action buttons
and options for social login integrations.

24
 Fig:7.2 Login

Key Elements:
Welcome Message:The text "Welcome Back!" is prominently displayed at the
top, followed by a subtext "Login to your account" to guide the user.

Input Fields:
Email ID: A field for users to enter their email. The placeholder text,
"[email protected]," provides an example of the expected format.
Password:A password entry field with the placeholder text "Enter your Password"
includes an eye icon for toggling password visibility.
Forgot Password Link:A "Forgot Password? Reset Password" link is available for
users to reset their credentials if needed.
Login Button:A large, prominent button labeled "Login" in a bright teal color invites
users to proceed with their login attempt.
Sign Up Option:Below the login button, a message encourages users who do not
have an account to "Sign up for Free," with the "Sign up" link in green for visibility.

Social Login Options:

The screen also provides alternative login methods through icons displayed at
the bottom:

25
 1. Microsoft Outlook
2.Apple
3.Gmail
4.GitHub
Color Palette:
Background: #000000 (Black)
Primary Button Color:#00CC99 (Teal)
Text Colors:
"Welcome Back!" text is in white for contrast.
The input field labels and placeholder text are in light gray.
Typography:
The welcome message is bold and large for emphasis, while the instructions and
other text elements are medium-sized for readability.
The input field labels are clear and legible, and the entire layout maintains a
consistent, clean typography.
Design Principles:
Clarity and Simplicity: The design is clean, with a clear focus on essential actions
such as logging in or recovering the password.
User-Friendly:The input fields are easy to locate, and the login button is designed to
stand out.
User Interaction:
The login form invites users to input their credentials, reset their password if
necessary, or sign up for a new account. The design is intuitive and keeps users
engaged with visible, easy-to-understand elements.
Responsiveness:
The layout is responsive, designed to work seamlessly across different devices,
including mobile and desktop platforms.

7.3 PRICING:
The pricing page for the "Perfido" project is designed to allow users to choose
between different subscription plans based on their needs. Each plan is presented in a
card layout, showcasing the features available at different price points.

26
 Fig:7.3 Pricing

Key Elements:
Title:The page features a clear title at the top: "Choose your Plan," guiding users to
select the most suitable option for them.
Plan Options:
Three subscription plans are displayed, each offering a different set of features and
price points.

Guest Plan (Free):

Cost: Free
Key Features:
50 Virtual Users
1 Load Generator
20 mins Max Test Duration
1 Week Data Retention
Unlimited Debug Runs
Base Tier Support
Missing Features:
No APM Integrations
No Baseline Comparison

27
 No Private IPs
Call-to-Action:A green "Sign Up" button to start with the free plan.

Startup Plan ($500/month):

Cost:$500 per month
Key Features:
5000 Virtual Users
20 Load Generators
5 hours Max Test Duration
6 Months Data Retention
Unlimited Debug Runs
APM Integrations
Standard Tier Support
Missing Features:
No Baseline Comparison
No Private IPs
Call-to-Action: A bright teal "Sign Up" button encouraging users to start with this
plan

Enterprise Plan (Flexible):

Cost:Flexible pricing (customizable based on usage)
Key Features:
Unlimited Virtual Users
50 Load Generators
10+ hours Max Test Duration
Unlimited Data Retention
Unlimited Debug Runs
APM Integrations
Pro Tier Support
Missing Features:
No Baseline Comparison
No Private IPs
Call-to-Action: A "Get Quote" button for users to contact the sales team for custom
pricing.

28
Text Colors:
Plan names (e.g., "Guest,""Startup,""Enterprise") are in green and white, making
them easily distinguishable.
Pricing is displayed in white and green, with the "Free" and "$500/month"
pricing clearly highlighted.
Typography:
The text is legible and well-spaced, with a bold font used for
plan titles and
pricing, while smaller fonts are used to list features.
The use of checkmarks (✔) for available features and crosses (✖) for
unavailable features helps users quickly scan and compare the plans.
Responsive Design:
The page layout is designed to be fully responsive, ensuring it looks great on
both desktop and mobile devices. The card layout adapts well to different screen sizes,
making it easy for users to navigate and select a plan on any device.

7.4 SIGNUP:

Fig:7.4 Signup

A "Create a new account" title.

Fields for full name, email ID, password, and confirm password.
A checkbox to agree with the terms and conditions.
Buttons for "Cancel" and "Sign Up."

29
A pricing plan ($500/month for a startup).
Pricing Plan Display:
A section at the top shows the current subscription plan, labeled "Startup" with a
cost of $500 per month. There is an option to "Change Plan," suggesting flexibility for
users to select other pricing tiers.
Form Fields:
1. Full Name:An input field labeled "Full Name" where the user is expected to enter
their name. The field is prefilled with "John" in the example.
2. Email ID: A field to enter an email address, labeled "Email ID."
3. Password & Confirm Password:Two fields for password input, one for creating
the password and the other for confirming it, with an option to toggle password
visibility.
4. Terms and Conditions Agreement:A checkbox that users must select to indicate
agreement with the terms and conditions, linked to the terms via clickable text.

Buttons:
1. Cancel: A button labeled "Cancel," which likely allows the user to exit the form
without submitting the data.
2. Sign Up: A "Sign Up" button for submitting the form to create a new account.

Design Aesthetics:
The form features a dark background with neon-like accents, giving it a
modern and tech-focused aesthetic. This design, combined with simple and user-
friendly components, creates a visually appealing interface.

7.5 PAYMENT:
Plan Summary:
Current Plan:
At the top, there is a section showing the selected subscription plan, labeled
"Startup," which costs **$500 per month**. There is an option to change the plan
with a "Change Plan" button, allowing flexibility for the user to choose different
pricing options if needed.

30
Payment Method Selection:
The form allows users to select from multiple payment methods:
Card: Selected by default in the example, allowing users to pay with a credit or debit
card.
Net Banking: Provides the option to use internet banking for payment.
UPI (Unified Payments Interface): A popular payment method in some regions,
offering fast and easy transactions.
Paypal: Enables payment via the well-known third-party service, PayPal.

Card Details Input:

For users paying with a card, the form requires the following information:
Card Number: A text field to input the card number, prefilled with a placeholder of
"1234-5678-9101" (example data). A Mastercard icon is displayed, which may
change dynamically depending on the card type.
Expiration Date: Users are prompted to enter the card's expiration date in MM/YY
format.
CVV: The security code (CVV) is also required for verification, with the option to
toggle visibility (represented by an eye icon).

Fig:7.5 Payment

31
 CHAPTER 8

STUDENT INFORMATION SYSTEM:

Fig:8.1.i Basic elements

This image presents a Create a Course form, which allows users to input basic
details for adding a new course within the system. The form is embedded in a larger
interface that is part of a Learning Management System (LMS)or a task
managementplatform. Below is a detailed breakdown of the form and its elements:

8.1 Basic elements:

Title and Purpose:
The form is labeled "Create a Course", indicating that the purpose of this form
is to set up a new course in the platform.
Form Fields:
Course Title:
The first input field is for the Title of the course. In this example, it is prefilled
with "React JS," indicating that the course being created is focused on React, a
popular JavaScript library.

32
Course Manager:
The second field allows users to input the Course Manager's name. In the
example, the field is filled with "Ajitha," implying that this person is responsible for
managing the course content and structure.
Manager Email:
The third field is for the Manager's Email, used for contact and administrative
purposes. In this instance, the email is displayed as "[email protected]."

Buttons:
Cancel Button:
There is a "Cancel" button available to discard any input and exit the form
without creating the course.
Create Button:
A distinct, purple-colored "Create" button is provided to finalize the course
creation process. This button stands out visually, drawing attention to the action of
completing the form.

Fig:8.1.ii Course Details

33
 Fig:8.1.iii Sidebar Navigation

8.2 Layout overview:

Header Bar:
On the left: a back arrow (`Back`).
On the right: user profile avatar.
Middle: breadcrumb navigation with "People,""Progress," and "Material."
Sidebar (Left Navigation):
Main sections:
Dashboard
Learning (current section selected)
Projects
Tasks
Attendance
Manage Leave
People
Settings
Main Content (Learning Page):
Title: "React JS"
Modules: Multiple cards are displayed for different learning modules:
Module titles include:
Syntax

34
 Site Planning
Plan - Form
Usage & Experience
Location
Universal Accessibility
Material Palette
Each module card has a number (Module 1, Module 2, etc.), and the first module
has a `View` button.

Action Button:On the top-right corner, there's a button labeled "+ Create Module.

8.3 syntax:
Modal Title: At the top, the modal is titled "Syntax," indicating the subject of the
task or material being worked on.

Topic Section: Below the title, a brief description of the topic is provided. In this case,
it uses placeholder text (Lorem Ipsum), likely representing where the actual content
related to the "Syntax" topic would go.

Assignment Section: Following the topic, there is another block of text labeled as
"Assignment," which repeats the placeholder text. This section likely details the
specific instructions or information related to the assignment.

Input Field: The next section is an email input field, labeled "Assignment Link."
This is where the user can enter an email address, presumably the person to whom the
assignment is being sent or associated.

Action Buttons: At the bottom, two buttons are displayed:

Cancel: Allows the user to close the modal without saving changes.
Save: Commits the entered information, such as the email address, and closes the
modal.

35
 The overall layout is minimalist, with white background text inside the modal
and a sleek, modern look. The "Save" button is prominently colored (purple) to draw
attention, while the "Cancel" button is more neutral, typically grey or another subdued
color.

Fig:8.3.i Syntax

Fig:8.3.ii. Material

36
 CHAPTER 9

PARKXPERT:

9.1 Logo and Branding:

The logo consists of an icon (a red car symbol inside a hexagonal shape) and the
brand name "ParkXpert" displayed in blue text. The icon and text complement each
other, with the red-and-blue color scheme offering a professional and modern
appearance.

Background:
The backdrop appears to be a stylized illustration of a parking garage, with
muted blue tones. The cars and surroundings are slightly abstract, giving it a clean and
futuristic look while maintaining a focus on the parking theme.
The lighting effect within the garage creates depth, suggesting that the app is
geared toward a modern, tech-driven parking solution.

Center Content (Modal-like Display):

The content is placed in a large white box at the center, which makes the
logo stand out against the dark, blue-tinted background. This design ensures that the
branding is the primary focus of the screen.

Minimalist Layout:
There is no additional text, buttons, or interactive elements on the current
screen. This suggests that the image could represent an entry screen, splash screen, or
possibly a loading screen for the app.

Functional Context:
This screen likely serves a purpose within the app, such as:
Splash Screen: Displayed when the app is opened, introducing the user to the
brand before transitioning into the main content.
Login/Signup Screen (if there are hidden form fields): If more elements, such
as login fields or buttons, are later revealed, this could be an introductory login page.

37
 Loading Screen: If the app requires a few seconds to load, this could be the
visual used during that process.

Fig:9.1.i Logo and Branding

Fig:9.1.ii. Slider Section

38
9.2 Sign-Up Form:
Title:Sign Up
Subtext:"Enter your details below to create your account."
Input Fields:
Full Name:Placeholder text – "Enter your Full Name"
Email Address:Placeholder text – "Enter your Email Address"
Mobile Number:Placeholder text – "Enter your Mobile Number"

Action Buttons:
Cancel button (on the left, white background).
Sign Up button (on the right, blue background).

Additional Options:
At the bottom of the form:
"Already have an account? Login" – this provides a link for users who
already have an account to go to the login page.

Fig:9.2.i Sign-up Form

39
Fig:9.2.ii. Sign-in form

Fig:9.2.iii Forgot password

40
CONCLUSION:
In conclusion, my internship experience provided valuable insights into the
software development process, allowing me to work on diverse and impactful projects
such as Perfido, ParkXpert, TaskPro. Each project offered unique challenges and
learning opportunities, which significantly enhanced my technical and problem-
solving skills.

Perfido: Working on Perfido allowed me to deepen my understanding of security and

performance optimization. I learned how to analyze vulnerabilities and optimize code
for better efficiency, which is crucial in today’s tech landscape. This project
highlighted the importance of secure software design and the need to constantly adapt
to emerging threats.

ParkXpert: Through this project, I gained practical experience in building smart

solutions for real-world problems. ParkXpert’s aim to streamline parking management
was both challenging and rewarding. I honed my skills in integrating hardware with
software, working on data collection and analysis, and improving the user interface
for a more intuitive user experience.

TaskPro: This project exposed me to task and project management software

development. It was particularly useful in understanding how to design intuitive
features that improve productivity and user engagement. I worked on improving task
categorization and notification systems, learning how even small changes can make a
significant impact on user satisfaction.

This internship has not only solidified my interest in software development but
has also prepared me for the challenges and opportunities in the ever-evolving tech
industry.

41
42