WEBVTT

1
00:00:00.240 --> 00:00:01.700
Hi and welcome back.

2
00:00:01.730 --> 00:00:05.610
I just want to take some time to discuss
how we're going to be building this

3
00:00:05.640 --> 00:00:11.380
application because I think it's important
to always plan ahead and have some kind

4
00:00:11.410 --> 00:00:16.060
of architecture in your mind of how
you're going to be handling your project.

5
00:00:16.080 --> 00:00:19.780
And this project is only
going to take up three pages.

6
00:00:19.810 --> 00:00:23.420
One is going to be home page,
another one is going to be the description

7
00:00:23.450 --> 00:00:29.180
of the donation and the third one is
going to be making the actual payment.

8
00:00:29.210 --> 00:00:34.900
So I just want to say that we are going
to be creating the actual payment system

9
00:00:34.930 --> 00:00:38.220
for this application
in the upcoming module.

10
00:00:38.250 --> 00:00:43.320
But why we're making this whole donation
mobile application is because I want

11
00:00:43.350 --> 00:00:48.700
to teach you how to manage your
data with Redux in the next module.

12
00:00:48.730 --> 00:00:51.620
So I want to prepare for that time.

13
00:00:51.650 --> 00:00:57.300
And because of that I think it's going
to be a better decision to create each

14
00:00:57.330 --> 00:01:05.340
of these components for our current
section, the donation application section.

15
00:01:05.370 --> 00:01:07.660
And in the next section we're going to be

16
00:01:07.690 --> 00:01:12.850
taking care of how we are going to be
handling the display of all of this

17
00:01:12.880 --> 00:01:17.700
information on our screen
using the Redux toolkit.

18
00:01:17.730 --> 00:01:20.130
So for now in this section,

19
00:01:20.160 --> 00:01:25.100
what we're going to be doing is building
the components themselves standalone.

20
00:01:25.130 --> 00:01:31.490
So we're going to be building this kind
of tabs given here and the badges given

21
00:01:31.520 --> 00:01:35.660
for each type of category
that people could be donating to.

22
00:01:35.690 --> 00:01:40.930
And we're going to be creating
the subtitles and titles and the back

23
00:01:40.960 --> 00:01:44.900
buttons and all of that and these
inputs fields as well.

24
00:01:44.930 --> 00:01:47.060
So I think it's important for us to take

25
00:01:47.090 --> 00:01:51.900
some time and explore what we're
going to have to make here.

26
00:01:51.930 --> 00:01:54.380
So we're definitely going to have to have

27
00:01:54.410 --> 00:02:00.140
header component and if we look at this
and this styles given in the figma file,

28
00:02:00.170 --> 00:02:04.620
we are going to see that we're
going to have to reuse this a lot.

29
00:02:04.650 --> 00:02:08.300
So this kind of component is
also given on my card payment.

30
00:02:08.320 --> 00:02:10.020
For example, nothing really changes

31
00:02:10.050 --> 00:02:16.610
for the header and how it's built in terms
of font styling here. We're going to need

32
00:02:16.640 --> 00:02:21.140
a main primary button that is
going to be looking like this.

33
00:02:21.170 --> 00:02:24.260
And actually this header here also matches

34
00:02:24.290 --> 00:02:27.580
up with my card payment
and the header given here.

35
00:02:27.600 --> 00:02:31.220
So it's going to be great that we're going
to have a single component for that.

36
00:02:31.250 --> 00:02:34.580
We're going to be creating the donation

37
00:02:34.610 --> 00:02:40.420
items itself as well as a whole that has
a price, that has a title and a picture

38
00:02:40.450 --> 00:02:44.610
with the badge given here and we're
going to be creating the search box.

39
00:02:44.640 --> 00:02:48.540
So what we're really going to be doing
in this section is creating all these

40
00:02:48.570 --> 00:02:53.660
components and then we're going to create
bunch of them together using redux.

41
00:02:53.690 --> 00:02:55.740
And all of the information put

42
00:02:55.770 --> 00:03:01.380
in that data management system is going
to dictate what information to grab

43
00:03:01.410 --> 00:03:06.580
for each of the donation items or
for each of the categories given here.

44
00:03:06.610 --> 00:03:11.060
Which donation should show up
here as a selectable donation.

45
00:03:11.090 --> 00:03:16.260
So this is going to be very exciting part
of our project because

46
00:03:16.290 --> 00:03:20.920
the way we are building this section is
going to be very similar on how you're

47
00:03:20.950 --> 00:03:24.300
going to be making your decisions,
your architectural decisions,

48
00:03:24.330 --> 00:03:28.900
and the first steps towards your
applications in the real world.

49
00:03:28.930 --> 00:03:32.380
So this is going to be how
you're going to start out.

50
00:03:32.410 --> 00:03:36.340
Whether you're working at a company or
whether you're working on your project,

51
00:03:36.360 --> 00:03:39.660
you're always going to need some
kind of planning and initial setup.

52
00:03:39.690 --> 00:03:42.610
And this section is going to be a perfect

53
00:03:42.640 --> 00:03:49.180
example on how you might want to take your
first steps towards creating your project.

54
00:03:49.210 --> 00:03:50.980
So thanks so much for watching.

55
00:03:51.000 --> 00:03:53.740
In the next video,
we're going to dive into creating this

56
00:03:53.770 --> 00:03:58.740
custom component and the first one that
we're going to be creating is the header.

57
00:03:58.760 --> 00:03:59.720
See you in the next video.