00:00:02 Before moving to authentication and database setup, let's first set up the routes for the entire application.

00:00:09 First, we'll need a couple of authentication routes for login and signup.

00:00:15 And if you check out the design for both, you'll notice that both of these screens have a similar UI right at the top.

00:00:23 It's just the bottom that is a bit different.

00:00:26 These screens are also different from the rest of the app screens, which have a bottom navigation right here.

00:00:32 For that reason, we'll group all of these pages in one folder using Expo's shared layout feature.

00:00:39 These shared routes are also often called groups.

00:00:42 And these groups often share similar pieces of UI called a layout.

00:00:47 So let's create our first group within the app folder, which I will call auth.

00:00:53 It's going to be a folder and you have to put the name in parentheses to indicate it is a group.

00:00:58 Within it, create a new file and call it underscore layout.tsx.

00:01:04 Yes, you have to have that underscore for React Native to recognize that this is a special file and specifically for Expo.

00:01:11 Within it, you can quickly run rnf to quickly spin up a default layout component.

00:01:18 And we can call it the auth layout.

00:01:20 Within the same auth folder, we want to create two new files.

00:01:25 One of which will be called a signin.tsx.

00:01:28 And inside of it, you can run rnfe to quickly spin up a sign in component.

00:01:34 And then you can do the same thing for the second one and call it signup.tsx.

00:01:40 Also spin it up with rnfe.

00:01:44 Perfect.

00:01:45 We'll see those routes in actions very soon, but for now, let's proceed with creating another shared layout that renders this common button tab navigation

00:01:55 at the bottom for the rest of the screens.

00:01:57 We can do that by creating a new route group.

00:02:01 which I will call tabs.

00:02:03 You can also call it root or home or something like that.

00:02:06 And then I'll move this index.dsx within the tabs because that's going to become our new homepage.

00:02:13 Within tabs, also make sure to create a new layout.

00:02:17 like we did before, I'll call it underscore layout.tsx.

00:02:21 You can type rnf, which will quickly spin up a layout.

00:02:26 But instead of just rendering an empty view with a text, instead, we want to render a self-closed component called slot,

00:02:35 which you can import from Expo router.

00:02:38 What the slot component does is it renders the rest of the content as it is.

00:02:42 Basically, it'll render the contents of the other pages that we have.

00:02:46 So for now, leave it as it is, and let's create other pages.

00:02:50 This one will be called cart.tsx, run rnfe, and let's duplicate the same thing over for our second component in the tabs folder,

00:03:01 which will be called a profile.

00:03:06 Also run rnfe and then we'll have yet another one in the tabs, which I will call search.tsx where I'll run rnfe and finalize our tabs folder.

00:03:19 Now, if you reload your application.

00:03:23 you'll be redirected back to the homepage.

00:03:25 It feels like nothing has changed, but to test these three routes, head over to the Tabs layout, which is a shared parent layout of all of these other screens,

00:03:35 and inside of there, add a dummy check that'll redirect to the Auth screen if the user is not authenticated.

00:03:43 Later on, we'll replace this with a real auth check, but for now we can say const isAuthenticated is equal to false.

00:03:50 And then we can check if not isAuthenticated, we can simply return a React Native and Expo redirect component from Expo router,

00:04:02 where we can point the user back to forward slash sign in.

00:04:07 Expo really is making React Native applications feel much more closer to the web.

00:04:13 With this in mind, you should be redirected to a different screen.

00:04:16 And if you pay close attention, it'll say auth layout at the top, but not sign in.

00:04:22 That's happening because we have a special layout file within the auth route group.

00:04:27 So inside of here, what we can do instead.

00:04:30 is rapid with a safe area view, and then beneath the text, render a slot, the same component we rendered before.

00:04:38 And now you can see that we have the auth layout where maybe you can render the auth UI or the bottom navigation bar, but you also have the page itself

00:04:48 rendered through the slot component.

00:04:49 So now just to make it interactive and to simulate a sign-in functionality, Within the sign in, we can render a button coming from React Native and give

00:05:01 it a title of sign in.

00:05:03 And on press equal to a callback function where we use the router.push functionality to push over to sign up.

00:05:14 Maybe if we want to switch over to the sign up page and this router, we can simply import from expo router.

00:05:22 But now, you might be wondering, hey, didn't you say that in React Native we use touchable opacities instead of buttons?

00:05:29 Yes, they're a preferred way of interacting with the UI.

00:05:33 But for some very, very simple buttons, something like this one, even a regular button is fine.

00:05:40 It is also made to work with React Native.

00:05:43 So now if you click on it, it'll redirect you to sign up.

00:05:46 Now we want to do the similar thing for the signup page.

00:05:49 So I'll copy these two lines of code and paste them over into signup where we can import router and then render a button to point us back to the sign in page.

00:06:04 So I'll say sign in.

00:06:07 and don't forget to import the button itself.

00:06:11 So now we are in the sign up, we can go to sign in.

00:06:14 And from sign in, looks like I misspelled it, this should say go to sign up.

00:06:18 So now we can switch between those two pages, which means that we have effectively created navigation.

00:06:24 And if you want to test out the other screens that you have created so far, such as the card, profile, and more, you can follow the same thing that I've

00:06:32 done so far and just add buttons that would redirect to those different pages.

00:06:37 But you might switch off the isAuthenticated rule because it'll always bring you back to sign in.

00:06:43 So just maybe turn it to true while you're testing and then bring it back.

00:06:48 Later on, of course, we'll implement the entire bottom navigation so that we can actually move between all of these different screens.

00:06:55 But for now, I'm fine with just having the base set up as well as the authentication, because from the next lesson onward,

00:07:01 we're gonna start diving into real functionalities.

00:07:04 So it's important that we have our UI and routing for authentication done, and then we can actually connect it to our database and our authentication provider

00:07:14 to create accounts on our application.

00:07:15 And this is also a good point to maybe push our code to GitHub because we've implemented a lot of changes and we can basically say that we have created

00:07:24 a base file and folder structure for the future of our application.

00:07:27 So now is a better time than ever.

00:07:29 Now, who am I kidding?

00:07:30 It would have been better if we did it at the start of the project.

00:07:33 You should always commit consistently and commit often from the start.

00:07:38 But hey, better now than never, right?

00:07:40 So let's create a new GitHub repository.

00:07:42 You can call it anything you want, like JSM food ordering app, or you can just call it fast food app.

00:07:51 And then you can make it either public or private.

00:07:53 And then you can just create a repository with all of the default configurations.

00:07:58 This will pull it up for you in a matter of seconds.

00:08:00 The only thing you need to do here is just copy this one long line with git remote add origin.

00:08:07 And then head back over to your terminal.

00:08:10 I'll head over into my second one that is empty and just follow my lead.

00:08:14 Git init to initialize a new GitHub repo.

00:08:18 Git add dot to add all of the changes.

00:08:21 Git commit dash M.

00:08:23 And now we can type our commit message, something like set up the base file and folder structure.

00:08:31 for the rest of the app.

00:08:33 Oh, and make sure to add git at the start.

00:08:36 This'll commit it.

00:08:37 Then say git branch-m main, then git remote at origin.

00:08:44 This is what you just copied.

00:08:45 And then finally git push-u origin main.

00:08:52 In a matter of seconds, all your code will be live right here on GitHub.

00:08:56 And it's always super useful to have your code online and to commit consistently.

00:09:01 First of all, it's a good sign for potential employers to look at it and see that you're actually putting in the work.

00:09:07 You can further tidy it up and give it a description, like a food ordering app.

00:09:13 And while you're committing consistently, this is also just building your GitHub contribution graph, which is always good to see.

00:09:19 Perfect.

00:09:20 So immediately in the next lesson, we'll dive into setting up the core functionalities of our application.