1
00:00:02,160 --> 00:00:05,140
For this module and for this app we're building,

2
00:00:05,160 --> 00:00:11,310
again you'll find a starting project attached to this lecture which you can use to get started with

3
00:00:11,310 --> 00:00:15,480
this or you can create a new expo app on your own of course.

4
00:00:15,480 --> 00:00:21,300
Now this is the app I attached, very basic app with I'm your app which we can barely see which doesn't matter

5
00:00:21,330 --> 00:00:23,980
because we'll not keep this text through anyways

6
00:00:24,160 --> 00:00:26,370
and we only got that one app.js file.

7
00:00:26,430 --> 00:00:32,130
Now a lot of the things I do in this module will be things you saw in the previous modules because obviously

8
00:00:32,130 --> 00:00:33,660
that's the core idea here.

9
00:00:33,660 --> 00:00:39,480
We'll practice what we learned thus far and there will be some new things or some patterns which might

10
00:00:39,480 --> 00:00:41,710
be interesting to you as well.

11
00:00:41,730 --> 00:00:47,160
Now of course in this app which I sketched out in the last lecture, we'll have a couple of screens, so

12
00:00:47,160 --> 00:00:52,230
therefore we'll definitely need navigation and hence I'll add a navigation folder so that I can store my

13
00:00:52,230 --> 00:00:54,380
navigation configuration there and

14
00:00:54,420 --> 00:00:57,480
that's of course just one possible setup,

15
00:00:57,480 --> 00:01:03,690
as I mentioned before, you can work with any folder structure you want and that works for you. Besides

16
00:01:03,690 --> 00:01:04,740
the navigation folder,

17
00:01:04,740 --> 00:01:09,690
I also want to have a screens folder here, in that screens folder

18
00:01:09,690 --> 00:01:15,660
I also want to store the screens we can navigate between and I'll add a components folder for all

19
00:01:15,660 --> 00:01:18,460
my regular components, of course screens

20
00:01:18,520 --> 00:01:24,450
also are React components but the normal components I mean here are the components we don't directly

21
00:01:24,450 --> 00:01:30,720
load as screens but which we embed into screens instead or into other components, so that's what we'll

22
00:01:30,720 --> 00:01:37,500
have here. I'll also add a constants folder because again, I'll work with my color constants here so

23
00:01:37,500 --> 00:01:43,860
that I can use my preselected colors throughout the entire application.

24
00:01:43,880 --> 00:01:49,280
Now there are a bunch of different ways of getting started, what I like to do first in my apps is that

25
00:01:49,280 --> 00:01:51,020
I start with the screens,

26
00:01:51,020 --> 00:01:56,870
even though if I don't add the content to all of them yet, I like adding this general structure so that

27
00:01:56,870 --> 00:02:01,570
I can always see what I still need to work on, which features are still missing.

28
00:02:01,880 --> 00:02:04,980
So therefore, I'll add the screens which I'll have in this app

29
00:02:05,180 --> 00:02:09,890
and here I'll do something which I haven't done before and which is totally optional but I'll organize

30
00:02:09,890 --> 00:02:12,120
my screens into separate subfolders.

31
00:02:12,170 --> 00:02:15,770
I'll have one folder with my shop related screens

32
00:02:15,770 --> 00:02:20,930
and of course since we'll build a shopping app, all screens are kind of shop related but here I want

33
00:02:20,930 --> 00:02:26,540
to have the screens which directly help us with viewing our products, with adding them to the cart and

34
00:02:26,540 --> 00:02:27,120
so on

35
00:02:27,530 --> 00:02:34,430
and then I want to have a separate folder and that's my user folder you could say, there I want to

36
00:02:34,430 --> 00:02:36,400
have the user related screens,

37
00:02:36,470 --> 00:02:40,370
so that would be my user products and administrating products.

38
00:02:40,440 --> 00:02:42,590
That's how I will divide this

39
00:02:42,590 --> 00:02:45,950
but of course you can organize that however you want.

40
00:02:45,950 --> 00:02:52,670
So in the shop folder here for example, I want to have my products overview screen and that will be the

41
00:02:52,760 --> 00:02:58,340
screen we see when the app loads where we have all the products to work with and where we can then select

42
00:02:58,340 --> 00:03:04,880
a product or directly add it to the cart. We'll therefore also need a product detail screen, that's

43
00:03:04,880 --> 00:03:10,520
the screen we see when we select a product and we want to learn more about it, then we can click it

44
00:03:10,520 --> 00:03:16,940
or tap it and are taken to that detail screen. We'll also need a cart screen, that's unsurprisingly the

45
00:03:16,940 --> 00:03:22,430
screen we see when we add an item to the cart or not which we then see but which we can visit to view the

46
00:03:22,430 --> 00:03:23,000
item there,

47
00:03:23,000 --> 00:03:24,440
so that's something we can do there

48
00:03:25,470 --> 00:03:30,600
and I'll also add an orders screen where we can view our orders.

49
00:03:30,600 --> 00:03:35,730
Now you could by the way argue that the cart screen and the order screen kind of belong to the user

50
00:03:35,730 --> 00:03:39,450
folder because they are kind of exclusive to the user,

51
00:03:39,450 --> 00:03:44,340
every user has its own orders and its own cart and therefore you could go either way,

52
00:03:44,340 --> 00:03:47,970
I believe they are a bit more on the shop product related side

53
00:03:47,970 --> 00:03:51,960
but again, that is totally up to you. In the user folder,

54
00:03:51,960 --> 00:03:58,980
I want to have my user products screen, so that will be the screen where I see a list of all the products

55
00:03:59,040 --> 00:04:06,570
that belong to that user and the edit product screen which is the screen we'll use for adding new products

56
00:04:06,690 --> 00:04:08,710
or for editing existing products,

57
00:04:08,730 --> 00:04:10,940
we will be able to reuse that.

58
00:04:11,160 --> 00:04:13,490
These are the screens we'll work in throughout

59
00:04:13,500 --> 00:04:20,280
this module and we'll not populate them with life all immediately right now, we'll instead work on that

60
00:04:20,280 --> 00:04:20,990
step-by-step

61
00:04:21,000 --> 00:04:23,090
but it is what we'll need.

62
00:04:23,220 --> 00:04:27,450
Now of course, there also is another folder we can add already and that's the store folder where we

63
00:04:27,450 --> 00:04:32,820
will manage our Redux store and our Redux state therefore which is our state management system

64
00:04:32,820 --> 00:04:38,070
I want to work with which we of course need because we got many screens that all have to work on kind

65
00:04:38,070 --> 00:04:44,280
of the related data and hence we need to manage that data, our products and what's in the cart and so

66
00:04:44,280 --> 00:04:45,090
on

67
00:04:45,090 --> 00:04:48,200
on some global level and Redux is really great for that,

68
00:04:48,240 --> 00:04:53,520
so we'll definitely need that. On the same note, we also need to install some packages,

69
00:04:53,550 --> 00:05:00,900
so I will run npm install --save and install Redux and also React Redux. We'll also need React

70
00:05:00,900 --> 00:05:07,480
-navigation because of course we'll add navigation again, so we can already throw that in there.

71
00:05:07,500 --> 00:05:14,540
I will also already add React navigation-header buttons because I will add header buttons here and

72
00:05:14,550 --> 00:05:19,380
I want to have these nicely styled and positioned buttons without having to do all that styling

73
00:05:19,380 --> 00:05:22,650
positioning on my own and that should be it for now.

74
00:05:22,950 --> 00:05:28,770
So I'll install all these packages already, we'll need them throughout this module and with these packages

75
00:05:28,770 --> 00:05:36,570
installed and these basic files created, we have a solid base setup to get started with.

76
00:05:36,580 --> 00:05:41,820
Now besides these packages, we also need to install two other packages with the help of the expo install

77
00:05:41,820 --> 00:05:49,050
command and that's react-native-gesture-handler, so expo install React-native-gesture-handler

78
00:05:49,050 --> 00:05:55,800
and also the react-native-reanimated package. Both packages also need to be installed

79
00:05:55,980 --> 00:05:58,800
with the expo install command.

80
00:05:58,860 --> 00:06:02,100
Now of course, it's all about populating that with life and there

81
00:06:02,190 --> 00:06:06,720
I want to start with the first screen we'll actually see which is the products overview screen.