1 00:00:00,600 --> 00:00:02,440 Our app is looking pretty good at this point. 2 00:00:02,460 --> 00:00:07,260 The last thing I want to do right now is to make sure that we deploy all of our latest changes over 3 00:00:07,260 --> 00:00:08,320 to Heroku. 4 00:00:08,370 --> 00:00:12,960 So we've gone through this deployment process several times now and it's going to be no different this 5 00:00:12,960 --> 00:00:13,750 time. 6 00:00:13,860 --> 00:00:16,530 So I'm going to change back over to my terminal. 7 00:00:16,530 --> 00:00:22,470 I've already killed my server and I'm going to first check and make sure that all of my work is ready 8 00:00:22,470 --> 00:00:24,770 to be committed by running get status. 9 00:00:25,050 --> 00:00:30,270 So here's a list of all the different files and folders that we've created in added or changed since 10 00:00:30,270 --> 00:00:37,470 last time we committed will then run get add dot to stage all of these changes for Commit will run get 11 00:00:37,530 --> 00:00:44,960 commit dash in and then a commit message for which I'll say users can see survey results. 12 00:00:44,960 --> 00:00:46,100 I think that's good. 13 00:00:46,140 --> 00:00:54,260 And then finally we will push all these changes off to Heroku with get push Heroku M.. 14 00:00:54,490 --> 00:00:58,890 OK so that's going to start up the deployment process in Kickoff that whole thing that we've now gone 15 00:00:58,890 --> 00:01:01,500 through several times at this point. 16 00:01:01,500 --> 00:01:07,770 Now one last thing I want to talk about around deployment just as a quick reminder when we put together 17 00:01:07,770 --> 00:01:14,940 our Send grid web hook all that configuration over here saw the grid dashboard right now I'm logged 18 00:01:14,940 --> 00:01:20,070 into send grid under the settings tab mail settings and we all remember we went through all this stuff 19 00:01:20,070 --> 00:01:21,940 with event notification. 20 00:01:22,080 --> 00:01:28,470 I want to remind you that at this point our second grade account is sending everything on over to that 21 00:01:28,500 --> 00:01:30,920 local Tunnell web hook that we set up. 22 00:01:30,960 --> 00:01:36,060 So this local time whole thing is going to direct traffic specifically to our laptop. 23 00:01:36,090 --> 00:01:42,090 So in order for all this send grid stuff to work correctly in production like overon Hoku we would need 24 00:01:42,090 --> 00:01:46,490 to make sure that this web hook instead looks over to production. 25 00:01:46,500 --> 00:01:52,440 Now of course we probably want to have the ability to test out our changes or test out changes to our 26 00:01:52,440 --> 00:01:54,820 application on our development environment. 27 00:01:54,960 --> 00:01:59,330 And then also have the same application running in production as well. 28 00:01:59,400 --> 00:02:05,890 However said grid unfortunately does not allow you to add multiple web hooks to use as addresses here. 29 00:02:05,910 --> 00:02:11,100 So in order to really make everything work properly and with our application and send grid you really 30 00:02:11,100 --> 00:02:18,650 need to make a second account a second account and then set up Web hooks on that one as well. 31 00:02:18,660 --> 00:02:24,000 Now we've gone through the process several times now of setting up duplicate resources for development 32 00:02:24,090 --> 00:02:25,040 and production. 33 00:02:25,200 --> 00:02:29,730 So for this I'm going to say you know what I'm going to leave this to you if you really want to go through 34 00:02:29,970 --> 00:02:33,860 and make sure that the web hook works correctly on development and production. 35 00:02:33,870 --> 00:02:36,580 I'm going to leave it up to you to make this thing happen. 36 00:02:36,690 --> 00:02:42,180 But I do want to remind you that as it stands if you deploy the application right now to production 37 00:02:42,480 --> 00:02:48,570 web folks are not going to work because this is pointing over to our local server our local development 38 00:02:48,570 --> 00:02:49,620 environment. 39 00:02:49,650 --> 00:02:54,660 So you want to change that if you want to really have a finalized version of our application over on 40 00:02:54,660 --> 00:02:55,660 Heroku. 41 00:02:56,210 --> 00:02:56,690 Okay. 42 00:02:57,000 --> 00:02:59,550 So enough of that now going back on the terminal. 43 00:02:59,550 --> 00:03:01,820 It looks like deployment is complete. 44 00:03:02,130 --> 00:03:08,610 So we'll run Heroku open to check out our application and just make sure everything is working to some 45 00:03:08,610 --> 00:03:10,180 reasonable degree. 46 00:03:10,890 --> 00:03:11,320 Okay. 47 00:03:11,340 --> 00:03:13,680 So I will go over to my dashboard. 48 00:03:14,010 --> 00:03:16,600 I don't have any surveys right now so I'll make a new one. 49 00:03:16,620 --> 00:03:18,170 Now I certainly can make surveys. 50 00:03:18,180 --> 00:03:22,770 I'm just not going to receive any of the clicky events from these send great accounts. 51 00:03:22,830 --> 00:03:32,150 So we'll say test survey I'll use dev e-mail me at gmail dot com again next send survey. 52 00:03:32,430 --> 00:03:37,830 OK here's the survey and then I should be able to go over to my e-mail inbox and see the test survey 53 00:03:37,860 --> 00:03:38,670 pop up. 54 00:03:38,740 --> 00:03:39,110 Cool. 55 00:03:39,120 --> 00:03:42,250 So looks like everything is working very well on production as well. 56 00:03:42,270 --> 00:03:43,970 Now certainly I could click this link right here. 57 00:03:43,980 --> 00:03:49,050 But again I'd say for the third time Nuro remember that the web hook will be sent to our local environment 58 00:03:49,350 --> 00:03:53,310 rather than to the Heroku application which is what we probably want. 59 00:03:53,310 --> 00:03:57,580 So I would say for a third time I'm going to leave it up to you to take care of that. 60 00:03:57,600 --> 00:03:58,090 OK. 61 00:03:58,110 --> 00:04:04,600 So at this point this is pretty much you know where we conclude the main development of this application. 62 00:04:04,770 --> 00:04:09,490 Of course however there might still be tons of different features we can add to this application and 63 00:04:09,500 --> 00:04:11,210 you're probably thinking Steve. 64 00:04:11,250 --> 00:04:14,810 That's it like we are we can do X Y Z or x y z. 65 00:04:14,820 --> 00:04:16,270 Well you know what. 66 00:04:16,290 --> 00:04:21,180 Obviously there is a ton of different features that we could possibly add to this application but we've 67 00:04:21,180 --> 00:04:25,510 already been talking about this for a very very good number of hours. 68 00:04:25,770 --> 00:04:30,780 And so at this point I'm going to say I'm going to give you a couple of different options on some ideas 69 00:04:30,780 --> 00:04:35,940 on how to expand the app and I'm going to let you kind of take it away and do some development on your 70 00:04:35,940 --> 00:04:36,750 own. 71 00:04:37,200 --> 00:04:42,990 Now when I do give you these suggestions I have not necessarily gone through and implemented all them 72 00:04:43,170 --> 00:04:45,330 inside the application by myself. 73 00:04:45,330 --> 00:04:50,760 So I'm not necessarily going to be able to you know help you in great detail if you ask me a question 74 00:04:50,760 --> 00:04:56,270 about how to do one of these expansions or one of these extra features I'm going to suggest to you but 75 00:04:56,320 --> 00:05:00,200 I can at least give you maybe a little idea or two to get started. 76 00:05:00,300 --> 00:05:05,550 If you have no idea on how to do it so of course do feel free to drop me a line if you feel like you 77 00:05:05,550 --> 00:05:07,020 are completely stuck. 78 00:05:07,050 --> 00:05:12,500 But again this is kind of the point where I want you to have the ability to add on some extra stuff 79 00:05:13,700 --> 00:05:14,070 OK. 80 00:05:14,170 --> 00:05:19,800 So here's a handful of suggestions on how to add additional features to the app. 81 00:05:19,810 --> 00:05:23,760 Now of course this is not at all exhaustive list. 82 00:05:23,770 --> 00:05:29,920 There's a lot of different things we could do the app but these are some kind of relatively straightforward 83 00:05:29,950 --> 00:05:34,560 changes that are still relevant to the application that I've rated in terms of difficulty. 84 00:05:34,720 --> 00:05:37,990 So I want to give you a quick description of each of these possibilities. 85 00:05:38,080 --> 00:05:40,060 So we go from the first one down. 86 00:05:40,060 --> 00:05:44,220 So the first feature is something that would really be around the front end of the application. 87 00:05:44,380 --> 00:05:47,390 And I'm going to say that it's easy to add in now. 88 00:05:47,500 --> 00:05:49,560 Easy is entirely relative. 89 00:05:49,570 --> 00:05:51,310 You know I say user here that is relative. 90 00:05:51,310 --> 00:05:53,880 In other words this might really be hard. 91 00:05:53,920 --> 00:05:59,150 You know this might be hard to put together but compared to the other stuff on the list it is easy. 92 00:05:59,170 --> 00:06:02,380 So might be hard but relative to other stuff it's easy. 93 00:06:02,740 --> 00:06:08,930 OK so first one front end it's pretty easy to do just improve the design of the survey list card. 94 00:06:08,950 --> 00:06:12,340 So basically that component that we just put together right here. 95 00:06:12,460 --> 00:06:14,630 Clearly this is not pretty at all. 96 00:06:14,720 --> 00:06:16,700 You know what we're looking at right here not pretty. 97 00:06:16,750 --> 00:06:21,490 Now I think this thing could use a pretty good amount of work to kind of make it look a little bit better. 98 00:06:21,760 --> 00:06:27,500 So some quick suggestions maybe rather than showing yes and no vote totals right here. 99 00:06:27,520 --> 00:06:32,020 Maybe instead we show a nice bar chart that kind of says Here's the number of yeses and this is the 100 00:06:32,020 --> 00:06:36,870 number of your nose or maybe show like a pie chart or something like that. 101 00:06:36,910 --> 00:06:42,640 In addition we're currently showing these sent on date but you'll recall that inside of our survey model 102 00:06:43,840 --> 00:06:47,590 we are also recording the last responded as well. 103 00:06:47,590 --> 00:06:52,360 And so I think would be pretty easy and pretty straightforward to also tell the user Hey here is the 104 00:06:52,360 --> 00:06:56,410 last time someone responded to this thing. 105 00:06:56,410 --> 00:07:00,210 And then besides that you know just the styling in general could use a little bit of help. 106 00:07:00,220 --> 00:07:06,310 So I think that that would be a good easy place to get started on the front end aspect of the application. 107 00:07:06,310 --> 00:07:11,800 Now next one is towards the back end and I say backend because that's where most of the work would be 108 00:07:11,800 --> 00:07:12,630 going into. 109 00:07:12,670 --> 00:07:17,260 But there's definitely an to be a front end to component to it as well as what is going to be easy I'm 110 00:07:17,260 --> 00:07:23,490 going to say add in the ability for users to be able to delete surveys that they have created. 111 00:07:23,590 --> 00:07:29,410 And so this goes back to traditional crud applications or crud routes like create read update and stroy 112 00:07:29,860 --> 00:07:34,660 at this point we really just have create and read obviously would be kind of nice to be able to give 113 00:07:34,660 --> 00:07:39,980 our users the ability to delete surveys after they've created them next. 114 00:07:40,000 --> 00:07:43,030 This is a feature for both the front end and the back end. 115 00:07:43,270 --> 00:07:49,870 So maybe allow users to specify the From field on survey emails. 116 00:07:49,900 --> 00:07:56,800 You'll recall that right now whenever we receive an e-mail inside of our inbox right here the email 117 00:07:56,800 --> 00:08:01,830 is always marked as being from no reply at e-mail dot dotcom. 118 00:08:01,870 --> 00:08:04,770 Now this field right here is a 100 percent customizable. 119 00:08:04,780 --> 00:08:11,410 When we create the actual email and you recall that we specified that inside of our mailer inside of 120 00:08:11,410 --> 00:08:12,740 our services directory. 121 00:08:12,910 --> 00:08:20,680 So our services mailer J us and inside of here we specified from email and we passed in the string of 122 00:08:20,950 --> 00:08:23,980 no reply at email a dot com. 123 00:08:23,980 --> 00:08:26,890 Now that's not something that's super ideal like. 124 00:08:26,920 --> 00:08:33,300 In reality it might be nice to allow these people who are creating surveys to dynamically specify where 125 00:08:33,310 --> 00:08:35,260 responses should be sent to. 126 00:08:35,470 --> 00:08:40,840 Because if you know it's great to have these yes and no buttons but chances are that our users would 127 00:08:40,870 --> 00:08:44,900 also want the ability to capture text input from their users as well. 128 00:08:45,130 --> 00:08:50,140 So maybe we would want to make sure that they could you know write in some response here and then send 129 00:08:50,140 --> 00:08:53,440 it to some actual email that the customer gave to us. 130 00:08:53,500 --> 00:08:58,150 And so this would definitely be something that would be a little bit of work on both the front end and 131 00:08:58,150 --> 00:08:59,570 the back end of the application. 132 00:08:59,650 --> 00:09:05,920 So essentially we would want to make sure that the survey creation forum had a spot to add in the From 133 00:09:06,400 --> 00:09:12,040 address we would want to make sure that that from address was stored in our survey model and we would 134 00:09:12,040 --> 00:09:18,780 want to make sure that we use that from address whenever we put that mailer together. 135 00:09:18,820 --> 00:09:20,910 Now the next one is specifically on the front end. 136 00:09:20,960 --> 00:09:22,700 This is around medium difficulty. 137 00:09:22,750 --> 00:09:28,030 And so this is a little bit more on kind of a classic react and redux side of things basically allow 138 00:09:28,030 --> 00:09:30,880 client side sorting of surveys. 139 00:09:30,880 --> 00:09:36,520 So we just said hey let's kind of flip the order of all these surveys and make sure that the newest 140 00:09:36,520 --> 00:09:42,430 ones show up on top and be kind of nice to have maybe a C or series of buttons up here that allows the 141 00:09:42,430 --> 00:09:49,720 user to sort the surveys by the date they were sent the date that someone last answer to it or maybe 142 00:09:49,720 --> 00:09:52,170 the number of total votes or something like that. 143 00:09:52,210 --> 00:09:57,070 You know that kind of feature would definitely be probably very well appreciated by our users. 144 00:09:57,070 --> 00:10:04,800 And then finally misses the mega one says front and back end and it is very much very hard. 145 00:10:05,110 --> 00:10:10,500 So I had originally wanted to put this feature into our application but I'll tell you it probably would 146 00:10:10,500 --> 00:10:15,870 have added at least like five hours worth of video to do all this stuff and so at the end the day I 147 00:10:15,870 --> 00:10:20,470 decided you know it's just a little bit too much we could have done that. 148 00:10:20,600 --> 00:10:23,680 But if we did it we would have had to drop some other features. 149 00:10:23,690 --> 00:10:25,910 So it's kind of a tradeoff here. 150 00:10:26,180 --> 00:10:30,620 So this feature that we were going to do in this course what we eventually kind of dropped out was to 151 00:10:30,620 --> 00:10:34,790 allow users to create surveys in draft mode. 152 00:10:34,880 --> 00:10:40,220 So I want you to imagine for a second that you are using our application and you go to create a new 153 00:10:40,220 --> 00:10:43,390 survey and you start you know filling this thing out. 154 00:10:43,730 --> 00:10:49,250 And you've now put a lot of work into your campaign title your subject line and your email body right 155 00:10:49,250 --> 00:10:49,820 here. 156 00:10:49,940 --> 00:10:53,240 But maybe you decide you know what it's the end of the day. 157 00:10:53,390 --> 00:10:55,000 I don't want to do my recipient list. 158 00:10:55,010 --> 00:10:56,150 I want to figure this out. 159 00:10:56,150 --> 00:11:01,220 At some point in the future but you might not want to lose all of the effort that you've put into all 160 00:11:01,220 --> 00:11:02,630 these fields over here. 161 00:11:02,750 --> 00:11:08,690 And so this feature suggestion would be to allow a user to create this survey in draft mode or in other 162 00:11:08,690 --> 00:11:14,840 words kind of like have a button here that says Save and attempt to like send this thing out later like 163 00:11:14,840 --> 00:11:16,440 don't send the e-mail right away. 164 00:11:16,460 --> 00:11:18,440 Just save a draft of it right now. 165 00:11:18,680 --> 00:11:25,070 We will allow the user to come back later entering the recipient list here and then click next and actually 166 00:11:25,070 --> 00:11:26,540 send out the survey. 167 00:11:26,540 --> 00:11:32,420 So in other words give our users the ability to create a survey without e-mailing it and then come back 168 00:11:32,420 --> 00:11:38,420 later on and edit the survey make changes and then eventually send it out and email it off to all these 169 00:11:38,420 --> 00:11:40,010 different people. 170 00:11:40,010 --> 00:11:42,810 So again this would have been you know it's very hard. 171 00:11:42,830 --> 00:11:47,300 I would definitely classify this as hard because you're going to do a lot of kind of digging on your 172 00:11:47,300 --> 00:11:48,830 side to figure out how to approach this. 173 00:11:48,830 --> 00:11:53,420 But I want to throw it out there is a possibility of something that you could probably expand inside 174 00:11:53,420 --> 00:11:57,620 the application to add on and give yourself that added functionality. 175 00:11:58,170 --> 00:11:58,510 OK. 176 00:11:58,550 --> 00:12:01,160 So again just a couple of high level suggestions. 177 00:12:01,160 --> 00:12:02,690 You know this is not an exhaustive list. 178 00:12:02,690 --> 00:12:08,190 I just wanted to give you a couple of ideas on how you might continue to work on this application. 179 00:12:08,570 --> 00:12:12,540 So at this point I think that we're pretty much wrapped up with the application. 180 00:12:12,710 --> 00:12:14,210 So that's pretty much it. 181 00:12:14,210 --> 00:12:16,250 I hope you enjoyed putting this thing together. 182 00:12:16,250 --> 00:12:19,260 It was a lot of fun to do a lot of fun to put together. 183 00:12:19,310 --> 00:12:21,620 I hope I didn't repeat myself too often through the course. 184 00:12:21,650 --> 00:12:22,900 You know I apologize when I do that. 185 00:12:22,910 --> 00:12:27,620 But you got to keep in mind that when you're listening to someone talk about something for so long you 186 00:12:27,620 --> 00:12:30,930 kind of sometimes need that repetition to remember things. 187 00:12:31,130 --> 00:12:33,090 But hey I'm not going to excuse. 188 00:12:33,170 --> 00:12:34,040 I don't want to make excuses. 189 00:12:34,040 --> 00:12:34,720 At the very end here. 190 00:12:34,730 --> 00:12:36,260 So I hope you enjoy the course. 191 00:12:36,290 --> 00:12:41,150 I hope you enjoyed the OP and I hope to see you in another course at some point in the future as well. 192 00:12:41,150 --> 00:12:42,850 So I'll catch you later.