FULL STACK ASSIGNMENTS WITH
REACT / ANGULAR
March 2023
INTRODUCTION
• You will develop full stack SPA application with React OR Angular and Spring Boot.
• You will develop the React OR Angular Components and Routing
• You will be develop RESTful APIs with Spring Boot
• You will connect REST API to JPA/Hibernate with Spring Boot
• You will understand the best practices in designing RESTful web services
• References Links
• https://github.com/facebook/create-react-app
• https://angular.io/
• https://nodejs.org/en/
• https://code.visualstudio.com/
Presentation Title | Author | Date Company Confidential © Capgemini 2022. All rights reserved | 2
ASSIGNMENT 1
Presentation Title | Author | Date Company Confidential © Capgemini 2022. All rights reserved | 4
REQUIREMENT
1) Create home page with similar
look and feel
2) Dashboard page 1,2,3
NOTE : All data will be coming
from database & RESTful Web
service.
Labels like “New Leads, Total
Claims, All Sales, Today’s Events”
can be part of JSX / HTML files https://xd.adobe.com/view/dae54db8-2ed5-4563-8013-
Presentation Title | Author | Date 0c9f3871db3f-8fb6/ Company Confidential © Capgemini 2022. All rights reserved | 5
REQUIREMENT
1) Open Slide menu (Slide 8)
2) All Policies dropdown will have
following Values
Health, Documents, Gallery
3) Current system date
4) As per current system date show
calendar and Highlight current
date. Calendar will show from
Monday to Sunday (weekly
calendar)
5) On selection of date from
calendar Events will get
repopulated and “Today’s Event”
heading will get change to
“<selectedDate> Event”
6) On click of this button open
popup (Slide 8)
Presentation Title | Author | Date Company Confidential © Capgemini 2022. All rights reserved | 6
REQUIREMENT
1) Non Editable and will
populated from previous
page
2) Editable, Single line text box,
max 50 and required
3) Editable, multi line text box,
max 100 and required
4) Click on “Discard” Email will
not send and close popup.
5) Click on “Send” Send Email
and show conformation (Side
9)
Presentation Title | Author | Date Company Confidential © Capgemini 2022. All rights reserved | 7
REQUIREMENT
1) Side menu
https://xd.adobe.com/view/dae54db8-2ed5-4563-8013-
Presentation Title | Author | Date 0c9f3871db3f-8fb6/ Company Confidential © Capgemini 2022. All rights reserved | 8
REQUIREMENT
1) On click of “OKAY Thanks”
popup will get closed. And will
display main page (as per Slide
5)
https://xd.adobe.com/view/dae54db8-2ed5-4563-8013-
Presentation Title | Author | Date 0c9f3871db3f-8fb6/ Company Confidential © Capgemini 2022. All rights reserved | 9
ASSIGNMENT 2
Presentation Title | Author | Date Company Confidential © Capgemini 2022. All rights reserved | 10
REQUIREMENT
1) Create New Lead page with
similar look and feel
2) Dashboard page 22, 14
NOTE : All data will be coming
from database & RESTful Web
service.
Labels like “New Leads, Total
Claims, All Sales, Today’s Events”
can be part of JSX / HTML files https://xd.adobe.com/view/dae54db8-2ed5-4563-8013-0c9f3871db3f-
8fb6/screen/d7c35ed9-d077-4f83-816c-2b435585fdc1
Presentation Title | Author | Date Company Confidential © Capgemini 2022. All rights reserved | 11
REQUIREMENT
1) Create New Lead page with
similar look and feel
2) On click of “Add New Lead”
navigate to Add new lead page
(Slide 13)
3) Populate Newly created Leads
(Last 7 days leads)
https://xd.adobe.com/view/dae54db8-2ed5-4563-8013-0c9f3871db3f-
8fb6/screen/d7c35ed9-d077-4f83-816c-2b435585fdc1
Presentation Title | Author | Date Company Confidential © Capgemini 2022. All rights reserved | 12
REQUIREMENT
1) Create New Lead page with
similar look and feel
2)
https://xd.adobe.com/view/dae54db8-2ed5-4563-8013-0c9f3871db3f-
8fb6/screen/9939863f-d37b-46e5-9aa0-9ec3935334cd
https://xd.adobe.com/view/dae54db8-2ed5-4563-8013-0c9f3871db3f-
8fb6/screen/c744c365-8dd2-4837-8d33-4429cccedbb4
https://xd.adobe.com/view/dae54db8-2ed5-4563-8013-0c9f3871db3f-
Presentation Title | Author | Date 8fb6/screen/6b01d9e2-14f2-4d84-8392-18d39c280ff0 Company Confidential © Capgemini 2022. All rights reserved | 13
REQUIREMENT
1) First Name & Last Name max 50 char
and required filed.
2) Phone Number only numeric and
follow following format
+<2digit>-<10 digit>
3) Email Address max 50 char and Email
format
4) Data of Birth should be less then 18
year from current date.
5) Pin code max – min 5 numeric char.
6) Gender must select one
7) “Do You Smoke?” “Do you Consume
alcohol” both required field and
should get highlighted as shown.
8) address multiline and max 100 char
9) On click of “NEXT“ navigate slide 15
https://xd.adobe.com/view/dae54db8-2ed5-4563-8013-
Presentation Title | Author | Date 0c9f3871db3f-8fb6/ Company Confidential © Capgemini 2022. All rights reserved | 14
REQUIREMENT
1) Annual Income date should be
between current finical year.
2) Government Rebate should be
positive number
3) Tax Rebate should be positive
number and more then
Government Rebate
4) On click of “BACK“ navigate slide
14
5) On click of “NEXT“ navigate slide
16
https://xd.adobe.com/view/dae54db8-2ed5-4563-8013-
0c9f3871db3f-8fb6/screen/c744c365-8dd2-4837-8d33-
4429cccedbb4
Presentation Title | Author | Date Company Confidential © Capgemini 2022. All rights reserved | 15
REQUIREMENT
1) File Upload on Server and Update
database with filename
2) On click of “BACK“ navigate slide
15
3) On click of “NEXT“ navigate slide
17
https://xd.adobe.com/view/dae54db8-2ed5-4563-8013-
0c9f3871db3f-8fb6/screen/c744c365-8dd2-4837-8d33-
4429cccedbb4
Presentation Title | Author | Date Company Confidential © Capgemini 2022. All rights reserved | 16
REQUIREMENT
1) File Upload on Server and Update
database with filename
2) On click of “BACK“ navigate slide
16
3) On click of “SEND PAYMENT LINK“
update all data in database.
4) Application Details information
will populate from slide 14,15, 16
https://xd.adobe.com/view/dae54db8-2ed5-4563-8013-
0c9f3871db3f-8fb6/screen/a4c40457-2c88-4936-964b-
b88ce2532cb3
Presentation Title | Author | Date Company Confidential © Capgemini 2022. All rights reserved | 17
ASSIGNMENT 3
Presentation Title | Author | Date Company Confidential © Capgemini 2022. All rights reserved | 18
REQUIREMENT
1) Create Find Expert page with
similar look and feel
2) Dashboard page 15, 16, 17, 20
NOTE : All data will be coming from
database & RESTful Web service.
Labels like “New Leads, Total Claims,
All Sales, Today’s Events” can be part
of JSX / HTML files
https://xd.adobe.com/view/071872ea-3251-40c1-a101-
85c4b1defa1f-524b/screen/d46584da-0d20-490c-ac9c-
429452e03054
Presentation Title | Author | Date Company Confidential © Capgemini 2022. All rights reserved | 19
REQUIREMENT
1) On Click of search, Navigate to
search page and show search page
(Slide 21)
https://xd.adobe.com/view/071872ea-3251-40c1-a101-
85c4b1defa1f-524b/screen/d46584da-0d20-490c-ac9c-
429452e03054
Presentation Title | Author | Date Company Confidential © Capgemini 2022. All rights reserved | 20
REQUIREMENT
1) On Click of search, Navigate to
search page and show search page
(Slide 21)
2) On click of show popup (Slide 22)
https://xd.adobe.com/view/071872ea-3251-40c1-a101-
85c4b1defa1f-524b/screen/83d2ff27-2feb-414f-ad2a-8467afbf6e57
Presentation Title | Author | Date Company Confidential © Capgemini 2022. All rights reserved | 21
REQUIREMENT
1) All Fields are required
2) Name max length is 50
3) Email max length is 50
4) Mobile Number will be following
format + <2 digit>-<10digit>
5) Send message max length 500
char
6) On submit update database with
all data show conformation page
(slide 23)
https://xd.adobe.com/view/071872ea-3251-40c1-a101-
85c4b1defa1f-524b/screen/1d4d4db2-aa42-45b6-acc9-
9614cfd29deb
https://xd.adobe.com/view/071872ea-3251-40c1-a101-
85c4b1defa1f-524b/screen/1018dee9-414f-4e85-a39e-
613df56ad1ad
Presentation Title | Author | Date Company Confidential © Capgemini 2022. All rights reserved | 22
REQUIREMENT
https://xd.adobe.com/view/071872ea-3251-40c1-a101-
85c4b1defa1f-524b/screen/b0b57273-e11e-41f1-ab5d-
ca599dcb0307
Presentation Title | Author | Date Company Confidential © Capgemini 2022. All rights reserved | 23
ASSIGNMENT 4
Presentation Title | Author | Date Company Confidential © Capgemini 2022. All rights reserved | 24
REQUIREMENT
1) Create All Questions page with
similar look and feel
2) Dashboard page 22,
NOTE : All data will be coming from
https://xd.adobe.com/view/071872ea-3251-40c1-a101-
database & RESTful Web service.
85c4b1defa1f-524b/screen/f5249da8-205f-4b09-a5fe-
Labels like “New Leads, Total Claims, 12a91d785ee9
All Sales, Today’s Events” can be part
of JSX / HTML files
Presentation Title | Author | Date Company Confidential © Capgemini 2022. All rights reserved | 25
REQUIREMENT
1) On click of “Enter your question”
page will redirect to “Add your
question” (Slide 27)
https://xd.adobe.com/view/071872ea-3251-40c1-a101-
85c4b1defa1f-524b/screen/f5249da8-205f-4b09-a5fe-
12a91d785ee9
Presentation Title | Author | Date Company Confidential © Capgemini 2022. All rights reserved | 26
REQUIREMENT
1) Question re required field and
max length is 500 char.
2) On type of char following number
will get reduce.
3) On submit data will get stored to
database as submitted mode
4) On click of Save as draft data will
stored to database as draft mode
https://xd.adobe.com/view/071872ea-3251-40c1-a101-
85c4b1defa1f-524b/screen/62287dd4-b351-4c7c-a083-
Presentation Title | Author | Date
72a4b187c652 Company Confidential © Capgemini 2022. All rights reserved | 27
REQUIREMENT
1) On Click of Continue reading page
will navigate to Show details
(Slide 29)
https://xd.adobe.com/view/071872ea-3251-40c1-a101-
85c4b1defa1f-524b/screen/f5249da8-205f-4b09-a5fe-
Presentation Title | Author | Date
12a91d785ee9 Company Confidential © Capgemini 2022. All rights reserved | 28
REQUIREMENT
https://xd.adobe.com/view/071872ea-3251-40c1-a101-
85c4b1defa1f-524b/screen/4ba271f8-b3cb-4e2d-9263-
Presentation Title | Author | Date
0bee51bb13be Company Confidential © Capgemini 2022. All rights reserved | 29
GET THE
FUTURE
YOU WANT
capgemini.com
About Capgemini
Capgemini is a global leader in partnering with companies to transform and manage
their business by harnessing the power of technology. The Group is guided everyday by
its purpose of unleashing human energy through technology for an inclusive and
sustainable future. It is a responsible and diverse organization of over 325,000 team
members more than 50 countries. With its strong 55-year heritage and deep industry
expertise, Capgemini is trusted by its clients to address the entire breadth of their
business needs, from strategy and design to operations, fueled by the fast evolving and
innovative world of cloud, data, AI, connectivity, software, digital engineering and
platforms. The Group reported in 2021 global revenues of €18 billion.
Get The Future You Want | www.capgemini.com
This presentation contains information that may be privileged or confidential and
is the property of the Capgemini Group.
Copyright © 2022 Capgemini. All rights reserved.
