Creating an MVP: A Step-by-Step Guide to Building a Minimal Viable Product

When it comes to building a mobile app, one of the most important things to consider is creating a minimal viable product (MVP). An MVP is a basic version of your app that allows you to test and validate your ideas with users before investing time and resources into more advanced features. In this article, we'll walk through the process of creating an MVP for iOS using Swift and React Native.

First, let's create a new project in Xcode and set up our MVP structure. We'll start by creating a new object to represent a post. This will include fields such as title, description, image, and ID. To generate a unique ID for each post, we can use the `uuid` method v1.

Now that we have our object defined, let's create a new view to display the posts. We'll call this view `PostList`. In this view, we'll use a table view to display all the posts. When the user taps on a post, we'll navigate to a new view called `PostDetail`.

Next, let's add functionality to create and save new posts. To do this, we'll create a new resource query that allows us to interact with our database. We'll use the Amazon S3 API to store our images.

To set up the S3 API, we need to create an AWS account and set up our bucket. We'll call our bucket `retool-bucket` and make sure it's public so that users can upload images. We'll then add a new user called "Any" with admin access to the bucket.

Now that we have our S3 bucket set up, let's create an uploader view in our app. This will allow users to select an image from their device or upload one from the internet. When they click the upload button, we'll save the image to our S3 bucket and use it to display on our post.

To complete the MVP, we need to add event handling functionality. We'll create a new method called `trigger` that will be triggered when the user clicks the "Post" button. This method will save the post to our database and then navigate to the `PostDetail` view.

Here is an example of what this might look like in code:

```swift

// Post.swift

import Foundation

struct Post: Identifiable {

let id = UUID()

var title: String

var description: String

var image: URL

}

```

```swift

// PostList.swift

import UIKit

class PostList: UITableViewController {

override func viewDidLoad() {

super.viewDidLoad()

// Load posts from database and display in table view

loadPosts { [weak self] posts in

self?.tableView.reloadData()

}

}

@IBAction func postButtonTapped(_ sender: UIButton) {

// Trigger event handling function to save post to database

trigger(post)

}

private func trigger(_ post: Post) {

// Save post to database and navigate to PostDetail view

savePost(post) { [weak self] _ in

if let nextVC = self?.nextViewController() {

self?.present(nextVC, animated: true)

}

}

}

}

```

```swift

// PostDetail.swift

import UIKit

class PostDetail: UIViewController {

override func viewDidLoad() {

super.viewDidLoad()

// Display image in view

displayImage(imageURL: post.image)

}

private func displayImage(imageURL: URL) {

// Use React Native to display image

ImageView(url: imageURL).renderInView(self)

}

}

```

By following these steps and using the provided code, you can create a fully functional MVP for your iOS app. Remember to test your app thoroughly with real users to validate your ideas and ensure that your MVP is meeting the needs of your target audience.

"WEBVTTKind: captionsLanguage: enhello everyone here on freecodecamp looking to build a successful mvp and avoid making major mistakes when developing an app or online product my name is annie okuber and i'm a software engineer and course creator on youtube who has also taken part in fintech incubators such as barclays techstars for early stage financial apps i am here to show you why building an mvp or minimal viable product is a proven way forward when building out apps today so why is an mvp important and how can the lack of one lead to demise of your dream startup here is an example of a failure of an app with 41 million dollars in funding back in 2012. the failure of the colors app could be put down to a few things but its premature huge launch without testing the product with an mvp is considered to be the main culprit the media attention from the 41 us dollar million funding guarded quite a lot of people waiting to download the app but once they did most of them quickly ended up using it and deleting it never to return again co-founders of colors admitted that they put out a product that they thought was good to a massive crowd who ultimately ended up disagreeing having an mvp that could be slowly tested and adapted before such a big launch could have saved this company but what exactly is it mvp we will find out soon enough by the end of this course you will know the steps necessary to develop your minimal viable product and have an understanding of the mistakes startup make in order to avoid them yourself and have a fully working mvp that you can adapt for your own use cases thanks to this one hour tutorial if you ever need to skip to one of the sections make sure to use the timestamps in the description below otherwise let's get going this course is made possible thanks to a charitable grant made from retool the powerful app building platform low-code solution for creating react-like apps companies like brex played ram amazon nbc use retool for their internal tools and many startups use it to build a variety of mvps now why is an mvp useful to me mvp stands for minimal viable product it's when startup to release the most minimal core product to get things going in terms of testing and developing here are four reasons why mvps are essential to building modern apps number one an mvp allows you to collect data and feedback from your customer base number two it also allows you to iterate on what you have before release building products is an iteration game the product is forever changing meaning that you want to choose an approach where changes can be made quickly and without too many stakeholders involved this is where having a small team and very flexible and relatively inexpensive tooling at the beginning can be very beneficial and another great reason to have an mvp is to reduce overall development time and finally a big one for tech startups is pc funding you might have a great startup idea in your head but how do you know it's a great idea you can't show people the idea in your head let alone test it out to get feedback and guess what without that feedback and general data collection you aren't likely to get any investors knocking on your door so you look into hiring a dev team but uh oh that's expensive and you have no money as no one will invest you're stuck in a chicken and egg situation building an mvp will allow you to spin up apps or software as fast so you can get to testing and potentially gaining revenue to show investors straight away so we have covered what mvp is and why you might want to make one but are you ready to start your entrepreneurial journey quite yet to show you how fast this can be done on your own without having any help and spending a bomb we will be building out an mvp that callers should have built in the first place okay to build it we will be using retool note that retool is a platform intended for building powerful applications but we are here using it to build a very simple app to get you started you can learn more about retool on their website in the documentation or watch one of my previous videos where we built out a couple of more complex applications okay so what are we waiting for by the end you will have this app that will allow you to view all your posts along with who posted them and who viewed them and if we click into one you'll be able to view the whole thing as well as delete it and upload posts too okay so we're gonna be using a lot of apis for this and we're also gonna have this messaging system that allow you to message users in your database okay so ta-da there we go we are messaging in the app as well right so let's do it okay so let's do it let's start off on the retool platform so it is uh free to sign up just go ahead and select strive for free i'm gonna sign in though because i already have an account with free code camp so that's what i'm gonna do as i've used this many many times before so here we go this is what the dashboard should look like as you'll see here there's some previous uh projects that i have made let's start from scratch though i'm just gonna create new and i'm gonna create an app so let's go ahead and call this something i'm gonna call this colors app okay because we are making a mvp of what i think the colors app should have launched with to get going so there we go okay so here was what the app should look like to you and me it's got some boilerplate table with some boilerplate code as well as all the tabs kind of um popped up so that we can see them however we can minimize them if we wish so just like that and perhaps we should because the first thing that i'm going to do is just set everything out in the ui before we start connecting our database to mongodb before we start connecting to aws and all that so let's go ahead and do it so as you can see a table has been populated for us with some uh just some dummy data we're not gonna be needing this so i'm just gonna go ahead and click delete on this great now the first thing that we're going to do is put in a tabbed container so i'm just going to drag in a tabbed container and this is going to essentially kind of symbolize our app itself so here we go here is our app and in here well we can actually do a bunch of personalization so for example first off i can decide that i want the um well we can have transitions to slide in from one to the other just like so from view one to view two to view three and then of course we can rename these views so i'm actually gonna do that i'm gonna choose to call this my feed so like the apps feed i'm gonna choose to call this my timeline to see a timeline of all the pictures that i have posted me personally i'm also going to have a tab to upload an image from the app of course we need to do that as an app we want to be able to upload our own photos i'm also going to have an inbox okay an inbox so that we can see messages and also message other people from the app itself and i'm also going to have another one called view this is going to be a secret one where we can actually view an individual post itself okay so this one is going to be hidden so i'm going to write hidden true and that will just mean that we can't see it here although it does exist and we can navigate through it by clicking different things so there we go that is step one of my tabbed container we can of course do many many other things for example if i want this to be at the bottom well all i have to do is select the element and then just scroll down to all the other options that we have available for example i can choose to uh change the color of the footer so i can choose to have this this kind of dark gray color just like so and of course this means that we need to show the footer so just show the footer like this i am actually going to drag these tabs down into the footer itself so that they are in the middle and i'm just going to make the alignment center just like so okay and maybe let's make this a little bit bigger so we can see okay so great one other thing we can do that is kind of cool is actually add little images to this as well so for example on my feed i can actually choose to have an icon which i am definitely going to do i'm going to search for the icon so i'm going to have a little home icon perhaps let's go ahead and choose this one i think it's quite cool and position it to the left let's go ahead and also do one for the timeline so let's search for something to do with time and this is a timeline so let's choose this one for upload i'm of course going to choose something to do with uh maybe camera just so people know that this is for uploading photos and for inbox this one is easy let's just choose an inbox so there we go so there we have it this is looking wonderful there's a lot more things we can do for example we can choose the hover text maybe let's just make it like a lighter color and the selected text again i'm just going to make this a lighter gray just because i think it's much cooler and much neater whee so there we go we are now sliding through each of these let's carry on one thing we can do as well to make our lives easier is actually rename these if we wish if you find it easier to do so then please feel free to rename these i'm quite happy with this being tabs one but that option is there for you too now in the header i'd quite like to actually display whatever tab we are on so this is going to be our first piece of i guess retool syntax that you're going to experience first off i'm just going to grab some text and just put it in here like so making sure that it is in the middle so let's just get rid of any of this and make sure it's aligned in the center so i'm going to choose to make this an h3 tag so we can use html elements in here and then i'm going to use these two double curly braces so this is some retool syntax in order to get tabs one so this tabs one that we were just on and tabs one comes with a variety of things so if you click the dot they will pop up we want to get the selected label okay so this just means if i click on one of these this text will change dynamically based off what we have written here so once again just pick out the element or pick out the component in this case it was tabs one you can hover over it if you need just to get the name and then a variety of options should show up if you press a dot and we have just gone for the selected label so this is looking wonderful let's carry on now i'm just going to put in some more text here i am actually going to hard code this just to be my name just because you know for now i think that's fine so i'm just going to do that here so ania kubo is the user of this and we can of course align this to the right if we wish and center it this way too and on the left once again i am going to put in an image there's two ways you can do this you can just use a circular image so if i just show you a circular image looks like this and we can you know resize it to whatever size we want or if we are very particular about the size we can actually write our own html so i'm going to do that for this option just to show you the difference so here it's just exactly the same as you would do in normal html i'm going to write an image tag and for my image well the alternative text for this is going to be avatar of user and then the source of this is just going to be i'm just going to use an image of me from the internet again i'm just hard coding this because we don't have any data to work with quite just yet so here we have an image from me i'm going to copy the image address from the free code camp website so there we have an image of me and now i can actually pick this out so maybe let's give this the class of avatar just like so and then this means i can now grab the class of avatar and give this a height of 20 pixels maybe let's make it 25 pixels a width of 25 pixels a border radius of 50 and then maybe let's give it some margin left 5 pixels and margin top two pixels okay so there we go i've just made a custom html element i'm just gonna drag it in like so making sure to select the blue writing and great and perhaps let's actually rename this i'm going to rename this to avatar image for us to pick out if we need now the next thing i want to do is actually populate our feed with some posts so to do this we're actually going to start working with resources and we have many to our disposal if we look here in the resources you will see all the ways that we can connect so if i go ahead and create a new resource we can use all of these databases we can use all of these apis and we can use a rest api in order to connect to whatever api we really wish that uses rest so there we have it we are going to use mongodb for no other reason that i had to choose the database so i'm going to go ahead and do that so if you haven't used mongodb already please do go ahead and sign up once again we are gonna be using the free version of it so go ahead and start for free i'm just gonna sign on with google because i've already used mongodb a few times before so here is my dashboard once you do fill out all the things necessary in order to get to here this is what you should see so under my organization you will see the projects that i have made so far so just make sure you're at forward slash projects so i'm just going to go ahead and create a new project my project name is going to be retool and i'm just going to click next okay i am going to be the project owner so let's go ahead and create a project just like so and wait for that to do its thing so now that we have our project called retool let's go ahead and build a database i'm going to choose the free shed option so please go ahead and choose that one too and i'm just going to go with the suggested region for me and just click create cluster okay so our cluster is being made that is doing its thing we're gonna have to fill out some more things first so i'm just gonna select a username and i'm going to auto generate a secure password and copy it and save it somewhere safe because we are going to be needing that later don't forget to also press create user now i'm just going to go down here and we are also going to add our current ip address so just go ahead and add your current ip address this just means that you will be able to access the database from your current ip address and we're also going to add some retool ones in later as well so that our platform has access to the database too so once you have done that let's just go ahead and click finish and close okay and go to databases so now this is doing its thing and what it has finished we will be able to connect our database and then also create our first collection and great so the first thing that we're going to do is actually add something to our collections we're going to have two collections we're going to have a post collection and a message collection so let's go ahead and add our own data i'm just going to call this tests and the collection name is going to be posts okay so please just go ahead and do that now before we do anything else i'm just going to connect this to our retool so let's go back to the overview and then connect and then we're going to connect our application and just take this url right here and i go back to the connector resource page that we just started now what should we call this well let's just call this colors and then use the database string and just paste that in like so and the password that i ask you to save just go ahead and replace that here so we've got the username and the password we're also going to have to allow these ip addresses as well as our own so back in here under network access please go and add those three ip addresses of retools so just go ahead and put in one put in the second one so just like so and then finally the third one as well okay so just add in those three ip addresses like so and that's it and wait for them to be active okay so back in here we have the connection string we've replaced the password with our password this is looking good and once those have been accepted and they are active we will test our connection okay so just wait for that to be done and great so now if we test our connection we should see connection successful so that is looking good let's go ahead and create our resource and then go back to the resources page so we've created our resource now let's go ahead and go back in here so back to the retool project browser collections and i'm going to show you how to create a first post i'm just going to go ahead and insert document i'm going to choose to write it in json as i feel more comfortable with this and how do we want our post to look so our post as an object well it's going to have an image url okay and it's also going to have a description so description of the post itself so we can have my favorite thai spot for example we're gonna have the author so in this case it's going to be anya kubo which is of course me we'll have the views of this post i'm just going to say that the views are 20 we're also going to have an author avatar which is just going to be an image of me and then we're also going to have a title so a title of this is going to be thai dreaming favor rit spelt the english way and then we're also going to have a time stamp which is going to be iso 8601 timestamp so that we can essentially order these posts by uh you know most recent on the so on and then of course we're also going to have an id that's going to be our unique id for now i'm just going to give this one which is separate to the object id so now let's fill this out i'm just going to be using images off the internet for now again we are going to be using aws s3 buckets to store our images but you know we want to see some stuff now so i'm just going to do this please be aware though that if these images go off the internet then you will not be able to see them anymore because we have no control over them so i'm just going to paste an image that i found on the internet of thailand and i'm also going to just paste an image of myself of the free code camp website okay so this is it i'm just going to insert that like so so at the moment we just have one post i'm just going to duplicate this and just create another so this one's going to be from john woo he's got 121 views this is going to be london pub love idea of this is going to be two and then the timestamp well let's actually give this description my usual spot in london and then let's get an image of a london pub just put it in like so and then put in an avatar and get today's date in iso 8601 format okay so that's today let's make this actually yesterday and insert and i'm just going to add the timestamp to here as well so let's edit this and put in today's timestamp okay so we've got two posts here at the moment just like so i'm gonna now retrieve these from the app so to do this i'm going to just get a resource so let's just get this down here i'm going to make a new resource query this resource query is going to be to colors posts and save and run and great you will even see a schema pop up so now if i type in the collection post or select it from a drop down and just click run you will see my two posts okay you're seeing literally these two posts right here wonderful so this is looking great so now that we have to date that data let's get to using it in order to populate our feed with a list so let's get going so to do this i'm going to find a list view and just drag it in here like so it's going to get rid of this for now get rid of the bottom one too and let's create our list so the number of rows well we're going to get our curly braces again and use the get post data length in order to essentially make as many rows as we need in this case it's going to be two as our post consists of two posts made up of the data that we have okay so an array of those two things now i'm just going to put in a container so our first item is going to be a container and you will see how the list will just automatically create two of those because we have two items in our list it's created two containers so all i'm going to do is just make this look a little bit different i'm going to show a footer i'm not going to show a header and i'm going to also put in an icon so let's search for an icon and just drag it in here like so and then this is going to be an i because this is going to symbolize how many views we have so there we go and i'm just going to align it to the right let's also put in some text so that we can actually see how many views that we are getting on this visually thanks to our data so i'm just going to put in some text and we can now access the data by going into get posts data and then looping with an i okay so we're just going to loop and then retrieve back the views for those of you familiar with javascript this should be familiar this eye to syntax should be familiar that is how you loop over everything from the get posts data array in order to get the values from the object we are looking looping over so once again i'm just going to align that to the right next i'm also going to put in the author okay so again i'm just going to drag in some text just like so and i'm going to go into the get post data i'm going to loop over each item and get the author in order to display who exactly posted this image and for the image itself well i actually want to put in some custom html so once again i'm just going to go into the html just like so and drag it and drop it in here and in here well what do i want i want a div that is going to be a media container so let's just go ahead and write our div and give it the class of media container just like so and that's going to hold so once again i'm just going to put in a div and the class to this is going to be image container so let's give this the class of image container and this is actually going to hold our image which is a self-closing tag and the source of this well we're going to actually use our two curly braces in order to go into the get post data we're going to loop over each item and get the image url okay so that's what i'm going to do and then i'm also going to make a new div that's going to be our text container so here is a div i'm going to give this the class of text container like so i'm just going to put in a p tag this is going to hold the title so once again we're going to get post data when i loop and just get the title okay so there we go we're having some issues with the thai dreaming image i wonder why that is but we'll look into that in a bit so now in the css let's actually pick out everything that we have to style which is going to be the media container for one and the media container well i just want to hard code everything so they all have a height of 200 pixels and then also we're going to have the image container like so and the image container is also going to have a height of 200 pixels and then also a width of 100 i'm gonna have overflow as hidden so just like that perhaps we can make it smaller if we wish i'm quite happy with this if you want to make it smaller and please feel free to do so great and i'm also going to say that the any image that lives inside the media container is going to have a width of 100 to make sure that any image is you know stretched out to the width and then position relative and just center it so that means from the bottom i just want it to be 50 and one last thing let's get the text container and let's give it some padding so i'm going to go with 5 pixels from the top 15 pixels from the side and then 8 pixels and then also 15 pixels okay and then also i'm going to give it a background color and that background color is gonna be a little bit transparent so i'm gonna go with zero zero zero zero point five the text well the text i'm actually going to give it white so there we go so we can read it let's also give this position relative and let's give it some bottom and let's also move it a little bit like so okay so that's what it should look like just ignore that one for now so it's kind of like an overlay with the title like so and also maybe let's start any p tags that live inside the media container so any p tags that live inside here so we don't want to affect any other p tags and have the font size of 20 pixels great so that is looking wonderful we've just created our custom html element which is going to be this image this is looking great so perhaps let's fix this image problem let's go back in here and see what is happening obviously just doesn't really like this url let's see why i'm not sure but let's find another image of thailand i'm just gonna go with this one right here copy image and let's just replace it like so an update and great so that is looking so much better make sure this says overflow make sure this says image container okay perhaps we don't need that this is looking great okay so there we have our two posts of course we can add more we'll do that in a bit what i want is to actually add a trigger if we click on this it will take us to the display of the image itself just by itself so let's go ahead and do that what i want to do is add an interaction and that's going to be on click and it's going to control a component that component is going to be the tabbed container and i'm going to set the view to be view which is if you remember one of the tabs that is hidden so that's what i want to happen and when that happens i actually want to write another query to get an individual post so at the moment if i click this it will just go to the view page i now want to write another query so let's go ahead and do that i'm going to write another query this query is just going to be get individual posts so get post and i'm going to go into the colors resource and what i'm going to do is look in the collection called posts so posts and i'm going to use find one this time because i want to find one post based on an id so the query i'm going to have to write is id and then i'm going to choose the post i clicked on to get posts again data and whatever i looped id okay so that's all i am essentially going to do i'm going to preview that just to see what comes back and once again let's go to the feed it's going to save and run this and if i click on this that should get me whatever post i clicked on id okay so that is what should be happening right now if i click on this so all i'm going to do is create an image drag it in here like so and the source of this well it's not going to be this cute kitten even though that would be quite nice i'm going to get posts data this time just the individual post data not post data image url okay so let's try this again okay so this just means if we click on here as long with going to the view we also need to control a query and that is the get post query so that is looking good let's go ahead and trigger the click now so i'm just going to get rid of this click on here trigger the click and great so we are getting that individual post right now we're essentially running the get post query another thing we can do of course is add more stuff to this so let's create i'm going to maybe put in the author name again at the bottom so just drag in my name right here and then get rid of this and get post data individual author okay so i'm just putting my name right here and then we can also put in a button to delete it and this will run the delete query for the post so there's something that we can also do so let's go ahead and do that why not so to do this well we're going to have to write a another query so let's go ahead and get these two tabs up i'm going to a new query so resource query and this time this is going to be to delete post okay so that is what our query is going to do and the collection for this is going to be posts the action type is going to be delete one and we're essentially going to look for the id of this post so this post is get post data id okay and if we preview this okay the result says that this should work if i save this now we need to now connect the button to that query so let's go ahead and maybe say this is delete i'm also going to make it red just because i think that red is much more associated with deleting things so on click of this now event handler on click control query delete post okay so that's what i want to do we can also do it that on success so on success of this post so here we go on success we can also be taken back to the home page so control the component we want the tabbed container and the view we want to set is the feed so that is also something that we can do so should we go ahead and delete this post of course it will mean that we won't have much data to work with but you know let's let's just go ahead and do it in fact i'm just going to perhaps uh copy this so that we can just reinsert it back in as soon as we do it so copy that and let's check it out so back to the feed i'm going to click on this so let's trigger the click okay we're viewing the image on the view page and let's go ahead and now click delete so that will trigger the delete post and it takes us back to the home page however this is still here so perhaps we need to get all the posts again because if we refresh this okay so that is correct so once again that's fine we can open this up and on the delete post query so on success we want to go back to this we want to go back to the feed but we also want to rerun the query that will get all the posts right so we want the freshest posts so that is what we're going to do so let's try that one more time i'm just going to reinsert the document that we just deleted so insert that to refresh this i'm going to hide that so now we should see two posts let's once again just trigger the click for this so trigger click so we view the whole image now and then i want to delete the whole image so then it should be deleted it should take us back here and we get the freshest posts wonderful so this is looking good once again i'm just going to reinsert that in so that we have more data to work with great so this is all looking good so we've done the feed next we want to show the timeline of just our posts so what i'm going to do is actually make a new query so resource query and let's call this get your posts okay and once again we're going to look in the colors resource we're going to look in the collection called posts and this time we're going to find but we're also going to write a query for this because the author of this well we just want it to be us right so us is here in text two so we can use the component text two to get its value so text to value is gonna be the username okay so that's just what i'm going to do right here like so so again we can also preview that it's annie akuba so if i preview this here it should just return back one post which is the one post i made the author anyakubo so this is looking good i'm just going to save it and all i'm now going to do in fact we can just copy this right i can copy this list so i'm just going to hide this and just put it in here because it's the exact same thing perhaps you just need to drag it in here it's the same type of view that we want okay so that will have all the same functionality to it and if we click on it we'll be able to see the timeline too okay so that's what we want we just need to now replace the data that's being fed into this with instead of going to get posts we're gonna get go into get your posts data instead okay so that's the length of this and now here we're also going to make sure that we're using the correct queries so get your posts get your posts okay and i believe that should be it are here to get your posts otherwise we're using a different query for this get your posts and that should be it okay so once again here we have our feed it should have everyone in it unless we've deleted something okay so here's our feed of the two items if we go on the timeline we just see all my posts as any kubo and if we click on this posts or trigger the click it should be taken to the view of the post however it would seem that if we're on our timeline the trigger will also need to be changed get post trigger this is going to have to be another query so let's write another query so you get your post so we've got our individual post we're also going to write a resource called get your post individual get your post okay and once again it's going to look in colors it's going to find one this time and we're going to look in it so i'm just going to save this because we're going to essentially just copy this what we did for the individual post forget your post individual but instead of getting the posts we're gonna get your posts plural id that we clicked and save and run which means that if we're now on the timeline the trigger that we want to hit is get your post and not get post okay so hopefully that makes sense let's check it out i trigger this it should go to here and now we can use get your post individual to render this and also get your post individual to render this and on the delete make sure that is saved to the collection posts and on the delete once again we're going to have to write a new query so make sure this is delete your post like so and once again we're going to look in the collection posts we're going to delete one and what do we want to delete well we want to get the id of your post that you are viewing and on success we want to control the component we want to control the component tabbed container set the current view to feed and then also on success we want to rerun the query to get all the posts great so this is all looking wonderful so once again let's go on our timeline let's trigger the click and we are indeed getting the correct post so this is all looking wonderful so now that we've done that let's carry on so we've got the feed we've got the timeline we'll work on the upload next i just want to work on the messages so for this we're actually going to make a new collection so let's go ahead and go back in here and just create a new collection that this time is going to be called messages just like so and click create now what are our messages going to look like well our messages are each going to have again a time stamp as we're going to want to filter out you know the order on which the are coming in so timestamp is going to be necessary we're also going to have a from so for example this is gonna be from anya kubo and it's gonna have a two and the two is gonna be to john woo john woo and of course we're gonna have the message itself i'm not very imaginative so apparently i just text john woo hey there because you know i lack any sort of imagination so that is my message and of course we need a time stamp so i'm just gonna stick that one in of today and now and just click insert okay so that's what our message is are going to look like i'm just going to duplicate this one and make this one perhaps maybe five minutes in the future this time from john woo to anya kubo going hey because again this is a really bad chat so there we go okay we have two messages in uh i guess chronological order now let's get to getting these messages and showing them based on the user that we click so this is gonna be quite cool let's do it so this is going to involve some more list views so i'm going to get a list view and on the left i'm just going to show my users that are available to me at the moment it's just going to be me and john wu and then we will have another list this time of the messages themselves so another list view just over here to display the messages okay great and finally i'm gonna have a form because the form is going to submit the message that we type so i'm just gonna work that in here just like so i'm gonna get rid of the header i'm going to keep the body and then i'm just going to have a text area as well so let's put in a text area like this and perhaps let's change the label to type your message here and then the value is going to be enter your message okay and then this can be submit sure why not so there we go so first things first we're going to have to write a query to get unique users okay because at the moment we're going to use the posts the filter out all the unique users so for this we are going to have to um in fact let's not write a query let's write a javascript transformer to do this so i'm going to say this is unique or get unique users and what we're going to do is so the data that we're going to be working with is the get posts data i want to get all the posts every single one and of course at the moment we only have two posts by two users but when we add another post from myself i'll show you that this is working so let's define unique users or unique authors to be more precise and i'm going to use object of values to get the value of the data i'm going to reduce the array of posts with the post itself and if there is no array of posts post author make sure that is spelled exactly the same way then array of posts post author it's going to be the post and then we're going to return the array of posts okay so that is how you'll get all the unique authors oops so essentially what you're doing is looking in the array and you're filtering out all the object based by the author and just returning the unique authors okay so that's what i am doing here so let's save that so now this just means that on here so first off i'm gonna get the so get unique uses value and get its length next i'm just going to drag in some text like so and instead of this i'm going to let's just make this a p tag and i'm going to go into get unique users value first one and get the author name oops make sure to add the object okay make sure to add that that's important and make sure that this was in the right space too okay so great so we are mapping out the names on to text elements we can also get the user's avatars so i'm just going to use the circular image for this just drag it in like so just make it small and drag that back in here so once again we're going to go into the get unique users value and loop over each one to get the avatar image so author avatar and great so we have our users here the next thing that i want to happen is i want to trigger a click so if we click on so perhaps p we should put this in a container just so that it's very obvious if we click on a user so there we go i'm just going to get rid of the styling of this so i'm gonna get rid of the header and then just make this a little bit bigger and i'm just going to also get rid of the border because i don't really want a border on these i just want them to be kind of transparent okay great so now let's trigger a click so what do we want to happen well if i click on here i want to see all the messages between any and anya so that will be null that will just be me so if i click on john will i want to see all the messages between me the user and john woo so let's go ahead and do that i'm going to essentially write a event handler for this but first off we're going to have to write some you guessed it more queries so the query i'm going to write this time is get messages to user i'm going to look in the colors resource the collection we're going to look in this time is messages and we're going to find anything that has from and then the messenger user so from john essentially so i'm just going to hard code john wu in here for now and then to me so the user which is text to value so i'm just going to use that instead of hard coding it okay so great so that is the query i want to run let's see what that returns back that should just return one message back that is correct so that is our get messages to user query let's write another query making sure to save that one and this time it's going to be get messages from user user being me okay and this time we're going to get the resource query colors look in the collection messages and this time from is going to be me so that is text to value and 2 is going to be john which i'm hard coding at the moment but this won't be hard coded for long so that is a way to get messages from and to each other and i want to get both of them and then sort them by a chronological order so once again i'm going to use a javascript transformer to do this and this is going to be get all messages okay so for this i'm going to define all messages and all messages is essentially just going to be get messages from user data and i'm just going to concat it with get messages to use the data okay so that's all i've done and now we're going to filter them by timestamp so cons descending messages and i'm going to get all messages i'm going to use the javascript method of sort to essentially sort them by the time stamp so a time stamp so the first items timestamp we're sorting one after the other we're going to use locale compare b time stamp okay and then we're just going to return back the descending messages so let's preview that or message is not defined making sure to spell everything correctly of course return to sending messages okay so there we go the messages are in descending order as soon as we add more we will see that okay so let's save that and that will run that transformer will run this is looking good okay so on trigger of this so if we click this container we're going to have to add an event handler and that is to essentially get messages from user that's correct but also get messages to user okay so that's what i'm doing i'm essentially rerunning those queries and by rerunning them it will trigger this transformer to do its thing as well one other thing i want to do is actually set some temporary state so i'm going to show you how to do that we can set temporary state because i want to save the user that i have clicked on so i'm going to save this as send messenger user and the initial value for this is just going to be null however i want to set this value so i'm going to set on click i'm going to set temporary state the state is gonna be messenger user and the value of this i wanna set to get unique user value i author okay so whatever i clicked on here i want to save it to state of messenger user okay and i'm doing this for a reason i'm going to show you right now so first off actually let's map out the messages onto here right so let's actually do this in containers i'm gonna drop in a container and then i'm not gonna have a header so let's get rid of the header and then in here i'm just going to drag in lots of text really so this will say the name of who this is from i'm also going to have the actual message itself of course so actually let's also have the date before we do anything else we've got a name and a date perhaps let's move the date up here and then i'm just going to make this a little bit thinner we're going to drag in some more text here and we are now going to actually get our messages so we're going to get all messages value i'm going to loop to get the time stamp okay so that's what we're doing however also going to wrap this in a new date object because we want to change this to a more readable format so we do this with two locale string and call it making sure that this is all in curly braces too okay wonderful and this does not need to be curly braces any more okay so that's just uh a more readable format i think uh local date string let's do let's not do the time great and then also the name we need so once again i'm gonna now go into get all messages value i'm gonna loop over everything that comes back and get the from okay and of course we need the message itself so i'm just going to drag that below i'm going to get all messages value i and actually get the message itself okay and then perhaps let's also put in a divider and great so cool so now if we perhaps just click this trigger we should just see messages from anya and john wu and of course if we click on this we should just see messages from anya but to do this of course we just hard coded john woon here right we need to get rid of this so all i'm going to do is now get the state that we saved so that's the messenger user value okay and just save and run that and do the same for here so instead of hard coding john woo messenger user value and save and run it so now if we trigger click i don't know why there's so many of these others because we need to get all messages value length great okay so again if we now click on john woo we'll see all the messages from anya and john woo and if we click on anya we should see nothing great now let's get to actually adding messages okay so that's what i'm going to do next let's get to it so let's go ahead and add a new resource query this is going to be add message singular i'm going to use colors the collection is going to be messages i'm going to insert one so insert one message so what we're going to do is just create the object so the timestamp i'm going to use the new date object in order to get that from i'm going to just use text to value because that's what we've been using which has been using this to is going to be again we're going to get the uh state so the messenger user values whatever we save to state because that's going to be who we are messaging it's whoever we clicked on here right so whoever we're in conversation with and the message well the message is actually going to be whatever the value of the text area is so text area 1 value so that's all it's going to be i'm just going to preview that and save it maybe just format this a little bit nicer so that is it save and then we're going to have to add an event handler for this so on submit control the query add message that sounds good to me and then on success of this right so once this is run on success where we want to essentially get messages from user again right so do that and get messages to users again so we want to rerun those so that it gets all the messages again okay so let's test it out i'm going to click on john wu trigger click so we're on john woo test and click submit so that should run and then we re-get all our messages and that shows up wonderful apart from the text is not really showing up i don't know why text ariel 1 value let's have a look in here let's get our messages test we seem to have got one needs to delete this so the message here uh we've used two s's that's why okay so that's my bad just use one s click save so let's do that again submit you should rerun the messages and ta-da there we have it so i'm just gonna delete this one with the two s's and this is looking good so everything is now working let's carry on so we've done the feed we've done the timeline we've done the inbox where we can message specific people okay and see all their messages and then go hello and literally message them on the app this is looking wonderful okay we can make this also a fixed height so that then we have to scroll if we wish that is totally up to us perhaps that is a good thing especially when we're going to be getting you know more details later so let's make this fix too so those two things are going to be fixed i'm just going to move this up so no matter how many more users we have no matter how many messages this should stay the same and then we could just scroll perhaps we should do that for the feed 2 in fact let's make this fixed and let's make the timeline fixed as well so everything is now fixed great so one last thing to do i want to be able to upload things from the app itself let's do it so for this i'm actually going to have an image preview because i want to see what uh image we have uploaded so we're going to have an image preview like so and then i'm just going to have an image but of course the image won't really show up unless we have something to show in here so what i'm going to do for this is say that we're going to get the s3 uploader so actually let's actually find the s3 uploader component s3 uploader and just put it here under the image and this just means that i can get the s3 uploader last uploaded file url and display it once we have uploaded something and of course i also want a text input to be able to show the title in here too okay so that's all i am going to do and then we can also position the label to be at the top and this is going to be the title of the post and we're also going to have a place to put the description of the post as well of course the author is going to be asked because this is our app so we don't need to worry about that so description and the date is just going to be whatever date that we have okay so there we go this is looking wonderful and next we just need a button that will confirm the post so we can post it to our database as well okay so we're going to be posting it to our mongodb database so let's just say this post and then let's change the color of this i'm just going to change it to be this lovely orange right here great so this is looking good let's carry on so we're going to do the add post query because that is an easy one i'm going to add a resource query let's call this add post and this is going to go into the colors resource it's going to look in the collection posts and it's going to insert one and once again we're just going to have a time stamp which is going to be new date we're gonna have the image url which is going to be the s3 uploader one last uploaded file url i'm gonna have the title which we're literally just going to get the text input one from text input one value same for description we're going to go into the text value 2 so text input to value we're going to get the author which we know by now is text to value author avatar making sure that it's felt exactly the same as in our database and let's just get the avatar image for this so avatar image source views we're going to hard code as zero and the id well i'm just going to generate a unique id using the uuid method v1 and call it okay so that's our object to create a new post let's save it and on success we just want to get the query get all the posts again okay we're going to rerun the post so save that wonderful and once again on success we also want to control the component and go back to the home page so let's get the tabbed container view and go to feed great so those are the two things that will happen on success so the next thing we want to do is of course hook up the s3 loader so let's go ahead and do that so let's make a new resource query this time let's create a new resource and i am going to select amazon s3 let's go ahead and call this amazon s3 and then the bucket name well this is stuff that we're going to have to do in amazon right now so let's do it so let's go to amazon i'm just going to select i am user and click next so of course i have already done all this sign up please go ahead and sign up it is free just make sure to sign up with the correct steps i am doing right now and click sign in once you have done so here is my s3 dashboard this is what you should look like if in doubt just make sure to go to the same urls that i have okay and i'm going to have to create a bucket so i'm going to go ahead and create a bucket here my bucket name is going to be retool bucket just like so and i am just going to uncheck this i acknowledge this and create a bucket okay so there we go there is my bucket let's go ahead and click that now under permissions i'm going to have to put in a bucket policy so i'm just going to edit this and paste in this i've written before making sure to change this to retool bucket one or whatever you call your bucket okay so just go ahead and do that and save the changes one other thing you're going to have to do is change the object ownership so please scroll down and edit the object ownership and simply check this box right here for acl enabled and acknowledge it as well okay and save you're also going to have to enable cause so just go all the way down here click edit and paste in this code just like i am okay so take your time take a break pause this and make sure that it's exactly the same and then click save changes great so this is looking good let's carry on so the s3 bucket name well we know that this is retool bucket one then we're going to go into here under users and add a new user i'm going to call this retool anya i'm going to need an access key i'm gonna add it to admin next review create user okay so here is our secret access key make sure to make a copy of that somewhere and save it and then we're going to go back in here and paste it in here and then we also have the access key id okay and let's just test the connection great and let's create the resource so now when we go to the upload page and select the s3 uploader the resource we're going to choose is ania s3 the bucket name is retool bucket one and this we're gonna have to change to public read and that should be it okay so now let's try upload to s3 so i'm going to upload this image of loften and ta-da there we have the picture now i just want to hook this up properly so that when we post this it gets posted to our database so we're going to have to add an event handler and that is to add posts at a singular post and the method is trigger okay so now when we click the post button this should work let's fill out the fields of the title and the description making the app in full mode and just go ahead and click post and we'll be redirected to the feed and you should see our image here even though we're not seeing the image why is this let's have a look at the code one more time ah we need a space between the end bracket here so just make sure that is there and please apply this to any other images that we have in the app okay and there we have it i hope you've enjoyed this tutorial it was really fun uh showing you how to make an mvp that people can use you know you can actually test it out on people get feedback you know this is a work in progress and this only took us a few hours so i think it's the perfect solution for building mvp products and you know really getting your ideas out there thanks so much again for watching and i will see you again soonhello everyone here on freecodecamp looking to build a successful mvp and avoid making major mistakes when developing an app or online product my name is annie okuber and i'm a software engineer and course creator on youtube who has also taken part in fintech incubators such as barclays techstars for early stage financial apps i am here to show you why building an mvp or minimal viable product is a proven way forward when building out apps today so why is an mvp important and how can the lack of one lead to demise of your dream startup here is an example of a failure of an app with 41 million dollars in funding back in 2012. the failure of the colors app could be put down to a few things but its premature huge launch without testing the product with an mvp is considered to be the main culprit the media attention from the 41 us dollar million funding guarded quite a lot of people waiting to download the app but once they did most of them quickly ended up using it and deleting it never to return again co-founders of colors admitted that they put out a product that they thought was good to a massive crowd who ultimately ended up disagreeing having an mvp that could be slowly tested and adapted before such a big launch could have saved this company but what exactly is it mvp we will find out soon enough by the end of this course you will know the steps necessary to develop your minimal viable product and have an understanding of the mistakes startup make in order to avoid them yourself and have a fully working mvp that you can adapt for your own use cases thanks to this one hour tutorial if you ever need to skip to one of the sections make sure to use the timestamps in the description below otherwise let's get going this course is made possible thanks to a charitable grant made from retool the powerful app building platform low-code solution for creating react-like apps companies like brex played ram amazon nbc use retool for their internal tools and many startups use it to build a variety of mvps now why is an mvp useful to me mvp stands for minimal viable product it's when startup to release the most minimal core product to get things going in terms of testing and developing here are four reasons why mvps are essential to building modern apps number one an mvp allows you to collect data and feedback from your customer base number two it also allows you to iterate on what you have before release building products is an iteration game the product is forever changing meaning that you want to choose an approach where changes can be made quickly and without too many stakeholders involved this is where having a small team and very flexible and relatively inexpensive tooling at the beginning can be very beneficial and another great reason to have an mvp is to reduce overall development time and finally a big one for tech startups is pc funding you might have a great startup idea in your head but how do you know it's a great idea you can't show people the idea in your head let alone test it out to get feedback and guess what without that feedback and general data collection you aren't likely to get any investors knocking on your door so you look into hiring a dev team but uh oh that's expensive and you have no money as no one will invest you're stuck in a chicken and egg situation building an mvp will allow you to spin up apps or software as fast so you can get to testing and potentially gaining revenue to show investors straight away so we have covered what mvp is and why you might want to make one but are you ready to start your entrepreneurial journey quite yet to show you how fast this can be done on your own without having any help and spending a bomb we will be building out an mvp that callers should have built in the first place okay to build it we will be using retool note that retool is a platform intended for building powerful applications but we are here using it to build a very simple app to get you started you can learn more about retool on their website in the documentation or watch one of my previous videos where we built out a couple of more complex applications okay so what are we waiting for by the end you will have this app that will allow you to view all your posts along with who posted them and who viewed them and if we click into one you'll be able to view the whole thing as well as delete it and upload posts too okay so we're gonna be using a lot of apis for this and we're also gonna have this messaging system that allow you to message users in your database okay so ta-da there we go we are messaging in the app as well right so let's do it okay so let's do it let's start off on the retool platform so it is uh free to sign up just go ahead and select strive for free i'm gonna sign in though because i already have an account with free code camp so that's what i'm gonna do as i've used this many many times before so here we go this is what the dashboard should look like as you'll see here there's some previous uh projects that i have made let's start from scratch though i'm just gonna create new and i'm gonna create an app so let's go ahead and call this something i'm gonna call this colors app okay because we are making a mvp of what i think the colors app should have launched with to get going so there we go okay so here was what the app should look like to you and me it's got some boilerplate table with some boilerplate code as well as all the tabs kind of um popped up so that we can see them however we can minimize them if we wish so just like that and perhaps we should because the first thing that i'm going to do is just set everything out in the ui before we start connecting our database to mongodb before we start connecting to aws and all that so let's go ahead and do it so as you can see a table has been populated for us with some uh just some dummy data we're not gonna be needing this so i'm just gonna go ahead and click delete on this great now the first thing that we're going to do is put in a tabbed container so i'm just going to drag in a tabbed container and this is going to essentially kind of symbolize our app itself so here we go here is our app and in here well we can actually do a bunch of personalization so for example first off i can decide that i want the um well we can have transitions to slide in from one to the other just like so from view one to view two to view three and then of course we can rename these views so i'm actually gonna do that i'm gonna choose to call this my feed so like the apps feed i'm gonna choose to call this my timeline to see a timeline of all the pictures that i have posted me personally i'm also going to have a tab to upload an image from the app of course we need to do that as an app we want to be able to upload our own photos i'm also going to have an inbox okay an inbox so that we can see messages and also message other people from the app itself and i'm also going to have another one called view this is going to be a secret one where we can actually view an individual post itself okay so this one is going to be hidden so i'm going to write hidden true and that will just mean that we can't see it here although it does exist and we can navigate through it by clicking different things so there we go that is step one of my tabbed container we can of course do many many other things for example if i want this to be at the bottom well all i have to do is select the element and then just scroll down to all the other options that we have available for example i can choose to uh change the color of the footer so i can choose to have this this kind of dark gray color just like so and of course this means that we need to show the footer so just show the footer like this i am actually going to drag these tabs down into the footer itself so that they are in the middle and i'm just going to make the alignment center just like so okay and maybe let's make this a little bit bigger so we can see okay so great one other thing we can do that is kind of cool is actually add little images to this as well so for example on my feed i can actually choose to have an icon which i am definitely going to do i'm going to search for the icon so i'm going to have a little home icon perhaps let's go ahead and choose this one i think it's quite cool and position it to the left let's go ahead and also do one for the timeline so let's search for something to do with time and this is a timeline so let's choose this one for upload i'm of course going to choose something to do with uh maybe camera just so people know that this is for uploading photos and for inbox this one is easy let's just choose an inbox so there we go so there we have it this is looking wonderful there's a lot more things we can do for example we can choose the hover text maybe let's just make it like a lighter color and the selected text again i'm just going to make this a lighter gray just because i think it's much cooler and much neater whee so there we go we are now sliding through each of these let's carry on one thing we can do as well to make our lives easier is actually rename these if we wish if you find it easier to do so then please feel free to rename these i'm quite happy with this being tabs one but that option is there for you too now in the header i'd quite like to actually display whatever tab we are on so this is going to be our first piece of i guess retool syntax that you're going to experience first off i'm just going to grab some text and just put it in here like so making sure that it is in the middle so let's just get rid of any of this and make sure it's aligned in the center so i'm going to choose to make this an h3 tag so we can use html elements in here and then i'm going to use these two double curly braces so this is some retool syntax in order to get tabs one so this tabs one that we were just on and tabs one comes with a variety of things so if you click the dot they will pop up we want to get the selected label okay so this just means if i click on one of these this text will change dynamically based off what we have written here so once again just pick out the element or pick out the component in this case it was tabs one you can hover over it if you need just to get the name and then a variety of options should show up if you press a dot and we have just gone for the selected label so this is looking wonderful let's carry on now i'm just going to put in some more text here i am actually going to hard code this just to be my name just because you know for now i think that's fine so i'm just going to do that here so ania kubo is the user of this and we can of course align this to the right if we wish and center it this way too and on the left once again i am going to put in an image there's two ways you can do this you can just use a circular image so if i just show you a circular image looks like this and we can you know resize it to whatever size we want or if we are very particular about the size we can actually write our own html so i'm going to do that for this option just to show you the difference so here it's just exactly the same as you would do in normal html i'm going to write an image tag and for my image well the alternative text for this is going to be avatar of user and then the source of this is just going to be i'm just going to use an image of me from the internet again i'm just hard coding this because we don't have any data to work with quite just yet so here we have an image from me i'm going to copy the image address from the free code camp website so there we have an image of me and now i can actually pick this out so maybe let's give this the class of avatar just like so and then this means i can now grab the class of avatar and give this a height of 20 pixels maybe let's make it 25 pixels a width of 25 pixels a border radius of 50 and then maybe let's give it some margin left 5 pixels and margin top two pixels okay so there we go i've just made a custom html element i'm just gonna drag it in like so making sure to select the blue writing and great and perhaps let's actually rename this i'm going to rename this to avatar image for us to pick out if we need now the next thing i want to do is actually populate our feed with some posts so to do this we're actually going to start working with resources and we have many to our disposal if we look here in the resources you will see all the ways that we can connect so if i go ahead and create a new resource we can use all of these databases we can use all of these apis and we can use a rest api in order to connect to whatever api we really wish that uses rest so there we have it we are going to use mongodb for no other reason that i had to choose the database so i'm going to go ahead and do that so if you haven't used mongodb already please do go ahead and sign up once again we are gonna be using the free version of it so go ahead and start for free i'm just gonna sign on with google because i've already used mongodb a few times before so here is my dashboard once you do fill out all the things necessary in order to get to here this is what you should see so under my organization you will see the projects that i have made so far so just make sure you're at forward slash projects so i'm just going to go ahead and create a new project my project name is going to be retool and i'm just going to click next okay i am going to be the project owner so let's go ahead and create a project just like so and wait for that to do its thing so now that we have our project called retool let's go ahead and build a database i'm going to choose the free shed option so please go ahead and choose that one too and i'm just going to go with the suggested region for me and just click create cluster okay so our cluster is being made that is doing its thing we're gonna have to fill out some more things first so i'm just gonna select a username and i'm going to auto generate a secure password and copy it and save it somewhere safe because we are going to be needing that later don't forget to also press create user now i'm just going to go down here and we are also going to add our current ip address so just go ahead and add your current ip address this just means that you will be able to access the database from your current ip address and we're also going to add some retool ones in later as well so that our platform has access to the database too so once you have done that let's just go ahead and click finish and close okay and go to databases so now this is doing its thing and what it has finished we will be able to connect our database and then also create our first collection and great so the first thing that we're going to do is actually add something to our collections we're going to have two collections we're going to have a post collection and a message collection so let's go ahead and add our own data i'm just going to call this tests and the collection name is going to be posts okay so please just go ahead and do that now before we do anything else i'm just going to connect this to our retool so let's go back to the overview and then connect and then we're going to connect our application and just take this url right here and i go back to the connector resource page that we just started now what should we call this well let's just call this colors and then use the database string and just paste that in like so and the password that i ask you to save just go ahead and replace that here so we've got the username and the password we're also going to have to allow these ip addresses as well as our own so back in here under network access please go and add those three ip addresses of retools so just go ahead and put in one put in the second one so just like so and then finally the third one as well okay so just add in those three ip addresses like so and that's it and wait for them to be active okay so back in here we have the connection string we've replaced the password with our password this is looking good and once those have been accepted and they are active we will test our connection okay so just wait for that to be done and great so now if we test our connection we should see connection successful so that is looking good let's go ahead and create our resource and then go back to the resources page so we've created our resource now let's go ahead and go back in here so back to the retool project browser collections and i'm going to show you how to create a first post i'm just going to go ahead and insert document i'm going to choose to write it in json as i feel more comfortable with this and how do we want our post to look so our post as an object well it's going to have an image url okay and it's also going to have a description so description of the post itself so we can have my favorite thai spot for example we're gonna have the author so in this case it's going to be anya kubo which is of course me we'll have the views of this post i'm just going to say that the views are 20 we're also going to have an author avatar which is just going to be an image of me and then we're also going to have a title so a title of this is going to be thai dreaming favor rit spelt the english way and then we're also going to have a time stamp which is going to be iso 8601 timestamp so that we can essentially order these posts by uh you know most recent on the so on and then of course we're also going to have an id that's going to be our unique id for now i'm just going to give this one which is separate to the object id so now let's fill this out i'm just going to be using images off the internet for now again we are going to be using aws s3 buckets to store our images but you know we want to see some stuff now so i'm just going to do this please be aware though that if these images go off the internet then you will not be able to see them anymore because we have no control over them so i'm just going to paste an image that i found on the internet of thailand and i'm also going to just paste an image of myself of the free code camp website okay so this is it i'm just going to insert that like so so at the moment we just have one post i'm just going to duplicate this and just create another so this one's going to be from john woo he's got 121 views this is going to be london pub love idea of this is going to be two and then the timestamp well let's actually give this description my usual spot in london and then let's get an image of a london pub just put it in like so and then put in an avatar and get today's date in iso 8601 format okay so that's today let's make this actually yesterday and insert and i'm just going to add the timestamp to here as well so let's edit this and put in today's timestamp okay so we've got two posts here at the moment just like so i'm gonna now retrieve these from the app so to do this i'm going to just get a resource so let's just get this down here i'm going to make a new resource query this resource query is going to be to colors posts and save and run and great you will even see a schema pop up so now if i type in the collection post or select it from a drop down and just click run you will see my two posts okay you're seeing literally these two posts right here wonderful so this is looking great so now that we have to date that data let's get to using it in order to populate our feed with a list so let's get going so to do this i'm going to find a list view and just drag it in here like so it's going to get rid of this for now get rid of the bottom one too and let's create our list so the number of rows well we're going to get our curly braces again and use the get post data length in order to essentially make as many rows as we need in this case it's going to be two as our post consists of two posts made up of the data that we have okay so an array of those two things now i'm just going to put in a container so our first item is going to be a container and you will see how the list will just automatically create two of those because we have two items in our list it's created two containers so all i'm going to do is just make this look a little bit different i'm going to show a footer i'm not going to show a header and i'm going to also put in an icon so let's search for an icon and just drag it in here like so and then this is going to be an i because this is going to symbolize how many views we have so there we go and i'm just going to align it to the right let's also put in some text so that we can actually see how many views that we are getting on this visually thanks to our data so i'm just going to put in some text and we can now access the data by going into get posts data and then looping with an i okay so we're just going to loop and then retrieve back the views for those of you familiar with javascript this should be familiar this eye to syntax should be familiar that is how you loop over everything from the get posts data array in order to get the values from the object we are looking looping over so once again i'm just going to align that to the right next i'm also going to put in the author okay so again i'm just going to drag in some text just like so and i'm going to go into the get post data i'm going to loop over each item and get the author in order to display who exactly posted this image and for the image itself well i actually want to put in some custom html so once again i'm just going to go into the html just like so and drag it and drop it in here and in here well what do i want i want a div that is going to be a media container so let's just go ahead and write our div and give it the class of media container just like so and that's going to hold so once again i'm just going to put in a div and the class to this is going to be image container so let's give this the class of image container and this is actually going to hold our image which is a self-closing tag and the source of this well we're going to actually use our two curly braces in order to go into the get post data we're going to loop over each item and get the image url okay so that's what i'm going to do and then i'm also going to make a new div that's going to be our text container so here is a div i'm going to give this the class of text container like so i'm just going to put in a p tag this is going to hold the title so once again we're going to get post data when i loop and just get the title okay so there we go we're having some issues with the thai dreaming image i wonder why that is but we'll look into that in a bit so now in the css let's actually pick out everything that we have to style which is going to be the media container for one and the media container well i just want to hard code everything so they all have a height of 200 pixels and then also we're going to have the image container like so and the image container is also going to have a height of 200 pixels and then also a width of 100 i'm gonna have overflow as hidden so just like that perhaps we can make it smaller if we wish i'm quite happy with this if you want to make it smaller and please feel free to do so great and i'm also going to say that the any image that lives inside the media container is going to have a width of 100 to make sure that any image is you know stretched out to the width and then position relative and just center it so that means from the bottom i just want it to be 50 and one last thing let's get the text container and let's give it some padding so i'm going to go with 5 pixels from the top 15 pixels from the side and then 8 pixels and then also 15 pixels okay and then also i'm going to give it a background color and that background color is gonna be a little bit transparent so i'm gonna go with zero zero zero zero point five the text well the text i'm actually going to give it white so there we go so we can read it let's also give this position relative and let's give it some bottom and let's also move it a little bit like so okay so that's what it should look like just ignore that one for now so it's kind of like an overlay with the title like so and also maybe let's start any p tags that live inside the media container so any p tags that live inside here so we don't want to affect any other p tags and have the font size of 20 pixels great so that is looking wonderful we've just created our custom html element which is going to be this image this is looking great so perhaps let's fix this image problem let's go back in here and see what is happening obviously just doesn't really like this url let's see why i'm not sure but let's find another image of thailand i'm just gonna go with this one right here copy image and let's just replace it like so an update and great so that is looking so much better make sure this says overflow make sure this says image container okay perhaps we don't need that this is looking great okay so there we have our two posts of course we can add more we'll do that in a bit what i want is to actually add a trigger if we click on this it will take us to the display of the image itself just by itself so let's go ahead and do that what i want to do is add an interaction and that's going to be on click and it's going to control a component that component is going to be the tabbed container and i'm going to set the view to be view which is if you remember one of the tabs that is hidden so that's what i want to happen and when that happens i actually want to write another query to get an individual post so at the moment if i click this it will just go to the view page i now want to write another query so let's go ahead and do that i'm going to write another query this query is just going to be get individual posts so get post and i'm going to go into the colors resource and what i'm going to do is look in the collection called posts so posts and i'm going to use find one this time because i want to find one post based on an id so the query i'm going to have to write is id and then i'm going to choose the post i clicked on to get posts again data and whatever i looped id okay so that's all i am essentially going to do i'm going to preview that just to see what comes back and once again let's go to the feed it's going to save and run this and if i click on this that should get me whatever post i clicked on id okay so that is what should be happening right now if i click on this so all i'm going to do is create an image drag it in here like so and the source of this well it's not going to be this cute kitten even though that would be quite nice i'm going to get posts data this time just the individual post data not post data image url okay so let's try this again okay so this just means if we click on here as long with going to the view we also need to control a query and that is the get post query so that is looking good let's go ahead and trigger the click now so i'm just going to get rid of this click on here trigger the click and great so we are getting that individual post right now we're essentially running the get post query another thing we can do of course is add more stuff to this so let's create i'm going to maybe put in the author name again at the bottom so just drag in my name right here and then get rid of this and get post data individual author okay so i'm just putting my name right here and then we can also put in a button to delete it and this will run the delete query for the post so there's something that we can also do so let's go ahead and do that why not so to do this well we're going to have to write a another query so let's go ahead and get these two tabs up i'm going to a new query so resource query and this time this is going to be to delete post okay so that is what our query is going to do and the collection for this is going to be posts the action type is going to be delete one and we're essentially going to look for the id of this post so this post is get post data id okay and if we preview this okay the result says that this should work if i save this now we need to now connect the button to that query so let's go ahead and maybe say this is delete i'm also going to make it red just because i think that red is much more associated with deleting things so on click of this now event handler on click control query delete post okay so that's what i want to do we can also do it that on success so on success of this post so here we go on success we can also be taken back to the home page so control the component we want the tabbed container and the view we want to set is the feed so that is also something that we can do so should we go ahead and delete this post of course it will mean that we won't have much data to work with but you know let's let's just go ahead and do it in fact i'm just going to perhaps uh copy this so that we can just reinsert it back in as soon as we do it so copy that and let's check it out so back to the feed i'm going to click on this so let's trigger the click okay we're viewing the image on the view page and let's go ahead and now click delete so that will trigger the delete post and it takes us back to the home page however this is still here so perhaps we need to get all the posts again because if we refresh this okay so that is correct so once again that's fine we can open this up and on the delete post query so on success we want to go back to this we want to go back to the feed but we also want to rerun the query that will get all the posts right so we want the freshest posts so that is what we're going to do so let's try that one more time i'm just going to reinsert the document that we just deleted so insert that to refresh this i'm going to hide that so now we should see two posts let's once again just trigger the click for this so trigger click so we view the whole image now and then i want to delete the whole image so then it should be deleted it should take us back here and we get the freshest posts wonderful so this is looking good once again i'm just going to reinsert that in so that we have more data to work with great so this is all looking good so we've done the feed next we want to show the timeline of just our posts so what i'm going to do is actually make a new query so resource query and let's call this get your posts okay and once again we're going to look in the colors resource we're going to look in the collection called posts and this time we're going to find but we're also going to write a query for this because the author of this well we just want it to be us right so us is here in text two so we can use the component text two to get its value so text to value is gonna be the username okay so that's just what i'm going to do right here like so so again we can also preview that it's annie akuba so if i preview this here it should just return back one post which is the one post i made the author anyakubo so this is looking good i'm just going to save it and all i'm now going to do in fact we can just copy this right i can copy this list so i'm just going to hide this and just put it in here because it's the exact same thing perhaps you just need to drag it in here it's the same type of view that we want okay so that will have all the same functionality to it and if we click on it we'll be able to see the timeline too okay so that's what we want we just need to now replace the data that's being fed into this with instead of going to get posts we're gonna get go into get your posts data instead okay so that's the length of this and now here we're also going to make sure that we're using the correct queries so get your posts get your posts okay and i believe that should be it are here to get your posts otherwise we're using a different query for this get your posts and that should be it okay so once again here we have our feed it should have everyone in it unless we've deleted something okay so here's our feed of the two items if we go on the timeline we just see all my posts as any kubo and if we click on this posts or trigger the click it should be taken to the view of the post however it would seem that if we're on our timeline the trigger will also need to be changed get post trigger this is going to have to be another query so let's write another query so you get your post so we've got our individual post we're also going to write a resource called get your post individual get your post okay and once again it's going to look in colors it's going to find one this time and we're going to look in it so i'm just going to save this because we're going to essentially just copy this what we did for the individual post forget your post individual but instead of getting the posts we're gonna get your posts plural id that we clicked and save and run which means that if we're now on the timeline the trigger that we want to hit is get your post and not get post okay so hopefully that makes sense let's check it out i trigger this it should go to here and now we can use get your post individual to render this and also get your post individual to render this and on the delete make sure that is saved to the collection posts and on the delete once again we're going to have to write a new query so make sure this is delete your post like so and once again we're going to look in the collection posts we're going to delete one and what do we want to delete well we want to get the id of your post that you are viewing and on success we want to control the component we want to control the component tabbed container set the current view to feed and then also on success we want to rerun the query to get all the posts great so this is all looking wonderful so once again let's go on our timeline let's trigger the click and we are indeed getting the correct post so this is all looking wonderful so now that we've done that let's carry on so we've got the feed we've got the timeline we'll work on the upload next i just want to work on the messages so for this we're actually going to make a new collection so let's go ahead and go back in here and just create a new collection that this time is going to be called messages just like so and click create now what are our messages going to look like well our messages are each going to have again a time stamp as we're going to want to filter out you know the order on which the are coming in so timestamp is going to be necessary we're also going to have a from so for example this is gonna be from anya kubo and it's gonna have a two and the two is gonna be to john woo john woo and of course we're gonna have the message itself i'm not very imaginative so apparently i just text john woo hey there because you know i lack any sort of imagination so that is my message and of course we need a time stamp so i'm just gonna stick that one in of today and now and just click insert okay so that's what our message is are going to look like i'm just going to duplicate this one and make this one perhaps maybe five minutes in the future this time from john woo to anya kubo going hey because again this is a really bad chat so there we go okay we have two messages in uh i guess chronological order now let's get to getting these messages and showing them based on the user that we click so this is gonna be quite cool let's do it so this is going to involve some more list views so i'm going to get a list view and on the left i'm just going to show my users that are available to me at the moment it's just going to be me and john wu and then we will have another list this time of the messages themselves so another list view just over here to display the messages okay great and finally i'm gonna have a form because the form is going to submit the message that we type so i'm just gonna work that in here just like so i'm gonna get rid of the header i'm going to keep the body and then i'm just going to have a text area as well so let's put in a text area like this and perhaps let's change the label to type your message here and then the value is going to be enter your message okay and then this can be submit sure why not so there we go so first things first we're going to have to write a query to get unique users okay because at the moment we're going to use the posts the filter out all the unique users so for this we are going to have to um in fact let's not write a query let's write a javascript transformer to do this so i'm going to say this is unique or get unique users and what we're going to do is so the data that we're going to be working with is the get posts data i want to get all the posts every single one and of course at the moment we only have two posts by two users but when we add another post from myself i'll show you that this is working so let's define unique users or unique authors to be more precise and i'm going to use object of values to get the value of the data i'm going to reduce the array of posts with the post itself and if there is no array of posts post author make sure that is spelled exactly the same way then array of posts post author it's going to be the post and then we're going to return the array of posts okay so that is how you'll get all the unique authors oops so essentially what you're doing is looking in the array and you're filtering out all the object based by the author and just returning the unique authors okay so that's what i am doing here so let's save that so now this just means that on here so first off i'm gonna get the so get unique uses value and get its length next i'm just going to drag in some text like so and instead of this i'm going to let's just make this a p tag and i'm going to go into get unique users value first one and get the author name oops make sure to add the object okay make sure to add that that's important and make sure that this was in the right space too okay so great so we are mapping out the names on to text elements we can also get the user's avatars so i'm just going to use the circular image for this just drag it in like so just make it small and drag that back in here so once again we're going to go into the get unique users value and loop over each one to get the avatar image so author avatar and great so we have our users here the next thing that i want to happen is i want to trigger a click so if we click on so perhaps p we should put this in a container just so that it's very obvious if we click on a user so there we go i'm just going to get rid of the styling of this so i'm gonna get rid of the header and then just make this a little bit bigger and i'm just going to also get rid of the border because i don't really want a border on these i just want them to be kind of transparent okay great so now let's trigger a click so what do we want to happen well if i click on here i want to see all the messages between any and anya so that will be null that will just be me so if i click on john will i want to see all the messages between me the user and john woo so let's go ahead and do that i'm going to essentially write a event handler for this but first off we're going to have to write some you guessed it more queries so the query i'm going to write this time is get messages to user i'm going to look in the colors resource the collection we're going to look in this time is messages and we're going to find anything that has from and then the messenger user so from john essentially so i'm just going to hard code john wu in here for now and then to me so the user which is text to value so i'm just going to use that instead of hard coding it okay so great so that is the query i want to run let's see what that returns back that should just return one message back that is correct so that is our get messages to user query let's write another query making sure to save that one and this time it's going to be get messages from user user being me okay and this time we're going to get the resource query colors look in the collection messages and this time from is going to be me so that is text to value and 2 is going to be john which i'm hard coding at the moment but this won't be hard coded for long so that is a way to get messages from and to each other and i want to get both of them and then sort them by a chronological order so once again i'm going to use a javascript transformer to do this and this is going to be get all messages okay so for this i'm going to define all messages and all messages is essentially just going to be get messages from user data and i'm just going to concat it with get messages to use the data okay so that's all i've done and now we're going to filter them by timestamp so cons descending messages and i'm going to get all messages i'm going to use the javascript method of sort to essentially sort them by the time stamp so a time stamp so the first items timestamp we're sorting one after the other we're going to use locale compare b time stamp okay and then we're just going to return back the descending messages so let's preview that or message is not defined making sure to spell everything correctly of course return to sending messages okay so there we go the messages are in descending order as soon as we add more we will see that okay so let's save that and that will run that transformer will run this is looking good okay so on trigger of this so if we click this container we're going to have to add an event handler and that is to essentially get messages from user that's correct but also get messages to user okay so that's what i'm doing i'm essentially rerunning those queries and by rerunning them it will trigger this transformer to do its thing as well one other thing i want to do is actually set some temporary state so i'm going to show you how to do that we can set temporary state because i want to save the user that i have clicked on so i'm going to save this as send messenger user and the initial value for this is just going to be null however i want to set this value so i'm going to set on click i'm going to set temporary state the state is gonna be messenger user and the value of this i wanna set to get unique user value i author okay so whatever i clicked on here i want to save it to state of messenger user okay and i'm doing this for a reason i'm going to show you right now so first off actually let's map out the messages onto here right so let's actually do this in containers i'm gonna drop in a container and then i'm not gonna have a header so let's get rid of the header and then in here i'm just going to drag in lots of text really so this will say the name of who this is from i'm also going to have the actual message itself of course so actually let's also have the date before we do anything else we've got a name and a date perhaps let's move the date up here and then i'm just going to make this a little bit thinner we're going to drag in some more text here and we are now going to actually get our messages so we're going to get all messages value i'm going to loop to get the time stamp okay so that's what we're doing however also going to wrap this in a new date object because we want to change this to a more readable format so we do this with two locale string and call it making sure that this is all in curly braces too okay wonderful and this does not need to be curly braces any more okay so that's just uh a more readable format i think uh local date string let's do let's not do the time great and then also the name we need so once again i'm gonna now go into get all messages value i'm gonna loop over everything that comes back and get the from okay and of course we need the message itself so i'm just going to drag that below i'm going to get all messages value i and actually get the message itself okay and then perhaps let's also put in a divider and great so cool so now if we perhaps just click this trigger we should just see messages from anya and john wu and of course if we click on this we should just see messages from anya but to do this of course we just hard coded john woon here right we need to get rid of this so all i'm going to do is now get the state that we saved so that's the messenger user value okay and just save and run that and do the same for here so instead of hard coding john woo messenger user value and save and run it so now if we trigger click i don't know why there's so many of these others because we need to get all messages value length great okay so again if we now click on john woo we'll see all the messages from anya and john woo and if we click on anya we should see nothing great now let's get to actually adding messages okay so that's what i'm going to do next let's get to it so let's go ahead and add a new resource query this is going to be add message singular i'm going to use colors the collection is going to be messages i'm going to insert one so insert one message so what we're going to do is just create the object so the timestamp i'm going to use the new date object in order to get that from i'm going to just use text to value because that's what we've been using which has been using this to is going to be again we're going to get the uh state so the messenger user values whatever we save to state because that's going to be who we are messaging it's whoever we clicked on here right so whoever we're in conversation with and the message well the message is actually going to be whatever the value of the text area is so text area 1 value so that's all it's going to be i'm just going to preview that and save it maybe just format this a little bit nicer so that is it save and then we're going to have to add an event handler for this so on submit control the query add message that sounds good to me and then on success of this right so once this is run on success where we want to essentially get messages from user again right so do that and get messages to users again so we want to rerun those so that it gets all the messages again okay so let's test it out i'm going to click on john wu trigger click so we're on john woo test and click submit so that should run and then we re-get all our messages and that shows up wonderful apart from the text is not really showing up i don't know why text ariel 1 value let's have a look in here let's get our messages test we seem to have got one needs to delete this so the message here uh we've used two s's that's why okay so that's my bad just use one s click save so let's do that again submit you should rerun the messages and ta-da there we have it so i'm just gonna delete this one with the two s's and this is looking good so everything is now working let's carry on so we've done the feed we've done the timeline we've done the inbox where we can message specific people okay and see all their messages and then go hello and literally message them on the app this is looking wonderful okay we can make this also a fixed height so that then we have to scroll if we wish that is totally up to us perhaps that is a good thing especially when we're going to be getting you know more details later so let's make this fix too so those two things are going to be fixed i'm just going to move this up so no matter how many more users we have no matter how many messages this should stay the same and then we could just scroll perhaps we should do that for the feed 2 in fact let's make this fixed and let's make the timeline fixed as well so everything is now fixed great so one last thing to do i want to be able to upload things from the app itself let's do it so for this i'm actually going to have an image preview because i want to see what uh image we have uploaded so we're going to have an image preview like so and then i'm just going to have an image but of course the image won't really show up unless we have something to show in here so what i'm going to do for this is say that we're going to get the s3 uploader so actually let's actually find the s3 uploader component s3 uploader and just put it here under the image and this just means that i can get the s3 uploader last uploaded file url and display it once we have uploaded something and of course i also want a text input to be able to show the title in here too okay so that's all i am going to do and then we can also position the label to be at the top and this is going to be the title of the post and we're also going to have a place to put the description of the post as well of course the author is going to be asked because this is our app so we don't need to worry about that so description and the date is just going to be whatever date that we have okay so there we go this is looking wonderful and next we just need a button that will confirm the post so we can post it to our database as well okay so we're going to be posting it to our mongodb database so let's just say this post and then let's change the color of this i'm just going to change it to be this lovely orange right here great so this is looking good let's carry on so we're going to do the add post query because that is an easy one i'm going to add a resource query let's call this add post and this is going to go into the colors resource it's going to look in the collection posts and it's going to insert one and once again we're just going to have a time stamp which is going to be new date we're gonna have the image url which is going to be the s3 uploader one last uploaded file url i'm gonna have the title which we're literally just going to get the text input one from text input one value same for description we're going to go into the text value 2 so text input to value we're going to get the author which we know by now is text to value author avatar making sure that it's felt exactly the same as in our database and let's just get the avatar image for this so avatar image source views we're going to hard code as zero and the id well i'm just going to generate a unique id using the uuid method v1 and call it okay so that's our object to create a new post let's save it and on success we just want to get the query get all the posts again okay we're going to rerun the post so save that wonderful and once again on success we also want to control the component and go back to the home page so let's get the tabbed container view and go to feed great so those are the two things that will happen on success so the next thing we want to do is of course hook up the s3 loader so let's go ahead and do that so let's make a new resource query this time let's create a new resource and i am going to select amazon s3 let's go ahead and call this amazon s3 and then the bucket name well this is stuff that we're going to have to do in amazon right now so let's do it so let's go to amazon i'm just going to select i am user and click next so of course i have already done all this sign up please go ahead and sign up it is free just make sure to sign up with the correct steps i am doing right now and click sign in once you have done so here is my s3 dashboard this is what you should look like if in doubt just make sure to go to the same urls that i have okay and i'm going to have to create a bucket so i'm going to go ahead and create a bucket here my bucket name is going to be retool bucket just like so and i am just going to uncheck this i acknowledge this and create a bucket okay so there we go there is my bucket let's go ahead and click that now under permissions i'm going to have to put in a bucket policy so i'm just going to edit this and paste in this i've written before making sure to change this to retool bucket one or whatever you call your bucket okay so just go ahead and do that and save the changes one other thing you're going to have to do is change the object ownership so please scroll down and edit the object ownership and simply check this box right here for acl enabled and acknowledge it as well okay and save you're also going to have to enable cause so just go all the way down here click edit and paste in this code just like i am okay so take your time take a break pause this and make sure that it's exactly the same and then click save changes great so this is looking good let's carry on so the s3 bucket name well we know that this is retool bucket one then we're going to go into here under users and add a new user i'm going to call this retool anya i'm going to need an access key i'm gonna add it to admin next review create user okay so here is our secret access key make sure to make a copy of that somewhere and save it and then we're going to go back in here and paste it in here and then we also have the access key id okay and let's just test the connection great and let's create the resource so now when we go to the upload page and select the s3 uploader the resource we're going to choose is ania s3 the bucket name is retool bucket one and this we're gonna have to change to public read and that should be it okay so now let's try upload to s3 so i'm going to upload this image of loften and ta-da there we have the picture now i just want to hook this up properly so that when we post this it gets posted to our database so we're going to have to add an event handler and that is to add posts at a singular post and the method is trigger okay so now when we click the post button this should work let's fill out the fields of the title and the description making the app in full mode and just go ahead and click post and we'll be redirected to the feed and you should see our image here even though we're not seeing the image why is this let's have a look at the code one more time ah we need a space between the end bracket here so just make sure that is there and please apply this to any other images that we have in the app okay and there we have it i hope you've enjoyed this tutorial it was really fun uh showing you how to make an mvp that people can use you know you can actually test it out on people get feedback you know this is a work in progress and this only took us a few hours so i think it's the perfect solution for building mvp products and you know really getting your ideas out there thanks so much again for watching and i will see you again soon\n"