GOVERNMENT COLLEGE OF
ENGINEERINGTIRUNELVELI-627007
GOVERNMENTASSISTEDINTERNSHIP
InternshipProjectReport
Name & Register [Link]
950821104040
NoHeadoftheInstitut
Dr.
[Link]
ncipal
e
Headof theDepartment Dr. G.
TamilpavaiProfes
sor/CSE
InternshipCoordinator Dr. A.
KrishnaveniProfes
sor/Mech
Faculty Coordinator Dr. E. Siva
SankariAssociateProfessor/
CSE
1
ANINDUSTRIALTRAININGREPORT
Submittedby
A . S U P R I Y A (950821104040)
Inpartialfulfillmentforthe awardofthedegreeof
BACHELOROFENGINEERING
IN
COMPUTERSCIENCEANDENGINEERING
GOVERNMENT COLLEGE OF
ENGINEERINGTIRUNELVELI-
627007
2
3
ACKNOWLEDGEMENT
First of all we would like to thank THE ALMIGHTY for giving a sound
healththroughout the project phase. We extent our sincere gratitude to our PARENTS
fortheir moral, emotionaland financial support.
WeexpressoursincerethankstoGOVERNMENTOFTAMILNADUandCOMMISSIO
NER, Directorate of Technical Education, Chennai for giving thisopportunityto do
theinternshipwithfinancialsupport.
We also wish to convey our hearty thanksto our college principal Dr.P.
LATHA,M.E., PhD MISTE.,,Government College of Engineering,Tirunelveli
for herkindpatronage.
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
withnecessaryresourcesand forher support to completethe Internship successfully.
We would like to extend our sincere thanks to Dr. A. KRISHNAVENI,
M.E.,PhDMISTE,Professor who arrangedand reviewed the progress of our
GovernmentAssistedInternship.
Our special thanks to our faculty advisor Dr. E. SIVA SANKARI M.E.,
Ph.D.,AssistantProfessor,whohasbeenguidinguswithkindadvice,encouragementthroug
htouttheinternshipandhelpingustocompletethisInternshipwithgreatsuccess.
We are indebted toconvey our hearty thanks to General Manager
[Link] guidanceand advice.
WithweexpressoursincerethankstoManager(HR)[Link]
orhisguidanceduringthis internship.
4
KMM
COMPANYPROFILE
ICANIOTECHNOLOGIES,TIRUNELVELI
ABOUTICANIO:
Icanio technologies, credible and ingenious software development
company,persistentlydeliveringextensivesolutionsinapplicationdevelopment,productde
velopmentand digital engineering.
Ourdistinguisheddesign-leddevelopmentprocessemphasizesthatthefeatures and
functionality of our apps and web systems lead to an innovative
product,validatedbyexhaustive userresearch.
Trusted software development company delivering solutions inWeb,
Mobile&ProductDevelopment.
CONTACT INFORMATION:
Phone: 063791 67118
Website: [Link]
Address : AP Towers No.A16, NGO ‘A’ Colony,North Main
Road,Tirunelveli-627007
5
TABLE OFCONTENTS
CHAPTER CONTENT PAGENO
1 INTRODUCTION 7
1.1 Frontenddevelopment 7
1.2 BasicsofFrontenddevelopment 7
2 SIMPLECALCULATORUSINGREACTJS 9
2.1 Projectoverview 9
2.2 ImplementationDetails 9
2.3 Features 10
3 REACTCOMPONENTS,LIFECYCLE,HOOKS 12
3.1 ReactComponents 12
3.2 ComponentLifecycle 12
3.3 ReactHooks 13
4 SLIDER,SORTINGUSINGREACTMUI 14
4.1 Slider 14
4.2 Sorting 15
5 NEXCENT WEBPAGEUSING REACT
MUICOMPONENT 17
5.1 Desktopview 18
5.2 Tabletview 18
5.3 Mobileview 19
6 TASKPRO 20
6.1 HeaderSection 21
6.2 FormSection 21
6.3 IllustrationSection 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 STUDENTINFORMATIONSYSTEM 32
8.1 Basic elements 32
8.2 Layoutoverview 34
8.3 Syntax 36
9 PARKXPERT 37
9.1 LogoandBranding 37
9.2 Sign-upform 39
6
CHAPTER1
INTRODUCTION:
1.1 FrontendDevelopment:
Frontend development is the part of web development that focuses on
thevisual and interactive aspects of a website or web application. It involves
everythingthat users see and interact with in their web browsers. The primary goal of
frontenddevelopment is to create an engaging, user-friendly interface that enhances
the overalluserexperience.
1.2 BasicsofFrontendDevelopment:
Languages:
i. HTML(HyperTextMarkupLanguage):Thebackboneofwebcontent,usedtostruct
urepages with elements like headings, paragraphs,links, and images.
ii. CSS(CascadingStyleSheets):UsedforstylingHTMLelements,controllinglayout,co
lors,fonts, andoverall aesthetics.
iii. JavaScript:Aprogramminglanguagethatenablesinteractivefeatures,suchasdynami
ccontent updates,formvalidation, and animations.
Frameworksand Libraries:
i. CSS Frameworks: Libraries like Bootstrap or Tailwind CSS simplify styling
andresponsivedesign.
ii. JavaScriptLibraries/
Frameworks:ToolslikeReact,Angular,[Link]
cesmoreefficiently.
ResponsiveDesign:
Techniquesensuringwebsitesfunctionwellonvariousdevicesandscreensizes,usingC
SS media queriesand flexible layouts.
7
VersionControl:
Systems like Git help developers manage changes in code and collaborate
withotherseffectively.
ToolsandDevelopmentEnvironment:
Codeeditors(e.g.,VSCode),browserdevelopertools,andbuildtools(e.g.,Webpack)
enhanceproductivityand streamline thedevelopment process.
BestPractices:
Writingclean,maintainablecode,optimizingperformance,ensuringaccessibility,an
dfollowingdesignprinciplesareessentialforeffectivefrontenddevelopment.
i. CleanandMaintainableCode:Writeclear,organizedcodeforeasierupdatesandcolla
boration.
ii. ConsistentDesign:Usedesignsystemsorstyleguidestomaintainvisualconsistencyac
ross the application.
iii. User-
CentricApproach:Prioritizetheuserexperiencebyconductingusabilitytestingandga
theringfeedback.
PerformanceOptimization:
Techniques to enhance website speed and efficiency, including
imageoptimization,lazyloading, and minimizingJavaScriptand
CSSfiles.
Accessibility:
Ensuring websites are usable by people with disabilities, adhering
toguidelineslikeWCAG (WebContent AccessibilityGuidelines).
8
CHAPTER2
SIMPLECALCULATOR USING REACTJS:
The development of a simple calculator application using ReactJS.
Theobjectivewastocreateauser-
friendlyinterfacethatperformsbasicarithmeticoperations,demonstratingthecapabilitiesof
Reactforbuildinginteractivewebapplications.
2.1 Project Overview:
Purpose:
Thecalculatorallowsuserstoperformbasicoperationssuchasaddition,subtraction,
multiplication, and division. It is designed to provide immediate
feedbackandensureasmooth user experience.
TechnologyStack:
Framework:
ReactJSLanguage:
JavaScript
(ES6)Styling:CSS
DevelopmentEnvironment:CreateReactApp
2.2 ImplementationDetails:
SettingUpthe Project:
The project was initiated using Create React App, which sets up the
necessaryenvironment and file structure for a React application. The following
command wasexecuted.
CreatingtheCalculatorComponent:
A `[Link]` component was created to handle the logic and display of
thecalculator.
The keyfeaturesofthiscomponentinclude:
i. State Management:The component uses React’s `useState` hook to manage
thecurrentinputstring.
9
ii. EventHandlers:Functionsaredefinedtohandlebuttonclicks,clearinputs,andcalculate
results.
iii. InputDisplay:Thecurrentinputandresultaredisplayedinaread-only inputfield.
UI Design:
The userinterface wasdesignedusingCSSfor aclean and simplelayout.
Thecalculatorconsistsof:
i. Aninput field for displayingcalculations.
ii. Agrid of buttons representingdigits and operations.
2.3 Features:
i. Basic Operations: The calculator supports addition, subtraction, multiplication,
anddivision.
ii. Clear Functionality: Users can reset their calculations at any
[Link]:Invalid calculations displayan "Error"message.
InputValidation:
Ensuringthattheinputis validbeforecalculationwasachallenge. Theuseof the
`Function`constructormitigatedrisksassociatedwith`eval`,butfurtherinputsanitizati
onisrecommended for production applications.
User Experience:
Designinganintuitiveinterfacethatrespondstouserinputpromptlywascrucial.
Ensuring allbuttons were clearly labeled and accessible contributed to apositiveuser
experience.
FutureImprovements:
i. AdvancedFunctions:Addingsupportformorecomplexmathematicaloperations(e.g.,e
xponentiation, squareroots).
ii. MemoryFunctions:Implementingmemoryfunctionsto storeand recallvalues.
iii. ResponsiveDesign:Ensuringthecalculatoris fullyresponsive formobile devices.
10
CALCULATOR
Fig:2.3CalculatorusingJavascript
11
CHAPTER3
REACTCOMPONENTS ,LIFECYCLE, HOOKS:
React is a popular JavaScript library for building user interfaces,
particularlysingle-page applications. This report explores the core concepts of React,
includingcomponents,lifecyclemethods,andhooks,whichenabledeveloperstocreatedyna
micand interactiveweb applications.
3.1 ReactComponents:
Definition:
[Link],i
ndependent pieces ofUIthatmanage their own state and logic.
TypesofComponents:
i. FunctionalComponents:[Link]
not manage theirownstate until hooks areintroduced.
ii. ClassComponents:[Link]
their own state and lifecycle methods.
ComponentProps and State:
i. Props:Shortforproperties,propsareread-
onlydatapassedfromparenttochildcomponents. Theyallowcomponents to be
dynamicand customizable.
ii. State:Stateisamutabledatastructurethatallowscomponentstomanagetheirowndata.
Changes in state trigger re-renders.
3.2 ComponentLifecycle:
LifecyclePhases:
Reactcomponentsgothrough variouslifecyclephases:
Mounting:[Link]
hods include:
i. constructor()
ii. componentDidMount()
12
Updating:Thisphaseoccurswhenacomponent'[Link]
:
i. shouldComponentUpdate()
ii. componentDidUpdate()
Unmounting: This phase occurs when a component is being removed from the
[Link] keymethod is:
[Link]()
3.3 ReactHooks:
Hooks are special functions that allow functional components to use state
andlifecycle features without needing to convert them into class components.
IntroducedinReact 16.8, theypromote betterorganization of componentlogic.
i. useState:Allows functional components to managelocal state.
ii. useEffect:Allowsyoutoperformsideeffectsinfunctionalcomponents,replacinglifecycl
emethods.
AdvantagesofUsingHooks:
i. Simpler Code: Hooks enable cleaner and more readable code by eliminating
theneedforclass components.
ii. Reusability: Logic can be extracted into custom hooks, promoting code
[Link] Testing:Functional components with hooks are easier to test due
to theirpredictable behavior.
13
CHAPTER4
SLIDER,SORTINGUSINGREACTMUI:
4.1 SLIDER:
Fig:4.1Slider
TheMUI`Slider` componentinReactallowsyoutocreate aninteractive
[Link]
omized to fitvarious use cases.
Key Features:
ValueDisplay:Youcantrackthecurrentvalueoftheslider,typicallyshownasatooltiporlabel
. Thisvalueis dynamicandupdatesastheuserinteractswiththeslider.
RangeControl:Youcandefinetheminimumandmaximumvaluesfortheslider,settingbou
ndaries for whattheuser canselect.
14
StepSize:[Link]
example, if thestep size is 1, the slider movesinwholenumbers.
Customization:MUIallowsyoutomodifytheappearanceoftheslider,suchas
changingthecolor,size,[Link]
elementstomatch theoverallUItheme.
EventHandling:Whenthesliderismoved,aneventistriggered,allowingyoutoupdatethedi
splayedvalueor performother actions based on theslider's position.
ValueLabel:Theslidercandisplaythecurrentvalueastheusermovesit,which
improves usabilityand clarity.
Overall,the`Slider`componentprovidesflexibilityforawiderangeof
scenarioswhereusersneedtoadjustvaluesvisually,suchasvolumecontrols,brightness
adjustments, oranynumericrange selection.
4.2 SORTING:
Fig:4.2Sorting
15
ToimplementsortingbyupvotesinascendinganddescendingorderusingMaterial-
UI(MUI)inReact,youwould typically:
1. State Management: Maintain state for both the sorting order and the data
[Link], thestate willstorethecurrentsort directionand the sorted data.
2. Sort Function:Create a function to sort the data based on upvotes. The
functionshould toggle between ascending and descending order when the user clicks
the sortbutton.
3. Button or Trigger:In your UI (as shown in your image), you can create
buttonslabeled"Most Upvoted" or similartotriggerthesortinglogic.
4. Table Rendering:Display the sorted data in the table, which should
automaticallyupdatewhen the statechanges.
Key features:
State Setup:You would store your table data (like the upvotes, titles, and dates)
andthe current sortingdirection (ascendingordescending) in the component's state.
Sorting Logic:Create a function that sorts the data array based on the upvotes.
Thisfunctionwillcheckthe current sortdirection andadjust theorder accordingly.
Button Click Handlers:When a user clicks the "Most Upvoted" button, the
sortingfunction is triggered, and the data in the table is rearranged based on the
number ofupvotes. If the sort order is ascending, clicking the button again could
reverse it todescending.
16
CHAPTER5
NEXCENTWEBPAGE USINGREACTMUICOMPONENT:
Fig:5.1NexcentWeb Pagein Differentviews
17
5.1 DesktopView(1440px):
Header:
Title:"Lessonsandinsightsfrom 8years"
Subtitle: "Our Clients" with icons representing different
[Link]:"GetStarted" (callto action).
MainSection:
Headline: "Manage your entire community in a single
system"Descriptionsof features:
Membership
ManagementOnlineReser
vationsClubsand Groups
Visual:Image showcasingthesystem’sinterface.
ClientHighlight:
Section: "Helpinga local business reinvent itself"
Stats: "2.4M Clients", "824,878 users", "128,857
transactions"Button:"Learn More"
SecondarySection:
Feature: "How to design your site footer like we
did"Image:Responsive mobile design example.
Button:"ReadMore"
FooterSection:
Navigation links (Company, Services,
Support).Social media icons.
Copyrightdetails.
5.2 TabletView (744px):
Header:
Title:"Lessonsandinsightsfrom8years"(slightlysmallertextthandesktop).Clientlogos/
iconsappearinatighter,smallerlayouttoaccommodatethereducedscreenwidth.
MainSection:
Similarcontent asdesktop, butthe layoutstacksverticallyinstead ofside-by-side.
18
Features(MembershipManagement,Reservations,Clubs/Groups)arelistedinasingle
column.
ClientHighlight:
Content is stacked vertically: text first, then image, followed by
[Link] (Clients, Users, Transactions) appearinasmallerfont.
SecondarySection:
Reduced text size for "How to design your site footer like we
did."Thebutton and imageare morecompact and verticallyaligned.
FooterSection:
Navigationiscompact,with social medialinks stackedorina smallhorizontal line.
5.3 MobileView (360px):
Header:
Title: "Lessons and insights from 8 years" (much smaller font
size).Allclient logosare eitherstacked orplaced in acompact row.
MainSection:
Contentisinasingle-column,vertical format.
Features(MembershipManagement,Reservations,Clubs/
Groups)arelistedoneafteranother with small icons.
Imageisresizedtofitmobilewidth,potentiallydisplayedunderneaththefeaturedescriptio
ns.
ClientHighlight:
Text,image,andstatsare stackedvertically.
Statsaredisplayedinaverycompactformwithsmallerfontstofitwithinthemobile view.
SecondarySection:
"Howtodesignyoursitefooterlikewedid"contentisstacked.
Imagetakesupagoodportionofthescreenwidth,andthebuttoniscentrallyaligned.
FooterSection:
StackedlinksforCompany,Services,andSupport.
Socialmediaiconsmaybepresentedinasinglelineorstackedforeasiernavigationon
mobile.
19
CHAPTER6
TASKPRO:
Fig:[Link]
Fig:[Link] Login
20
Fig:[Link]
6.1 HeaderSection:
Logo:
Positioned on thetop left.
Text:"TaskPro"accompaniedbyalogo,whichisapurpleiconintheshapeofsquares.
Title:
Large,boldheading:"Create anAccount".
Subtitle:"Let'sgetstarted"in a smaller, lighterfont, positionedrightunder thetitle.
6.2 FormSection:
FormTitle:
Noseparatetitle,asthe"CreateanAccount"headingatthetopoftheformservesas
the main headingfor thissection.
21
FormFields:
1. UserName:
Placeholdertext:"EnteryourFullName".
2. EmailAddress:
Placeholdertext:"Enter yourEmail ID".
3. MobileNo:
Placeholdertext:"EnteryourDepartment".
[Link]:
Prominentpurplebuttonlabeled"Proceed".
Link:
Below the form, there is a link to the login page: "Have an account?
Login".Theword"Login"ishighlightedand clickable.
6.3 IllustrationSection:
Illustration:
Positioned on theright sideof the screen.
Depictsanillustrationofagroupofpeopleworkingaroundalargecalendarortaskplanner.
Theillustrationusesvibrantcolors,withpeopleholdingdevices,writingonthecalendar,a
nd engagingin teamwork.
DesignLayout:
Two-ColumnDesign:
Theleftsidecontainstheform,whiletherightsideisdominatedbyanillustration.
Theleftsectionusesaminimalwhitebackground,whiletherightillustrationsectionis
placed on a lightpurple backgroundforcontrast.
CalltoAction:
Purpose:
Theformisdesignedtoonboardusersbycollectingtheirfullname,email,anddepartment.
Theclearcall-to-actionisthe"Proceed"button,whichisthenextstepforaccountcreation.
22
CHAPTER7
PERFIDO:
7.1 SPLASHSCREEN:
Fig:7.1SplashScreen
Thesplashscreenrepresentstheinitialloadingscreenforthe"Perfido"project,
designed with a sleek and modern aesthetic. It displays a clean,
minimalisticinterfacewith the project logo anda"Loading..."indicator.
KeyElements:
Logo:ThePerfidologo,whichconsistsofacircularshapeinatealcolorfollowedby
thename"Perfido"inbold,[Link]
background, creating a visuallyappealingcontrast.
LoadingIndicator:Theword"Loading..."ispositionedbelowthelogoinlightgray,givingt
heuserfeedback that the system isin the process of loading content.
23
Background:The background is a solid black, offering a professional, high-tech
[Link] design includes dynamic, concentric arc shapes in vivid purple, green, and
cyan,radiating from the corners of the screen to add vibrancy without overwhelming
thesimplicityofthelayout.
ColorPalette:
Background:#000000 (black)
PrimaryAccent(Logo):#00CC99(teal)
Secondary Accents (Arcs):Bright purple, cyan, and green arcs for visual
[Link]:#FFFFFF(white)for"Perfido"andlightgrayfor"Loading..."text.
DesignPrinciples:
Simplicity and Focus:The design keeps the user's focus on the core brand
elementswithout clutter. The logo and loading text are centered, maintaining a clear
visualhierarchy.
ModernAesthetic:Thearc shapesadd a modern and energetic feel tothe screenwhile
remainingsubtle.
UserFeedback:The"Loading..."indicatorinformstheuserthatthepageisprocessing,ensur
ing clarityabout the status.
UserInteraction:
Nodirectuserinteractionisrequiredonthisscreen;itispurelyinformativeandpartof the
application'sloadtimeexperience.
7.2 LOGIN:
The login screen for the "Perfido" project is designed with a modern
andprofessional aesthetic, offering a simple and intuitive interface for users to log
intotheir accounts. The layout iscentered on the page,with clear call-to-action
buttonsandoptions for social login integrations.
24
Fig:7.2Login
KeyElements:
WelcomeMessage:Thetext"WelcomeBack!"isprominentlydisplayedatthetop,follo
wed byasubtext"Login toyour account"to guidetheuser.
InputFields:
Email
ID:[Link],"Johndoe@[Link]
m,"providesan exampleoftheexpected format.
Password:Apasswordentryfieldwiththeplaceholdertext"EnteryourPassword"includesa
neye icon for togglingpassword visibility.
ForgotPasswordLink:A"ForgotPassword?
ResetPassword"linkisavailableforuserstoreset theircredentials if needed.
LoginButton:Alarge,prominentbuttonlabeled"Login"inabrighttealcolorinvitesuserstop
roceed withtheir login attempt.
SignUpOption:Belowtheloginbutton,amessageencouragesuserswhodonot
haveanaccountto"SignupforFree,"withthe "Signup"linkingreenforvisibility.
Social Login Options:
Thescreenalsoprovidesalternativeloginmethodsthroughiconsdisplayedatthe
bottom:
25
1. Microsoft
[Link]
3.Gmail4
.GitHub
ColorPalette:
Background:#000000(Black)Primary
Button Color:#00CC99 (Teal)Text
Colors:
"WelcomeBack!"textisinwhiteforcontrast.
Theinputfield labelsandplaceholdertextareinlightgray.
Typography:
Thewelcomemessageisboldandlargeforemphasis,whiletheinstructionsandother
textelements aremedium-sized forreadability.
Theinputfieldlabelsareclearandlegible,andtheentirelayoutmaintainsaconsistent,cle
an typography.
DesignPrinciples:
ClarityandSimplicity:Thedesignisclean,withaclearfocusonessentialactionssuchasloggi
ngin orrecoveringthe password.
User-Friendly:Theinputfieldsareeasytolocate,andtheloginbuttonisdesignedtostand out.
UserInteraction:
The login form invites users to input their credentials, reset their password
ifnecessary, or sign up for a new account. The design is intuitive and keeps
usersengagedwith visible, easy-to-understandelements.
Responsiveness:
Thelayoutisresponsive,designedtoworkseamlesslyacrossdifferentdevices,includin
gmobileand desktop platforms.
7.3 PRICING:
The pricing page for the "Perfido" project is designed to allow users to
choosebetween different subscription plans based on their needs. Each plan is
presented in acardlayout,showcasingthefeatures available at different pricepoints.
26
Fig:7.3Pricing
KeyElements:
Title:Thepagefeaturesacleartitleatthetop:"ChooseyourPlan,"guidinguserstoselectthe
most suitableoption for them.
Plan Options:
Threesubscriptionplansaredisplayed,eachofferingadifferentsetoffeaturesandpricepoints
.
Guest Plan(Free):
Cost:Free
KeyFeatures:
50VirtualUsers
1 LoadGenerator
20 mins Max Test
Duration1 Week Data
RetentionUnlimited Debug
RunsBaseTier Support
MissingFeatures:
NoAPMIntegrationsNoB
aselineComparison
27
NoPrivate IPs
Call-to-Action:Agreen"Sign Up"button tostartwiththefreeplan.
Startup Plan($500/month):
Cost:$500 permonth
KeyFeatures:
5000VirtualUsers
20LoadGenerators
5 hours Max Test
Duration6 Months Data
RetentionUnlimited Debug
RunsAPMIntegrationsStan
dardTier Support
MissingFeatures:
No Baseline
ComparisonNoPrivateIP
s
Call-to-Action:Abrightteal"SignUp"buttonencouraginguserstostartwiththisplan
Enterprise Plan(Flexible):
Cost:Flexiblepricing(customizable basedon usage)
KeyFeatures:
Unlimited Virtual
Users50LoadGenerators
10+ hours Max Test
DurationUnlimited Data
RetentionUnlimitedDebugRu
ns
APM
IntegrationsPro
Tier Support
MissingFeatures:
No Baseline
ComparisonNoPrivateIP
s
28
Call-to-Action:A"GetQuote"buttonforuserstocontactthesalesteamforcustompricing.
29
TextColors:
Plan names (e.g., "Guest,""Startup,""Enterprise") are in green and white,
makingthem easilydistinguishable.
Pricingisdisplayed inwhiteandgreen,withthe"Free"and "$500/month"
pricing clearlyhighlighted.
Typography:
Thetextislegibleandwell-
plantitlesand
spaced,withaboldfontusedforpricing,while smallerfonts areused to
list features.
Theuseofcheckmarks(✔)foravailablefeaturesandcrosses(✖)forunavailable
featureshelps usersquicklyscanand comparetheplans.
ResponsiveDesign:
The page layout is designed to be fully responsive, ensuring it looks great
onboth desktop and mobile devices. The card layout adapts well to different screen
sizes,makingit easyfor userstonavigate and selectaplanon anydevice.
7.4 SIGNUP:
Fig:7.4Signup
A "Create a newaccount" title.
Fields for full name, email ID, password, and confirm
[Link] and conditions.
Buttons for"Cancel"and"SignUp."
30
A pricingplan ($500/month fora startup).
Pricing PlanDisplay:
A section at the top shows the current subscription plan, labeled "Startup" with
acost of $500 per month. There is an option to "Change Plan," suggesting flexibility
foruserstoselect otherpricingtiers.
FormFields:
1. Full Name:An input field labeled "Full Name" where the user is expected to
entertheir name. Thefield is prefilledwith "John"intheexample.
2. Email ID:Afieldtoenteranemail address,labeled"EmailID."
3. Password & Confirm Password:Two fields for password input, one for
creatingthe password and the other for confirming it, with an option to toggle
passwordvisibility.
4. Terms and Conditions Agreement:A checkbox that users must select to
indicateagreement with the termsand conditions, linkedto theterms via clickable text.
Buttons:
1. Cancel:Abuttonlabeled"Cancel,"whichlikelyallowstheusertoexittheformwithout
submittingthedata.
2. SignUp:A "Sign Up"buttonfor submittingthe form tocreateanewaccount.
DesignAesthetics:
Theformfeaturesadarkbackgroundwithneon-likeaccents,givingitamodern and
tech-focused aesthetic. This design, combined with simple and user-
friendlycomponents, createsa visuallyappealing interface.
7.5 PAYMENT:
PlanSummary:
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 planwith a "Change Plan" button, allowing flexibility for the user to choose
differentpricingoptions if needed.
31
Payment MethodSelection:
Theform allows userstoselect from multiplepayment methods:
Card:Selectedby defaultintheexample,allowinguserstopaywithacreditordebitcard.
NetBanking:Providesthe option touse internet bankingfor payment.
UPI(UnifiedPaymentsInterface):Apopularpaymentmethodinsomeregions,offeringf
ast and easytransactions.
Paypal:Enablespaymentvia the well-knownthird-partyservice, PayPal.
CardDetailsInput:
For userspaying withacard, theformrequires the followinginformation:
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
maychange dynamicallydependingon the cardtype.
Expiration Date: Users are prompted to enter the card's expiration date in
MM/YYformat.
CVV: The security code (CVV) is also required for verification, with the option
totoggle visibility(represented byan eyeicon).
Fig:7.5Payment
32
CHAPTER
8STUDENTINFORMATION
SYSTEM:
Fig:[Link]
This image presents aCreate a Course form, which allows users to input
basicdetails for adding a new course within the system. The form is embedded in a
largerinterfacethatispartofaLearningManagementSystem(LMS)orataskmanagementpla
[Link] isa detailedbreakdown ofthe formand itselements:
8.1 Basicelements:
Titleand Purpose:
Theformislabeled"CreateaCourse",indicatingthatthepurposeofthisformis
tosetup a newcourse intheplatform.
FormFields:
CourseTitle:
The first input field is for the Title of the course. In this example, it is
prefilledwith"ReactJS," indicating thatthecoursebeing
createdisfocusedonReact,apopularJavaScriptlibrary.
33
CourseManager:
The second field allows users to input the Course Manager's name. In
theexample, the field is filled with "Ajitha," implying that this person is responsible
formanagingthe course content and structure.
ManagerEmail:
The third field is for the Manager's Email, used for contact and
[Link] this instance,theemail isdisplayedas "ajitha@[Link]."
Buttons:
CancelButton:
There is a "Cancel" button available to discard any input and exit the
formwithout creatingthecourse.
CreateButton:
A distinct, purple-colored "Create" button is provided to finalize the
coursecreation process. This button stands out visually, drawing attention to the
action ofcompletingthe form.
Fig:[Link] CourseDetails
34
Fig:[Link]
8.2 Layoutoverview:
HeaderBar:
On the left: a back arrow
(`Back`).Onthe right: userprofile
avatar.
Middle:breadcrumb navigationwith "People,""Progress,"and "Material."
Sidebar (Left Navigation):
Mainsections:
Dashboard
Learning(currentsectionselected)Pro
jects
TasksAttenda
nceManage
LeavePeopleS
ettings
MainContent(LearningPage):
Title:"ReactJS"
Modules: Multiple cards are displayed for different learning
modules:Module titlesinclude:
Syntax
35
Site
PlanningPla
n-Form
Usage &
ExperienceLocation
Universal
AccessibilityMaterialP
alette
Eachmodulecardhasanumber(Module1,Module2,etc.),andthefirstmodulehas a
`View`button.
ActionButton:Onthetop-rightcorner,there'sabuttonlabeled"+CreateModule.
8.3 syntax:
ModalTitle: At the top, the modal is titled "Syntax," indicating the subject of thetask
or material beingworked 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
contentrelatedto the"Syntax"topicwould go.
Assignment Section: Following the topic, there is another block of text labeled
as"Assignment,"[Link]
tructions or information related to theassignment.
InputField:The next section is an emailinput field, labeled "AssignmentLink."This is
where the user can enter an email address, presumably the person to whom
theassignmentis beingsentor associated.
ActionButtons:At thebottom,two buttonsaredisplayed:
Cancel:Allows theuser toclose themodal without savingchanges.
Save:Commitstheenteredinformation,suchastheemailaddress,andclosesthemodal.
36
The overall layout is minimalist, with white background text inside the
modaland a sleek, modern look. The "Save" button is prominently colored (purple) to
drawattention, while the "Cancel" button is more neutral, typically grey or another
subduedcolor.
Fig:[Link]
Fig:[Link]
37
CHAPTER9
PARKXPERT:
9.1 Logoand Branding:
The logo consists of an icon (a red car symbol inside a hexagonal shape) and
thebrand name "ParkXpert" displayed in blue text. The icon and text complement
eachother,withthered-and-
bluecolorschemeofferingaprofessionalandmodernappearance.
Background:
The backdrop appears to be a stylized illustration of a parking garage,
withmuted blue tones. The cars and surroundings are slightly abstract, giving it a
clean andfuturistic look while maintaininga focus on theparkingtheme.
The lighting effect within the garage creates depth, suggesting that the app
isgearedtowarda modern,tech-driven parkingsolution.
CenterContent (Modal-likeDisplay):
The content is placed ina large white boxat the center, whichmakes thelogo
stand out against the dark, blue-tinted background. This design ensures that
thebrandingis the primaryfocus of the screen.
MinimalistLayout:
There is no additional text, buttons, or interactive elements on the
currentscreen. This suggests that the image could represent an entry screen, splash
screen, orpossiblya loadingscreenfor the app.
FunctionalContext:
This screen likelyservesapurpose within the app,suchas:
SplashScreen:Displayedwhentheappisopened,introducingtheusertothebrand
beforetransitioninginto themain content.
Login/SignupScreen(iftherearehiddenformfields):Ifmoreelements,suchas login
fields or buttons,arelater revealed, this could be anintroductoryloginpage.
38
LoadingScreen:Iftheapprequiresafewsecondstoload,thiscouldbethevisualused
duringthat process.
Fig:[Link]
Fig:[Link]
39
9.2 Sign-UpForm:
Title:SignUp
Subtext:"Enteryourdetails belowtocreateyouraccount."
Input Fields:
Full Name:Placeholdertext–"EnteryourFull Name"
Email Address:Placeholdertext–"Enter yourEmailAddress"
MobileNumber:Placeholdertext–"Enteryour MobileNumber"
ActionButtons:
Cancel button (on the left, white
background).SignUpbutton(ontheright,blueback
ground).
Additional Options:
Atthebottomofthe form:
"Alreadyhaveanaccount?Login"–
thisprovidesalinkforuserswhoalreadyhaveanaccount togo to the login page.
Fig:[Link]-upForm
40
Fig:[Link]-in form
Fig:[Link]
41
CONCLUSION:
Inconclusion,myinternshipexperienceprovidedvaluableinsightsintothesoftware
development process, allowing me to work on diverse and impactful projectssuch as
Perfido, ParkXpert, TaskPro. Each project offered unique challenges
andlearningopportunities,whichsignificantlyenhancedmytechnicalandproblem-
solvingskills.
Perfido: Working on Perfido allowed me to deepen my understanding of security
andperformance optimization. I learned how to analyze vulnerabilities and optimize
codefor better efficiency, which is crucial in today’s tech landscape. This
projecthighlighted the importance of secure software design and the need to
constantly adapttoemergingthreats.
ParkXpert: Through this project, I gained practical experience in building
smartsolutions for real-world problems. ParkXpert’s aim to streamline parking
managementwas both challenging and rewarding. I honed my skills in integrating
hardware withsoftware,workingondatacollectionandanalysis,andimprovingtheuser
interfacefora more intuitiveuserexperience.
TaskPro: This project exposed me to task and project management
softwaredevelopment. It was particularly useful in understanding how to design
intuitivefeatures that improve productivity and user engagement. I worked on
improving taskcategorization and notification systems, learning how even small
changes can make asignificantimpact on user satisfaction.
This internship has not only solidified my interest in software development
buthas also prepared me for the challenges and opportunities in the ever-evolving
techindustry.
42
43