Hi and welcome back.
I just want to take some time to discuss how we're going to be building this
application because I think it's important to always plan ahead and have some kind
of architecture in your mind of how you're going to be handling your project.
And this project is only going to take up three pages.
One is going to be home page, another one is going to be the description
of the donation and the third one is going to be making the actual payment.
So I just want to say that we are going to be creating the actual payment system
for this application in the upcoming module.
But why we're making this whole donation mobile application is because I want
to teach you how to manage your data with Redux in the next module.
So I want to prepare for that time.
And because of that I think it's going to be a better decision to create each
of these components for our current section, the donation application section.
And in the next section we're going to be
taking care of how we are going to be handling the display of all of this
information on our screen using the Redux toolkit.
So for now in this section,
what we're going to be doing is building the components themselves standalone.
So we're going to be building this kind of tabs given here and the badges given
for each type of category that people could be donating to.
And we're going to be creating the subtitles and titles and the back
buttons and all of that and these inputs fields as well.
So I think it's important for us to take
some time and explore what we're going to have to make here.
So we're definitely going to have to have
header component and if we look at this and this styles given in the figma file,
we are going to see that we're going to have to reuse this a lot.
So this kind of component is also given on my card payment.
For example, nothing really changes
for the header and how it's built in terms of font styling here. We're going to need
a main primary button that is going to be looking like this.
And actually this header here also matches
up with my card payment and the header given here.
So it's going to be great that we're going to have a single component for that.
We're going to be creating the donation
items itself as well as a whole that has a price, that has a title and a picture
with the badge given here and we're going to be creating the search box.
So what we're really going to be doing in this section is creating all these
components and then we're going to create bunch of them together using redux.
And all of the information put
in that data management system is going to dictate what information to grab
for each of the donation items or for each of the categories given here.
Which donation should show up here as a selectable donation.
So this is going to be very exciting part of our project because
the way we are building this section is going to be very similar on how you're
going to be making your decisions, your architectural decisions,
and the first steps towards your applications in the real world.
So this is going to be how you're going to start out.
Whether you're working at a company or whether you're working on your project,
you're always going to need some kind of planning and initial setup.
And this section is going to be a perfect
example on how you might want to take your first steps towards creating your project.
So thanks so much for watching.
In the next video, we're going to dive into creating this
custom component and the first one that we're going to be creating is the header.
See you in the next video.