Project: Create a Blog Using Next.js, Tailwind CSS and Appwrite Cloud 🔥

in this video I am going to show you how you can create a blog using app right Cloud nextges 13 and all of this is going to be really very simple we are going to use Nexus 13 for keeping things simple on front-end side and apparel cloud is going to make a life easier on backhand side how all these things are going to be coordinated is something that I'm going to show you in this video let's move on to our computer screen and let's get started [Music] so apprite is a backend that can be used for your mobile apps and it can be integrated to your web app it can be integrated to anything the very first step that we are going to take in order to build this project is signing up on apprite cloud so I am going to sign up on upright Cloud you can get the link in the description and you can sign up on update Cloud by simply visiting that link let us sign in with GitHub or you can also simply click on sign up and enter these information and I'm going to use a strong password and I will register for upright loud so let's click on sign up and I will get a get the activation email so it says join our Cloud hackathon I'm going to click on go to console because I want to directly go to the console and create my first project so today I am going to create a blog project using app right load so let me call it blog and create project and this project is created now if you are familiar with something like mongodb upright Cloud follows kind of the same pattern when it comes to storing data because in mongodb we have database and then we have collections we have documents so database collection documents and in upright as well we have the database collection and documents so here you can see add a platform so they have an SDK which makes it possible for you to add different platforms for your applications you can have a flutter app which is connected to this backend this is a single backend flutter app will be connected to this backend web app will be connected to this backend Apple app will be connected to this backend and the same backend can be used to connect your Android app as well so this feature is actually great and it makes app right very easy to use plus it makes your application very easy to manage I'll show you how let's click on web app and let's connect a web app I'm going to call this next js13 because I'm going to use Nexus 13 for my blog app and I'm going to type localhost in the host name now this host name is required because you are going to use localhost to connect to this backend if you are going to use something else you can add these star.netlyphi.app or gitbot.io or virtual.app if you are planning to connect your backend from these domains but since I'm going to use localhost I'll type localhost and I'll simply click next after that I'll install apprite which is compulsory but before we continue here let's go to Google and type next js13 app I'm going to use the create next app to create my next year's 13 app I'm going to click on installation or I think I I should I should enter this let's create a new folder or let's simply open a terminal inside code playground so if you are familiar with how I work on my code base I have a folder called code playground which contains my code base and I'm opening a terminal on code playground and I will create a new Next app inside this code playground folder so let's copy this command and let's paste it and it will ask me the name of the app I'll say blog app right no I don't want to use typescript I'm going to keep the default options and this is going to install react react Dom next year still when CSS CSS Auto prefixer and I'm going to use Tailwind CSS for this project so let's simply wait and I beat it for some time and as you can see we have successfully created a project called blog upright I will simply seed into that that folder CD blog app right blog Dash upright and let me type code dot so that I have vs code open with this folder as you can see we have created this folder and the next tab that I'm going to take is opening a terminal let me open this terminal as a tab if you don't know you can use uh you can simply drag the terminal to your editor and it can be opened as a tab which in my opinion is very very convenient let's come back to this page and let's copy this and install app right so npm install app right you can either use this terminal or you can even use this terminal okay anything is fine and let's copy this and let's import line from up right I'll show you when and where this is useful but let's copy this or even if you are not planning to copy this simply click next I've copied it and I'm going to create a file and let me use this page.js let's import everything here so import line from upright and let's copy this as well and let me do one thing I want to keep this Google Chrome opened in desktop 2 and I want to open this vs code in desktop one so I can do this to switch tabs okay let's copy this client is equal to new client and this is the endpoint and this is my project ID okay let's click next and after clicking next I'll say take me to the dashboard so I'm on my dashboard which shows me what bandwidth I'm using and how many requests are made Etc okay let's click on this next year's 13 web app and I can update the host name I can delete this platform and I can do whatever I want okay there are a bunch of different options and there is this API Keys tab as well I can create an API key and I can start working uh with my backend okay so these are all the functions that can be used with the upright Cloud but let me show you very basic function firstly we are going to create a database let's create a database I'm going to call this blog let's click on Create and let's create a collection inside of blog and let's name this collection is blog as well okay now I will click on documentation and this documentation will help me add documents to the database so if you want to add a document to the database all you need to do is simply copy this I'm going to copy this or rather this let's copy this and after pasting it here I'm going to copy my project ID database ID and collection ID I'll show you where to get the project ID database ID and collection ID from so let me click backspace and databases is equal to new database let me cut this import and paste it at the top and client database ID from map right let us go back and click collection ID to copy the collection ID The Collection ID is copied let's paste it here and also let's go back and click database ID to get the database ID and let's paste the database ID here so what basically we are doing is we are creating a new document inside of our block database okay so we have a Blog database and we have a collection called blog and we are adding some documents to this so let's create an attribute so attribute key can be anything let's call it title and let's make it string yes it is required the size let us say 34 and let's click create then I'm going to create another attribute and I am going to uh sorry I'm going to create an attribute so I'll click on attributes create attribute I'll say content and let's keep the content as string and yes it is required size is one two three three okay now I can create a document like this I can say title is say I am a title and then content is I am content okay now I can start my next GS app by simply running npm run Dev and our next year's app will start so I can click on localhost 3000 and this app will start as you can see this app has started and I can reload this page and if I show you my database documents let's reload and reloading did not add any document to this database let me see what is wrong here so we have the project ID we have the document ID everything now the problem is that the current user is not authorized to perform the requested action so let's see what the problem is and the problem is that if I go to settings I have not given permission to everyone for creating reading deleting on the database so let's create a role so I'm going to say any and let's give permission for read update create and delete ideally you will not do that but again I am doing this for demonstration purpose let's now try it out and let's try to restart the server npm run Dev and let us see how this looks like so let's reload this page and I'll show you whether the documents are coming in the database or not and yes they are so if I reload this once again I'll see yet another document and so on as you can see so there is another document and there are documents being added to our blog collection because we have directly written this here so we are now ready to add content to the database okay and this is the code for doing the same so in order to create a blog I am going to create a very simple application with no authentication I'm going to Simply create a page which will show the list of all the blocks and the second thing that I'm going to show you is the page which will contain a particular blog okay so let's try to refine things a bit I am going to Simply go back to my blog collection and let's add attributes to this block so we have title we have content let's add a slug as well slug is going to be string yes it will be required and the size is going to be say 50 or 60. let's click create and let's now comment this out I'm going to comment this out because I don't want a document to be added to the database whenever I am hitting the index page let's come back to this index page and let's try to write some code inside this index page I'm going to keep things very very simple I'm not going to focus much on UI at this point but on the home page I want all the blogs to be listed so I'm going to create a state so import use state from react and I'm going to create a state and use State snippet blog set blocks is equal to an empty array okay so I'm going to keep an empty array here and let's return a div and let's type hey I want to keep things very simple at this point let's see if things are working it says that you are importing uh you are importing a component that needs used it so by default all the components are server components in next year is 13 so we'll have to see use client okay and it should work now so hey is being shown here let's come back to our public folder no I want to see where the styles are inside my apps there is a file called global.cs I want to remove all these Styles except the Tillman CSS code and it will make my page as wide I'm now going to go to tailblocks.cc and inside tlblocks.cc I am going to copy a header so I'm going to copy I header very quickly and then I'll grab a code for footer as well so let's try to add header to this page ideally you will want to use a nav bar but let me keep it very quick and since I'm demonstrating app right here I'll paste this header here let's right click change all occurrences and let's change this to class name instead of class and let's also change all these stroke Dash and I want to make the first character after straw Dash as capital so let's select this and right click command palette transform to uppercase I'm doing this because the thing is that stroke dash line cap is not valid in react so I'll have to remove this Dash and make the character right after stroke Dash as uppercase and we'll get rid of all the errors you will see some errors if you are not doing this okay but since I am doing this I will not get any errors and if I get any errors I know how to solve them all right so we have tail blocks first link second link let's see if we have some template for uh showing the block content I am simply searching for some good template for the blog content okay this looks pretty good but let's see if we can find some something better this looks good as well but I'm simply searching for something better okay so this is this is looking even better to me let's keep this on hold and let's see if we find something better than okay so this this is finals this is something that I really like let's let's turn on the word wrap view word wrap okay and after head I want to add this section and let's fix this HTML to react thing we'll have to add these slashes in order for this to work and now let's see if this is added to our app or not yes our app looks pretty good but instead of this I want to write the name of my blog let us say the name of the block is the coding Thunder and let's go to charge gbt and generate something chart GPT to the rescue and let's say generate meta description for a Blog titled the Turning sorry the coding handle okay it will generate something for me and I'm going to copy this and paste it to my app okay and yes this looks pretty good let's let's use this card as a template and let's see if we can somehow fix this so we have a single card at this point and I want to map through the blogs blogs dot map and title blogs.map and item and let's cut this and let's return this and item dot content and then item dot title and I think this should look good but again I want to do one more thing I want to make sure that blocks are populated so how do we make sure that the blocks are populated let's cut this and let's put it inside use effect snippet this is a use select snippet and I want this to run whenever this page is loaded and let's uncomment this out so we are creating a new client then I'm going to do client dot set endpoint and client dot set project let's also keep this outside the home function then we have the database then we have create document instead of doing create document I want to make sure that I promise is equal to databases dot I want to list documents list documents and let's see if we can do something so we need database ID collection ID and then query so let's add these two values and I think we should be good here yeah that should be fine let's see if let's see if we are getting this on the console so let's reload this page and let's see if we are getting this response on the console and let's see what we get on the console so it says console.log expected comma is there some issue here let me see if there is an issue here so let's reload this page and let's see if there is anything wrong here so invalid Dom property class name will fix this we'll fix this in a while and then it says can't resolve encoding okay and let's see if we are getting the result in the console or not okay we are getting this result on the console so there are some documents which we can see on the console so let's do one thing let's say that blocks is equal to response dot document so set blogs response dot documents and let's see whether we are able to see our blocks or not so yes we are able to see the blog so I am content I am content I am content let's see if we are able to add some more content and if we are able to add some more content it should be visible here so let's go back to uh app right and let's see if you are able to add some documents and uh see them here so create document I'll say enter to JavaScript and then hey this is intro to JavaScript intro to JS and let's say create and let's reload and yes we can see the central to JavaScript document here I want to make sure that the content of this page is not fully displayed here so I'll say dot sub s t r 0 to 12. so that only a part of so that only a part of this content is visible here and then we'll see we'll say some triple dots like this and this looks pretty good we can also set an image an image link or something but let's keep it for later let's now go to the internet and search for random image API random image API let's see if we can get a random image SRC is equal to random Dot imagecdn.app let's see if we can replace this with the random image we couldn't find that photo not sure why it shows this but a simple API for serving random images I think it doesn't work cdn.app let's see I'm just trying to make it work okay so images.unsplash.com this is how it is going to work let's give it a height of 23 and width of 23 generate link Okay so this is something that we can use I'm just trying to make it work let's see if it works okay so it does work but it shows the same image and how about this how about this now I will add an attribute called image let me choose attribute type as a URL and as you can see I have restarted my vs code I am going to run my server once again oops I ran the wrong command no worries I meant to run npm run Dev run Dev and let's run the development server to see how things have changed so image is an attribute and let's add image attribute to some of the documents so image is a URL so let's add URL to some image URL to images images royalty free let's see if we can get links to the images somehow let me try this one I want to keep things really very simple which is why I'm going for very simple images but ideally for your production projects you are going to go for the real images Okay so let's see if this image has a URL yes it does so let's add this and update it says invalid document structure missing required attributes log okay so let me change this to title and it's update image and let's see if we reload this whether image is pulled from the database or not it does it it is pulled from the database which means that we are able to change a document so app writes cloud.abrite dot IO dashboard can be used as a backend if you don't have a dashboard but again ideally for a bigger app you will want to have an app which has a dashboard but you can always update data from here you can update permissions from here which is an amazing feature in my opinion so let's also give this one a slug and let's give it some different image I want to change the image this time so I'll say copy image address and I will update the image address let me go back and let me do the same for other documents as well so let's grab some other image links and let's give it some random slug I know these slugs they don't look very good but ideally for your apps you are going to have very meaningful slugs so copy image address again and let's paste it here and let's call this slug 4 or something okay and let's let me use the same image for this one as well introduce Js and see it takes effect immediately so all the images are updated and this blog looks pretty good so let's change this tail blocks to coding Thunder coding Thunder Thunder and this will change to coding Thunder also you can change these links like home about us or something so you can say home and then you can say about us and then you can say contact us and so on so this is something that you can always do okay and let's say uh blog and let me keep blog above contact us and let me get rid of this button I don't know why I don't like this button okay and as you can see your navigation bar looks pretty good is there anything else that we can make to we can do to make it more better in terms of functionality the answer is yes so I'll say import link from next link now what this next link will do is instead of these anchor tags we'll use Link and we'll use hrf is equal to let us say slash and let's also change the closing tag to link okay and let's change this to about and then blog and then contact and you can create these Pages such that you can access these links so in order to create these Pages all you need to do is create folders say if I create a folder called about and if I add a react server component and the moment I click on about I'll come to this page now you can always edit and work on this page but at this point I'm not working on this page rather I'm going to work on another page which is blog post okay so right inside app folder I will create a folder called blog post and inside this blog post I will say page.js and in order to help myself with how to create a dynamic page I'll say next dot js13 Dynamic roots and I'll come to the documentation of dynamic road so since I'm using the app router not Pages router I'll change it to app router and as you can see here that I can say app slash blog Slash Slug slash ph.js so this is something that you can always do in order to get the slug so they have used the same example so inside of the blog post I will have to create yet another folder called slug and inside this slug folder I'll create this page.js and inside this page.js I can always get these values so let me see how this is going to work okay so blocks log page dot Js and these params will hold these values I guess so let's say RF refce and let's use params and let's see if params contain anything params and let's do Json dot stringify buttons and let's see what prints on the screen okay so let's let's say slash blog post slash p and I want to see if this blog post Slash Slug works or not it doesn't work for some reason okay so I misspelled blog post slug p is written here which is amazing so I can get the slug by params.slug so cons slug is equal to params dot slug and I need not do this let me open a fragment and inside of this fragment I can have the nav bar as well as a page content so let me copy this header as is ideally you will create a component for this Adder but since this is a very basic app I'm just demonstrating You by copy pasting and with a warning that you must create a component if you are trying to create header okay all right so we have this header and then I will go to tailblogs.cc tail blogs.cc okay so it says link is not defined so import link from next link this should work okay coding Thunder the nav bar is here and how should I structure my blog post is something that I am figuring out what if I show the heading here and then the content below the setting something of that sort right so without thinking much about it I'm going to copy this I'm going to Simply copy this code copy to clipboard and I'm going to paste this section and at the same time I want to remove these uh get it on Google Play and these things let me see how it looks so it looks like this and download on Play Store button SVG span so let me get rid of this Dev let's get rid of this Dev and see how it looks okay so this is going to be the title of my page and let me also see if I do lorem 23 how it looks so it's going to look like this I think this is an amazing setup for a Blog and I'm very happy with how it looks so let's do one thing let's try to pull the blog by slug from upright so I'm going to use the same Imports so let's try to use the same Imports and let's create this as a client component oops I accidentally closed it no worries and then I'm going to instead of blocks I'll say blog so I need to pull one block the first block so set blog is equal to use State and blog is going to be an object an empty object okay and inside yields effect we want to make sure that we are pulling we are pulling only the block that we need Okay so let's copy this use effect and let's tweak it let's tweak this user fact code so let me get rid of this so instead of document databases dot list documents I want to give it a filter I think I can give it a query filter and say slug should be slug and let's see what the response is so response is a lock to the console let's reload it and also I need to make sure that this is a client component so you'll have to add this use client at the top and let's see what it has to say in the console so there are some errors its client is not defined okay so client is not defined it's a very genuine error because I have not defined the client and now it should work all right so let's see what's there in the console it says 400 let me see what's wrong here 400 databases queries is equal to object plus object so this is the slug and list documents list documents let's see what are the parameters that we can provide to list documents so database ID string collection ID string and data is so we'll have to define the query like this so query is used by typing query dot equals so let's try to copy this and let's also import query from app right so we are going to import query as well so we imported query and this is not how we provide the query rather we provide the slug like this so let's make it little bigger and let's say Slug and Slug and let's see if this works okay and it says value must be a valid array and value must be a valid string and no longer there four zero nine six characters okay and the query should be an array like this so let's provide an array of queries instead of just a query so let's provide an array to this and it says index not found slug index.phone slug okay so index not found because this uh slug is not valid so let me call this title and let's see if it is able to pull something index not found slug so slug is title here and it should pull this document from the database um let's see what's wrong here so in order for this to work we'll have to create an index so let's come back to our collection and let's come back to indices and let's create an index and index type is key and the attribute we want to create index on a slug and order is ascending let's create this index and this index is successfully created and now if I reload it works so you can say total zero documents array 0 so there is no document which was pulled which is something that we'll have to look into but again this works this works at this point so slug is not equal to this params.slug value we'll have to see what is wrong here so let me try this first Slug and slug 4 and yes one document is pulled from the database so all we need is we will have to get the first document so we'll see dot documents zero so we are we are going to set the blog as response dot documents zero which is going to be your blog and then this will be block dot content blog dot content and this is going to be um and let me say block question mark dot content so that we don't get any error if blog is not defined and let's also say block dot title and let's call this as the coding Thunder okay so yes the blog is pulled from the database so if I say I am a title I am a Content this content is visible which is amazing so instead of going to the blog we'll have to go to the home page and all the blogs are visible and I will do one thing I will change the links to the valid links let me show you what this means so whenever somebody clicks on the title or on this card I'm going to add a link so let me add a link and let me say link href is equal to let's cut this and let's let's say slash blog post slash and we are going to add the slug so we'll say Plus item dot Slug and I think this should work okay so whenever I click on this title I should go to this page yes it is showing me the blog content and all of these block contents they look very basic they don't look like realistic block content but let me add a realistic blog content as well so let's let's add a blog post which actually makes sense so let's try to go to intro to JS in one blog and I don't know whose blog this is but this is whatever I'm doing is for learning purposes and it's on my local so I'm not copying anybody's blog uh let's add this title and I'm going to add the content as well so let me add this content as well and I know it is not going to be as structured as this one because I'm not using HTML or markdown or something but I pasted the content here and I'm going to give these slug as intro to Js and blog let me add blog and let's also add an image I'm going to copy this image so let's right click and I'm not able to copy this image what is it URL of this image so looks like the uploader doesn't want me to access this image but sorry developer I will anyway access your image next document security is disabled so I just clicked on Create and this blog is created so let's reload this page and let's see if we are able to access this blog or not now if you change this to mark down and if you allow more characters you can structure the blog however you want and you can also have comments and you can in a very similar way use user authentication of web right to power your blog so I hope that you like this video and now you are capable of creating a Blog using app right in a very similar way you can create your backend using app right and connect it with your Android app or anything of your choice so I think this is a great choice when it comes to creating quick blogs production applications or even apps or if you want to have everything connected to one backend and this is very useful when you want to have everything connected to a single backend like your app do the same backend and your web app to the same app right back end and so on so I hope you love this video and you will explore different ways to create different applications using upright thank you so much guys for watching this video and I will see you next time [Music] foreign [Music]

Channel: ProgrammingWithHarry

Views: 9,645

Keywords:

Id: s1MUcxO-x8Q

Length: 39min 33sec (2373 seconds)

Published: Fri Jun 16 2023