Introduction to the New Tutorial
Welcome everyone. Welcome to this little introduction about my next tutorial I'm gonna build here on YouTube. First thing, I want to thank you everyone who is already subscribed to my channel. That means a lot for me and this is why I want to give another tutorial.
For this tutorial again, it's gonna be one where we're gonna use React Native, but I want to change a bit the tech we're gonna use. And now that's gonna be with kind of a new language we don't see a lot here on YouTube; it's Elixir. And we're gonna make use of this awesome framework called Phoenix.
So what we're gonna build again, because you know I like to do a clone of an application because I don't want to lose time thinking about a new feature I can build for an app. So I just want to do a clone so I just think in coding. So we're gonna build an Instagram clone and I think we're gonna learn a lot of good things with this tutorial. Also, I've learned a lot just by doing this tutorial because I'm kind of a newbie to Elixir.
Instagram Clone Features
The feature we're going to build is kind of what Instagram is. We're gonna build a photo feed first. So a user can add all the photos from a gallery, and he can like a photo. So a system to like the photo. You can also comment on the photo. Also, they can take a photo. So we're gonna learn how to take a photo with React Native and also how we can push this photo to the server side.
After that, we're gonna make use of the authentication system with Facebook, so authentication in the application. So we're not going to have email or password; we just want to use kind of authentication and we're gonna make use of JWT. Something I didn't say, we're gonna make use of GraphQL too, and I hope that's this thing you're gonna like it because I love it so much.
After that, we can add a chat system between users. So a one-on-one chat, just a simple chat system where each user can chat with someone else. And yeah, like a place where you have all these friends and you can search for anyone today and kind of... I mean, the real Instagram. And also we can add a following system right there. So yeah, so we can add friends in the application. Also, I think of maybe adding a following system about tagging, but this is something we're gonna do too. And also we're gonna surely have a search at the end, but this thing is gonna be kind of a homework at the end for everyone and we're gonna see how we can build that.
And also, really important, this is not a full Instagram app, but just enough to learn a good amount of things because I get a lot of comments all the time on YouTube like, 'can you add this, can you add that, can you add this?' And sometimes, when I build a stuff, it's just because I want to give you that knowledge, but some time I don't want to go too much further because, I mean, I don't want to put like a 20-hour video on stuff. So you see what I mean.
The Technology Stack
So this is the feature we're gonna build. So the tech we're gonna use: React Native for the mobile framework. After that, for the backend framework, we're gonna use Phoenix. So we can check here. So, React Native—even if you are on my channel, you know React Native is something I use a lot. It's a way to build iOS and Android apps with React. That's been built by Facebook, and you can see here they use it, so it's a good idea I think to build with this.
After that we're going to make use of GraphQL and Apollo GraphQL. So that's gonna be the technology we're gonna be using in the front end to make the query with GraphQL. So for the one who don't know GraphQL, that's maybe not the good tutorial for you to learn GraphQL. I will go on a tutorial of GraphQL first and after that I will jump on this one.
After that we're gonna make use of Elixir. This is an awesome language, I mean one of the languages right now I love it so much. I mean, its syntax and everything makes sense. After that, we're gonna make use of the Phoenix framework, and for those who ask, yes, we're gonna make use of the version 1.3. So for those who know Phoenix a lot, they know that in version 1.3, we changed the architecture, and this is what we're gonna use.
After that, for the GraphQL part in the backend, for the Elixir, we're gonna make use of the Absinthe library. So this is like the one we're gonna use to do the implementation of GraphQL inside the Elixir language, and it go really well with Phoenix. Again, pretty good job here.
The database we're gonna make use of is Postgres. I don't want to change the standard database we use when we use Phoenix. Also here, as you can tell right... Apollo. And yes, we're gonna use a new version because as you know in the past week, we got the version 2 of Apollo, and that changed a lot of how we use the library. So this is the tech we're gonna use.
Prerequisites for Viewers
So, what you need to before taking this course or tutorial, if you like it more. You need to have a good knowledge of React Native. This course is not about getting deep on something. What I mean is I see a lot of persons who struggle to just start working on a project. They're kind of like, oh I know this, I know that, I know this, I know that, but they don't really know how to make that in context and build something. So this is just a tutorial. We go on the code, we build the feature we want to build with the Instagram clone. So we're going to make use of the same kind of design and stuff like that, and we don't lose time on which kind of feature can we do. We just make use of the time to build this feature right away and after that we jump on the code.
After that, you need to know a bit about Elixir. It's not an Elixir beginner course where I'm going to teach you how functions work, also how pattern matching works, and stuff like that, in order to use recursion, stuff like this. I mean, take some course on Elixir first before going there because I think it's going to be pretty hard for you to catch up on this tutorial.
After that, you need to have a basic knowledge of GraphQL. So the only thing I ask you about learning about GraphQL is you need to know what is a resolver, what is a schema, and what is a mutation. And also, what is a subscription. If you know this thing, and also why we use GraphQL, you're good to go for the GraphQL part.
And I want you at least to have touched Postgres. I mean, I don't want to talk about what is a join table and stuff like this. So I mean just know a bit of Postgres. This is not a beginner's course.
Tutorial Structure and TDD Approach
So how am I going to record this tutorial?
First thing, some of the video is already recorded, so that's going to be kind of easy. But I want to tell you how the strategy gonna work. First thing, we're gonna use kind of a TDD-ish approach for a good portion of the tutorial. So for the ones who don't know what is TDD, that means Test-Driven Development. So that means you do the test before you build something, and you make your test crash, and you build your thing until your test is good. This thing is going to be pretty good to do on the server side because I mean, in the front end, it's not that much easy with React Native and stuff like that.
So the tutorial is going to be divided in many parts, and each part gonna have at least three to five videos, maybe more, and they're gonna be divided by user story or feature if you like more. So, each part looks like this, for example: For video one, we're gonna have the photo feed description. So I'm gonna talk about, okay, so what we need to do when we do the photo feed stuff, also what is the user story, etc.
After that, we're gonna write some backend tests, because we do TDD. So we're gonna just write the test and make it crash. So the next video after that, we're gonna write the code to make it work. We have it finished in video number two when it crashed, and we're gonna finish in number three with the video working now.
After that, we're going to pass to video four, designing the mobile side about this feature. So if we do the photo feed, we get to design the photo feed in the front end. So like, each card with the photo in the scroll view, etc., and with just mock-up data.
And finally, in the last video of this part, for example, that's gonna be about putting the GraphQL—putting finally the backend and the mobile side to talk to each other and to let the mobile part to show the real data. So we're gonna just change what we work for real data.
Release Schedule and Final Thoughts
My plan when I'm gonna start to push the video, it's going to be to add that new user story or feature each week. So one week that's going to be photo feed, second week's gonna be about the liking system. So go after that you see like there's gonna be the following each other. If I feel that the videos go pretty good, so I mean, I see you like it a lot and you want it much more, I can maybe push video much more faster. It's just, I mean I want you to have time to learn other stuff before coming back on this tutorial.
So the tutorial is not really yet done. I'm gonna say 75% of the tutorial. So I think it's gonna start to come on YouTube maybe mid-December, maybe earlier, maybe a bit later, but I'm gonna try my best to do this. This tutorial is not like the other ones I've built. It's gonna have a bit more structure. So as you can see now, I have a good introduction idea and I mean, I hope you have some fun like I have with this kind of technology. And for those who came from Node.js and just want to play with Phoenix and they just want to see how that's gonna look like, trust me, when I'm gonna finish this course with you... and I mean, I don't want to jump back on Node.js after that. Phoenix just makes so much sense and that's why I really want to give some knowledge and stuff like that to other people because I just think this framework can go really, really well in the future. And this is for the modern web, and this is what they say right there. This is a web framework where we don't compromise the speed and the maintainability, and you see what I mean. And this is built for the new web. So you're gonna love it, trust me.
I hope you enjoy. Please let me know in the comments field about this next course. Again, I want to thank you everyone who has already subscribed to my channel. That means a lot, so that's why I want to push a new tutorial and put time for you. Hope you enjoy and we're gonna talk later. Have a good Thanksgiving. Bye.
