React JS Project | Building a Decentralized Twitter Clone - Part 3 | Techmaker Workshop

[Music] what's up everyone steven here from techmaker studio this is building a decentralized twitter clone with react.js and alef.im part 3. so far we have basically set up a basic layout we are displaying some data from a left here in the center of the screen and we have our did not need to zoom in like that i have this new magic mouse acting funny and then we have our account you can see down here that we're logged in which we're now truncating and again just to show this one more time if we disconnect and refresh the screen now it's going to tell us we are not connected here wondering if that actually yeah there goes it's bringing back the data even without us being connected which is nice but if we connect the wallet now you'll see the address down here cool so that's our sign in system so in this episode what i want to do is basically just kind of start putting in a slightly more realistic looking style for this so as we build this out it looks a little bit more correct i probably will just be doing some styling in this episode and a little bit of react kind of functionality like we're gonna change this to not be this ugly date string instead we're gonna have it be like on twitter where you can see like how long ago something was um so on and so forth um but with that said uh let's go ahead and jump in as always um if you haven't already be sure to subscribe to the channel hit the thumbs up share this video with all your friends but anyway let's get started so first things first let's actually work on the colors and i think i'm going to switch to a dark theme for the moment now i'm not going to copy twitter exactly which is pretty much just solid black and then they have these borders i think i'm gonna go with more of a card style for the moment we may change it later i'm not sure yet but we're gonna start by flipping around the colors setting up our cards uh working on the fonts a little bit um and then we'll see where we get to i don't want to spend like you know 40 bajillion hours on this but i want it to look cool so um and i want you to like kind of see me do that from scratch so let's go to our app.css so we can start by just saying body background color black and let's go see what that looks like okay so now we have a black background i don't want it to be black though let's make it um so this is vs code has this cool feature where you hover here and we can kind of go pick a color let's do like i like this one e one e thing um then let's do dot first of all let's do h1 h2 let's just reset all of our text uh if i could type and then we'll do span div and then like ul l-i-o-l if i forgot anything we'll find it later we'll just say color white for now like this and then what i want to do is say card background color black and let's go see what we got cool so now we actually have like um kind of a dark theme black cards in the middle kind of a dark background so one thing that might be cool um to really put this in a different kind of look and feel than twitter would be to have this be really like not as flat so have kind of and it would also kind of fit the crypto style and ethos a little bit better in a lot of cases like for example if we look at a sushi swap i kind of like all the bright gradients they have in particular you have this dark background with this kind of uh dark gray box and then this kind of like glow behind it i like that vibe a lot we used a similar kind of vibe on hot potato not on the not on the app or on the website but on the actual not connected here i don't have polygon setup but we have this sort of palm tree kind of thing it looks cooler when the full app is loaded you can see that here uh it doesn't it takes up a lot more of the screen so the palm trees are a bit less prominent but what if we found us a cool gradient so as most of you probably guess i don't have all this stuff memorized so let's go google this and say cool css gradient background um css gradient dot io never seen this before uh grabbing it that's kind of funny um i don't know if they have any like dark ones these are all very bright this actually looks a little bit like sushi let's copy the css here um let's come over here so what we're going to do is just paste uh not in there let's go to the body so we're back so it sets a background color of this pink like this is going to be way way way too bright but let's just save this and go look and see what it looks like because it's going to be crazy wow wow okay that's pretty wild and the gradient didn't kick in what if we get rid of the color there um it may be the case that okay yeah you see that so the images are that's part of the that's the problem so what we want is the body to be height 100 bh and then what we want is actually you know we're going to need to do something kind of different if we want to do this basically this is what we're seeing here so what we need is like a overlay like this and what we want is to have position uh fixed and then height 100 vh with 100 percent and then our body doesn't have anything in it and then inside of our app what we're going to do is say div class name equals overlay actually just put that inside the app let's go see what that does cool so now you can see that's pretty much what we want not really at all in terms of the color to be honest but in terms of the functionality where it's a fixed thing in the background okay so let's go change up i keep doing the wrong thing there let's change uh the colors on this so let's just go like kind of like deep into the purple here like that uh let's go deep here let's go even deeper on this well like that and then i'm just making this up so as it is as is the case um feel free to do this how you like i'm gonna make this one almost black now let's save that and let's go see what we got so you got this kind of like murky weird blue it's kind of nice it might be a little too dark i'm not sure let's do this let's make this just like a little bit more blue like that and make this let's just lighten these up a tiny bit maybe not that much and that might be too much i'm not sure this is kind of a does that seem different i think it seems different all right so for this next thing i'm going to go to materialize css and i like their shadow stuff that they have in here um i just kind of like the feel of it i'm gonna go for this one and we're just gonna snag the css actually i don't want the whole framework just to get their shadows basically is the deal here if i can manage to copy this like that and so all we need to do is in our card just paste that and let's go see what that does it's already kind of a dark background so it doesn't really do much in terms of like lifting it off the page i'm gonna like kind of crank these up a little bit so let's see like uh 34 32 and 40 and do the same thing here this is all just like eyeballing it right now it's not exactly scientific at all that's too much um it's way too much um let's just make it up like a 17 add three to everything 15 23 and i'm gonna copy this because it's the same below instead of typing it all out again and let's see what that looks like i think that's kind of okay we may change this later i'm not sure i'm not committed to this it's always the case for me on this kind of stuff that like um it doesn't look right when it's empty so it takes a while and we have a lot left to do so i'm just going to kind of leave this alone for the most part in terms of the colors for now but just keep in mind this may not be permanent and you can do whatever you want you don't have to copy what i'm doing so if you hate it do something different um [Music] okay so on the post one thing i'm gonna do really quick is just change this to be my two so that it's a little less spaced out put them a little bit closer together i think that works um okay so in terms of the address let's go ahead and do this let's say class name equals address line or let's say um user like this and then we're going to end up having a username here at some point um but for now we just have this address so i'm going to bold this and then i'm going to move this time posted up into there and let's save that and see what that looks like well actually you know what i don't want this p tag here anymore and i'm gonna put a span of time around this and this will all make more sense in just a minute but now you can see here we've got the bolded address and then the text under so the next thing i want to do is basically fix this time stamp here and i'm wondering if there's like a time ago in words yep javascript let's check this so this actually comes from uh like ruby on rails originally i think was the the programming framework that was running twitter and there's a method called time ago in words in rails they kind of nicely format stuff um this is kind of interesting time since date um this is interesting let's try this then again this is just i'll test this out a little bit later um if to make sure it covers exactly what we want but let's just try this let's actually um and yes we did just copy something straight from stack overflow and say con and then now we're gonna just try it uh so we're gonna take a date arrow function time sense date okay so what this is doing if the interval is greater than one [Music] math floor interval and then they're doing years let's do y so this is going to really look like twitter in this case um and let's do h so i kind of like this just really simple letter kind of deal here right okay so time sense so return new date and what we're gonna do is say time sense new date and then we're gonna get rid of the local string so this takes a date right um [Music] okay so it's just taking the seconds and then it takes a new date which is the now subtract the date divided by a thousand blah blah blah so it's converting back into a timestamp okay i buy this i'll check it out a little more detailed later let's see what how it's working that's not a good sign cannot access time sense before initialization uh let's take this this will be one if this works this will become a thing that we bump into our utilities and to that end i'm gonna go ahead and put it here and then i'm gonna pass it in so that's all the way up in our app and the reason specifically is because i think i'm probably gonna pause on uh dropping new stuff here pretty soon and make a utilities deal but for now i think this works so then in posts we'll do time sense equals uh props dot time sense this is the one thing about react that always bugs me is like we're passing in all these dependencies all the way down the chain i know there's ways to handle it but um you always end up with this in the beginning so let's do props dot time sense here so far it's not too bad let's see if that works let's refresh any day now okay so it's still broken perhaps that time since it's not a function i don't understand why it's not a function maybe i didn't save a file maybe props time sense is not a function maybe it's because i'm in a callback maybe that's what it is maybe if i cut this and actually just use state directly maybe that will work if that doesn't i'm just wondering if that had to do with like function scope uh but it doesn't like it still so why is that not a function um posts oh put it in the wrong place that's why there you go that'll do it to you every time easy all right so you got this 11 minutes 11 minutes 18 minutes so on and so forth we go all the way down we got days down here we've got months all the way at the bottom [Music] it's not a lot of posting activity going on here okay so sorry for the detour but that's sorted now so what we want to do here is add this and nothing but space just to space that out let's have a look at it okay how spaced out is that on twitter they actually have this little dot um let's try this let's do the little dot why not um so like this okay so now we have a little dot twitter has a little dot that looks good and what we want to do actually i'm gonna copy this whole deal and then inside of time or fourth time we're gonna say time color and let's make it like 777 that may be too it's kind of like in the middle let's give that a shot let's try that out a little too light or too dark let's kind of go here i like that that looks pretty good so one thing we still need to do is add the profile picture um like we do like we have here so you can see it's on the left side and it's just all empty under it so for now what i'm gonna do is just grab mine which is this uh nft that i bought a little while back from the punkiverse pleb punks which is cool um okay so i'm gonna just like drop this into my maybe let's rename it like pleb and then i'm gonna drop this into my project how can i get back over here uh this one let's just drop it in components for now and then we will put a new folder in here i guess that went into where'd that go here all right so inside of source i'm going to create a new folder images and inside of images i'm going to drop this move it and to set this up in our post and again they're all going to have the same one for now but that's okay i'd rather have something like this for the moment instead of just an ugly placeholder um so we'll find a placeholder later but what we need to do is import um let's say uh profile let's do pfp from [Music] uh what would that be so we're in post so we need to go up two levels and then we'll go images and then pleb.jpeg like that and inside of our card body what we're going to need to do is say let me actually do this below the we don't need this now we kind of know what we've got so we'll make a row and then inside of our row we're going to say class name equals endlessly col gosh let's do two but i think one let's do one uh that may not be big enough let's do two and we'll see um and then in here let's just do image image source equals pfp and then we'll say styles and i'm just going to do something like actually you know what i'm going to add a class to this and do this in my css so we'll say class name equals pfp and let's see if that shows up it's probably going to be huge yeah all right so don't need that open dot pfp and let's say the width is a hundred percent and let's see what that does so how how do we set that that's a that's a column of one or is it a column of two i can't remember i just did it and i can't remember that might let's try one here okay so one is tiny two is a little big um [Music] but let's do this let's say um where was that let's do 80 like that and let's do border radius 50 so we're starting to look a little familiar here hopefully and then in our post we're going to do class name equals and again remember this is a 12 row column grid or 12 column grid uh in bootstrap here so we'll do call 10 to fill out the rest and now this should all line up correctly okay so how does this compare so the image we're not using the space very effectively right now and we probably won't use the rows realistically um [Music] let's see what happens if i may i don't need this this or this and let's just see what happens if i click um or if i cut that down to one just to kind of see a little bit uh that'll be 11 that would be one and then let's make this a hundred now yeah so now it's tiny so that's no good so for now let's stick with this uh 10 there we go cool okay so just a couple more small things and then i think we'll wrap this up and again like this is we're going in the direction of twitter here but we're gonna kind of do our own goofy thing just to kind of make it fun so as you can tell uh but let's go back over to the code one thing i'm kind of wanting to do is in this list of posts um i kind of want to do something like this when i say h1 and then i want like uh is that going to work i need to go to a browser probably so i want like a hello so we'll throw an emoji here and then just say hello like that and then we'll make this um p or m uh class name equals m y three maybe let's go see what that looks like why is there nothing here is it huh what is happening maybe it needs a z index or something because of the overlay let's try to change the overlay z index z index zero minus one there it goes all right so that's what we need to do it's kind of a weird it's a weird hack there i don't know if i needed to do that and i just forgot or what um [Music] anyway so now our our thing's a little bit friendlier just gonna play with the spacing on all this stuff a little bit and uh see what i think about it um but on the post um class name user let's make this mb zero first of all and see what that looks like so now that kind of just everything zips up to right there let's look at twitter so you can see you have like the information here and then the text is really just right below doesn't look totally different to be honest we'll definitely need to pick a different font but i'm not going to do that today um the next thing i'm going to do though is on the hello thing which we may or may not keep um let's do m t5 and then mb4 that's what i want yeah just kind of like pushes it down from the top of the screen a little bit it's a little more grouped together with the content but it's obviously not with the content so be funny to do is to have like i don't know i mean again we don't have to do anything in particular that we don't want but what might be fun would be to have like the weather like hey the weather in your town is whatever so uh just kind of as a nice little greeting so anyway i think this is kind of coming together um again we're gonna make it our own as we go i apologize it's 10 p.m here i'm a little bit tired it's been a long day so if i seem a little bit out of it that's why um why is my wallet not connected oh there it goes that's pretty weird um in any case um yeah so in the next episode what we're going to do is switch to our own data model and get it set up so that you can post messages and then we'll obviously have a lot more work to do in a whole bunch of different areas but anyway i think this is kind of off to a cool start it's been three episodes they've been a little bit weird episodes honestly for me they're a little more unstructured than i'm even used to but i think it's going in a cool direction we just need to come up with like a cool name for this that's not twitter clone we need to add the like login deal here build out the profile there's a lot to do there's a lot to do but we're going to get there and i think it's going to be super super super cool when it's done and yeah so if you're enjoying this definitely as always be sure to give this video a thumbs up subscribe to the channel if you haven't and i'll talk to you in the next episode

Channel: Techmaker Studio

Views: 65

Keywords: web3 tutorial, react js project, react js tutorial, react js series, real projects with react js, web3 project, aleph.im, aleph tutorial, aleph-js tutorial, web3 aleph

Id: YnbbHnHrqdU

Length: 29min 29sec (1769 seconds)

Published: Wed Dec 08 2021