Shopify App Planning and Project Management

hey guys it's your boy joe back at it again codingface.com in this video we're going to be going over a shopify application and we're going to show you guys the process of building it at the same time we're going to show you guys some new tools that maybe you have never used but can help you out to get jobs or get projects completed um and when i mean jobs like maybe gigs or things like that that you might have as a shopify developer or even as a web developer in general okay so we're gonna be using asana to basically manage our whole project and we're going to show you guys the whole process in here okay so i'll see you guys in a second hey guys this is your boy joe back at it again codingphase.com in this video we're going to be looking at a shopify application that we are going to be creating in the course of master shopify app development course with node.js okay now in this course we're going to be teaching about pretty much everything about shopify and using the latest tools that are provided from shopify like the shopify cli and again this video is part of the course so what exactly is the application that we're going to be building we're going to be building an application where people can create frequently asked questions and then also embed them within their websites now for those of you guys that don't know shopify has allowed people to basically create applications that can become blocks inside of a theme so let's say for example i'm a store owner and i wanted to add a specific theme right a an application for the faqs right so the same way how we have sections here where i can easily drag and drop them right i can move this from here put it to the top just like that we are basically going to create this application that allows us to create faqs and then also too the user is going to be able to just drag and drop them anywhere on the website so it could be on the home page it could be on a page called contact it could be on a product page it could be anywhere that they want to put it okay so again we're going to be building that with shopify in this course now the first thing that we're going to do is we're going to sign up to asana if you guys don't know what sauna is asana is a a free service again is basically you could pay for it but for you guys that are building um you know basic features and and you know keeping track of your projects it's a great tool so we're going to use asana we're going to come in here i'm going to log in just a second all right and there we go so now i have access to all of my projects and everything that i'm working on now for you guys that are new when you register they're going to ask you about a space right a space that you could have whatever name you want to call it you could call it engineering you could call it uh development projects right you could also have multiple spaces you could have like a private space and uh basically a space for your projects that you might want to have other people to work on okay so for me i have it in the engineering and then now what i'm gonna do is i'm gonna start my first project which is gonna be for this one this shopify application so i'm going to click right here and i'm going to click on project okay now in here i'm going to create a blank project just to show you guys how to build this and we're going to call this one faq rs so that's the name of the application so this is going to be public to engineering so any of my engineers they have access to this if they want to okay and basically it's gonna keep the same format we could do it like this on a list like that or we could do it on a board it's up to you how you wanna do it uh this time around i'm gonna use a board so now that we're here on this board the first thing that i like to do is i like to write down what are the features that we are supposed to be creating right so i'm just going to use this and say features for app then i'm going to come here and i'm going to write down all of the features for the app now to now waste your time you see me type this i'm going to pause the video and then i'll show you guys the features so here are the main features of the application and it really comes down to being able to install this application in multiple stores and then when multiple stores install them we have some type of table where we save all their information or maybe the sessions of each store so like that when the user goes in and says hey i'm using from cpcourse.myshopify.com or let's say 87 lux.myshopify.com when they use that application they load up their own uh faqs okay so we need to create that feature multiple stores can use this app the other feature is store can create multiple facts okay so the same way how we see here uh you know most companies they're gonna have like one frequently asked question uh section that could be in the contact page but maybe they want to have another frequently asked question on the product page and also too they might want to have a frequently asked question on the front page so we want to allow the user or the store owner to be able to create multiple of these okay and then at the same time they can also have multiple questions inside of each faq now another thing that we have here as a feature is each store gets one free faq meaning one of these right and then it has a maximum of three questions so basically one two and three that's it that's as far as that they're gonna get for free okay so it's like a great way for they could try it out and then from there if they want more right if they want to create more faqs or have more than one question inside of their faq then they're gonna have to upgrade they're gonna have to come in and they have to pay for a subscription it could be five dollars it could be ten dollars etc right we're really trying to build this application the same way how you will build a like a full stack application and a full shopify app for you to start making money okay so this is the way how you got to start thinking how can you go in allow people to try your application but then at the same time what's going to be the incentive for them to pay okay so there you go you get to try for free you get to use the application you get to create one faq you get three questions you want more than that eight you gotta pay okay and then from there we're also gonna have another feature which is gonna be dynamic faqs every single time somebody comes in and clicks on the faq right we want to keep track of each question that got clicked on and then dynamically we want to make sure that the question that has the most clicks gets to become the first one okay so it's gonna be sorted depending on how many clicks people have actually uh clicked on so for example if i'm looking at a website or a subscription right and i come in here and i say okay what's the most frequently asked questions people want to get a refund can i get a refund right if everybody comes in here and clicks on this one that means this is the number one question that people are always looking to ask so we don't want to place this at the bottom we want to put this at the top now that's a feature that we're only going to allow the users who are actually you know paying members or you know paid subscribers to to this application okay so again this is a real application yes it might seem like simple to some of you guys but there's a lot to it again we're gonna have to set up uh the back end we're gonna have to set up um you know things for the front name we gotta create the dashboard for people to be able uh to create the frequently asked questions uh we might even have to create uh like a chart right using some type of chart system to give them data right like a report of like which one is the one that's getting clicked on the most right so again it's a full application for shopify that you know at the end of the day this is a application that should i might go in and launch it at the end and make some money out of this app okay um especially because if we look on shopify shopify app store right one of the most popular uh you know one of the most popular apps is faqs right there's a lot of companies that are doing faqs and it's for a reason it's because people they need this right uh faq page free product faq easy slider accordion tabs faq faq uh page faq page and you might say well there's enough people already creating something like this out there why would i go and create the same one well it's because if it works for them it's gonna work for us now it's up to us to actually improve on what they have created okay i haven't seen any of this people actually create a dynamic faq that actually sorts itself depending on um how many people actually click on a question right they usually go in and just create a simple accordion like you see right here how it is and that's pretty much it okay and they charging for that so again if we look over here there's people they got even reviews of october 5th i mean today is the fifth so people they want this again they they want this this is an application that people are are willing to pay for and look at this they got 230 reviews so that tells you right if by 20 of people actually leave reviews on websites let's say bring out the calculator right real quick if this is 20 right 230 let's say 230 okay times 100 divided by 20. so let's say on average they could be having right and this is an estimate uh they could be having 1150 people that's actually using this application and let's just say they are paying 399. so let's say times 399 that's 4 588 dollars that they're making right and that's the estimate that's a rough estimate they could be making more they could be making less okay now if we look over here you might say well that's almost nothing four or five thousand dollars a month right but think about it like this they have one app they have another app and they have another app right here and they probably got more apps coming up with shopify apps you could go in and create a huge application you could create the next uh clavio right or or you could create the next oberlo or whatever it might be right which are huge applications but then you know at the end of the day the goal is to make income right if you have one that's making you 4 000 you have another one that's making another 2 000 then you have another one that's making 900 now you're making like you know seven thousand eight thousand dollars a month that's enough for you to quit your job that's enough for you to pay your bills and to maintain you and then from there of course you continue creating new apps and creating new uh opportunities for yourself okay so again this might seem like a simple app but you're gonna see inside of the course that even with this simple app it gets complex because there's a lot of moving pieces all right so now let's go in and break down this features that we have here into different tasks and things that we have to do in order okay so i'm gonna stop right here and i'm gonna see you guys in a second all right so let's start with the first one okay which is uh this one right here multiple stores can use this app okay so use app i mean we could rename this later on and here we could write some description about it if we want to right here i'm just going to come in i'm going to say create connection to database right create connection to database create migration for uh let's say stores table then in here i'm gonna say save store to stores table when user authenticates or let's say user installs the app okay so there we go and then now i'm going to come here and i'm going to give this a tag of back in okay and put this as red okay back in is not my favorite okay so i'll put it in red okay so then now the next thing that we want to do is we want to say uh store can create multiple faqs so in here we're going to put in create faqs so in here i'm gonna say okay or let's say faq pages or page pages let's just keep it as pages for now so then now in here what do we have to do now here all we really need is just this so basically we have the faq we have a name for it so like let's say this could be about page this could be product page this could be whatever they decide to name that so that should be an input field then from there we have a form where you could have a question and also to an answer then we should also have like a plus button that will allow us to create more questions and answers so plus to create more qa okay and then from there the feature of being able to add multiple questions so that's pretty much done right here plus button uh to create more questions and answers okay so that's pretty much done right there now we also need a home page so a home page like that also too let's go and tag this as the front end so let's go and tag uh let's say front and okay front end and let's make this like a blue color okay so in here we have that home page we need to have the feature of showing show a table with a list of faqs okay list of all faqs we might also need some pagination okay let me see what else so we might need some pagination have a list of all the faqs it should also have uh let's say the title um create it update it right so create it and update it what else do we need for that let's say we could put in information about what page you got put on i mean technically we don't need that we just need to have the title created and updated at uh which is basically the dates so then that's good enough if anything we could come back and and change this around and add some more stuff okay so then that right there change that to to blue okay where was it at tags okay front end all right uh another thing that we need to do is have a page that shows uh the frequently asked question right so let's say for example when they click on the home page and they click on one of the items on that list of that table it should take us to a page where we can see um all of the questions and and basically all of the questions and answers that that we have there and we should be able to edit them so okay faq show page right show all the information of the faq and then allowed to edit each question and answer now later on we might decide to make this into its own page so we might have like a show page where it shows all of the the different you know the questions and also to the answers but then if we click on a question maybe we could create a page that's just to edit the question okay so we can do that let me see coming here africa okay so let's also create that right here call this one show faq page and let's name this add tags call this one front end okay i think we put it here we made it twice uh for this one i'm gonna say maybe edit faq page and this might be something like um instead of the faq at an faq page we might just put in edit question and answer okay edit question and answer page form to edit the question and answer now also too for the home page let me change this to to the tags for the home page one thing that i forgot was um show table right show table if user has any queue or faqs if the user has any faqs then we're going to show this like that okay we're gonna show the user that page that's gonna have to the list of table or the list of the faqs and the title creator that updated and some pagination else is going to have a blank page or we could say empty state better empty state that will have that will have a button uh telling the person to create button to create create new faq okay all right so now the next thing is to actually work on the back end again so in here we're gonna basically create the routes for all of this pages so in here we're gonna say create routes and save data okay so in here we're going to go in and we're gonna say like this create route route for route for all faqs list okay route for create save data okay then we're also gonna need um the route uh for editing data okay and route to for delete okay data now this is where we're gonna have to do create faq okay this is the same thing faq faq okay and then in here we're gonna put this in like create routes faq routes okay so faqs right okay so that's fine so then now and here we're gonna make this for the back end right uh we're also going to duplicate this task this is pretty much the same thing give this a second being duplicated now we're going to do the same thing we got to create a route for the questions right so question and answer routes okay so we got qa qa my god i can't type qa and also qa okay so uh ro show all the qa for this one is not gonna be to show all the qa rav4 showing qa list are we going to need that no i don't think so this one we could delete so we need to have one that to create another one to edit and another one to delete now let's go and put the tags so we know which one this is actually marked as so it's like front end okay um let's also go over here tags front end okay uh one thing that you can do like once it's getting a little bit crazy it's a lot of uh different tasks you could always go to list list is actually a little bit more manageable right that you could actually see all of these right also two you could have the board like i said uh you could do timeline calendar there's a lot of extra features that you have with asana but again it's up to you how you want it uh so once we have this create faq table create qa table what else is left we need to have a memberships or membership table so create membership table i just realized i put this as the front end it's supposed to be back in so change this to back in remove the front end put this as back in okay and then in here we're gonna do the same thing um the only difference is for this one we got to go in and start putting in like the information as far as like the columns so let's say uh we're going to have a membership name let's just call it name price okay name and price and of course uh create it created at updated at okay and that's pretty much it god i can type okay copy this let's put in the tag of backhand okay create a table for this one we're gonna put in the faq there's gonna be a name for it then it's just gonna have created that maybe we'll have like a description okay like a description like a note that's they could put in okay copy this come back to this one this one's gonna have question title and the answer that's it that's pretty much it that's what the keyways is gonna have and there we go okay i think we're done so far uh let me look at the features what else we have okay each store gets one free faq with three questions if they want to create more than one or one want to to add more questions to the faq they have to pay for a subscription so again this is where we have this create memberships table okay so also tool we might say over here where we are able to have the faq routes okay we could put in limits amount amount of faqs created depending on membership okay let me copy this for this one we might say limit amount of qa's created depending on membership so there we go so we have that and then over here dynamic faqs will sort from the most click questions okay so that's another thing that we could put so let's say for um when we are creating this i'm just create faq page um let's put in dynamic option uh let's say true or false all right do they want it to be dynamic the faq or not that's it okay uh let me see over here what else we have so create q8 routes faq routes okay uh also tool limit dynamic mode only to paid memberships okay and let me see we got create a great graphic table create qa table create membership table and i believe that's it that's pretty much our whole application okay uh what else is left matter of fact we need to make over here make faqs to be app block okay so here we're gonna say this is done through the back end so we're gonna say okay so there we go and that's it i think that's self-explanatory right we don't have to go in and put in no more details all right cool so so far right i usually do this for myself i'm like yo write write features for app right and then once it's done and i know okay i got all the features done everything that this app is supposed to do then i just click over here click complete and put it on on the complete side and then as i go section by section i'll go in and start completing them and moving to the other side now another thing that i do want to mention is that we're going to start with the front page right because this is going to be like the first thing it's going to be easier to do the front end than actually doing the back end so i'm just going to go in and create all of these pages first and then from there i'm gonna go in and create um the rest of everything else okay so pretty good right so hopefully you guys are sticking with me i know it's 27 minutes uh this whole video uh but it's good to see this whole process of how we create this application right and also how we come up with these ideas now again guys if you are remember codingface.com hey you have access to this if you still are not a member codingface.com i don't know what you're doing with yourself right now like this is the spot like we actually building real applications things that you're going to be doing at a job like no one else does this everybody else goes in and creates a little to do app we're actually creating applications that could be uh sold that could be you know services for people like we're doing research we're actually building real projects it's not just like a little cookie cutter thing we're gonna find problems we're gonna uh get stuck in some areas right and we're gonna build it together that's how you actually learn okay this is not gonna be some cookie cutter course okay this is part of the shopify app developer bundle again but if you're a yearly member of codingface.com you have access to all of this okay guys so again it's the best deal best community uh great price and again if you just want to get started start learning programming start learning how to build things you can start with 20 bucks man okay it's the best deal that's out there and probably if you look in the description of this video if you're watching it on youtube you'll probably get like a 20 off uh by using the link on the description of the video so again guys we don't teach coding as a hobby we here for the back okay so with this application you're going to learn so much about shopify apps and hopefully you guys can go in and start building your own applications and come up with your own ideas from this app okay i'll see you guys later bye

Channel: CodingPhase

Views: 624

Rating: 4.8709679 out of 5

Keywords: codingphase, coding phase, codingphase.com

Id: LEEelmKDca4

Length: 33min 34sec (2014 seconds)

Published: Tue Oct 05 2021