Build a Twitter UI Clone with Vue JS & TailwindCSS ~ Home Page

what's up fellow developers my name is tyler potts and in today's video we are going to be learning how to build the twitter homepage ui like this using fjs and tailwind css so this is a normal twitter as you can see here and we're going to be building this version as you can see we've got our own version here it looks pretty much like the first one a few different icons a few different things because i don't want to steal their icon straight from the thing i'm using font awesome as well in here so without further ado guys let's stop talking and let's get on with the video okay everybody the first thing we need to do is actually set up our few js applications so what we're going to do is we're using the few cli so if you haven't already got a few cli installed i suggest you go check out and how to install it before you continue on with this video for now we're going to type few create and then we'll give our project a name i'm just going to type youtube and hit because i'm already in the twitter clone directory so i'm going to hit enter this is then going to generate our app it's going to ask us a few questions and these questions are as you can see what features do we want we could select some defaults but we're going to manually select feature so i'm going to hit enter on here now we have some different options here and because i want to i want to make this so it is future proof and if we do end up adding the functionality in i'm going to select the router and few x um we won't be using few x um but in case in the future you guys do want me to continue this uh clone and actually go from the ui to functionality and everything else um we'll add a needs in prepared so let's hit um enter then we get to choose our version i'm going to be using a few freaks i really do like the composition api not a long a lot of people do but for some reason i do i like keeping my all my eggs in one basket which is a terrible idea but we're doing it anyway so let's hit enter and then i'm just going to hit enter throughout everything else and this is now going to run and create our project so i'll see you once this has completed okay everybody so this has completed so we're going to cd into the project which is youtube now there's a few things we need to do beforehand so we need to install tailwind css because the ui is going to be based off just using tailwind's utility class system um so we need to start from setting up tailwind so here there is some options let's oh let's copy this head over into uh our directory here hit paste and hit enter um so it's installed that let's go back it tells us now we need to um create our configuration file so we need to do mpx tailwind css in it which is going to create our tailwind.config.js file but then we're doing hyphen p which is also going to create our postcss dot config file so here you go paste that in uh you know i'm going to shrink this down so you can actually see a bit better there you go hopefully that's more on screen now i'm going to hit enter and that's going to run and that's already created perfect then after that it's going to show us the files and it's going to tell us we can add purchase now what purged us here is it basically when you build for production um it will remove any unused css or unused tailwind css features so we're going to copy this i'm going to head back to here i'm going to open up um code so i'm just going to run code dot and this is going to open up fish your studio code for me you can open it up in whatever text editors you want i just prefer visual studio code now i'm going to zoom in one because i always forget to do this and let's go into tailwinds.config and see where it says purge let's replace this line with oh i've apparently copied the wrong thing let's copy that again copy and paste there we go so now that's in there now we don't need to touch any other files intel and css but if you do want to change the theme you can have a look at the theme settings or the theme options page inside of tailwind css if you do want to add different colors and stuff or do what you want mix it up you can learn more about tailwind css through their documentation which is perfect but um that's it so now we need to create another file include a tailwind file in our source in our source in assets i'm going to create a new file i'm going to call i'm going to put in a folder called css and i'm going to say tailwind dot css i'm going to paste that in now this comment here is important at import because currently there is a bug in chrome or chromium um that makes a weird bug so we need to we need to add this in to fix it now we need to include it in our main source files inside of our source we need to find the main.js file and in here we need to import and then we need to give the path to our assets css and our tail wind.css file so let's just check that's correct tailwind.css perfect so now that's all set up and it's all ready to go we're able we should be able to just go into um youtube here and just write or clear this and we'll just go mpm run surf and i'll discuss our development server um as you can see it's starting up hopefully there should be no errors and we'll be able to um see our project so it's done let's go over to our few example refresh and here you go as you can see it's all done and to test if tailwind is working we're going to head over to our app.main and i'm going to add a class to this home which is a background purple 500 there you go as you can see that updated perfectly uh meaning tailwind css is now installed and ready to use perfect so what's the first thing we need to do well first thing is we don't need styles we're using tailwind so we don't need separate styles let's move that over and we're going to be doing a dark mode version so we're going to go into our css here and we're going to add a few classes we're going to add a body and i'm just going to do apply now i apply is a tailwind feature that allows us to grab their classes so they have classes such as background gray and as you can see they're all here um and i'm going to do 800. now you're probably wondering how i have all of those options it's actually an extension called tailwind tailwind css intellisense here by brad corns if you install this you'll be able to as you can see on the right here do what i just did so make sure you install that if you're using fish fire studio coke it really will help you out so actually we've applied that background so if we go back you can see we're now in dark mode let's go to uh let's remove the config and let's close the main let's go to our app again move that over shut this sidebar for now and in here let's just remove this nav bar we don't need it yet um we will need it but well we're gonna make our own so that's fine then we need to go to our fuse and go to about we're gonna delete that so we're gonna go into our router and we're gonna remove the route for that now i know this is going a little bit quick um so i'm going to slow down in a second i just want to get rid of all the startup stuff so we're just removing the route from our route and then we're going back into our view and in our home now we're going to remove this hello world um components we're gonna create our own components and i'm gonna remove everything inside this script for now so we're gonna leave that at that we're gonna remove the hello world again and the logo as well we're just gonna write home in here i'm actually gonna put this in a dot text white diff just so we can actually see it um because at the minute it's uh black text everything is looking good we've got everything set up so we've got our storage for our few x but we don't need that right now we can also go into our components and delete the hello world component oh i don't want to rename i want to delete logo there we go the logo has now been deleted as well so now we're back here we go now we're fully ready to start so we're going to start off where all good app developers staff or web developer staff in the app.fewd main file here so let's close this and let me zoom in another one here now we want a few different classes a few different subs in here the first thing we want is to remove this router view and run create a flex dot flex column dot min height screen put right a few back in there for now so what these do if i have for above them you'll see this just a display flex this is flex column and if one gives us a min height of a hundred feet h so if you have intellisense in installed you can actually hover over them and see what they actually what their css properties are which is great i think that's a really cool feature and our router is going to go in a main a main file here a main tag sorry because we're using we're going to be using proper markup for this we're not going to be doing dot diffs we'll be using header we're going to be using semantic html and we're going to do dot footer for the footer off our app because if you've ever been there uh to if you've ever been on twitter you'll know there's a navbar at the bottom and a header at the top so there we go so we've got our footer and our header now we need some classes here because at the minute as you can see it looks like this and i had to let's add some more uh rowers so i'm gonna do a router link and now router link is basically just a anchor tag um a pretty anchor tag um well we're gonna do two and we're gonna do four attach profile here and then we actually need to install um fat font awesome so to do that let's head over here type in font awesome forward slash start we can scroll down and click down myself but i'm just going to do the mpm method um it's actually a cheek so i'm going to do npm and then i'm going to pull npm out of where it installs from so in here let's go back let's stop the server and let's install font awesome so there's going to install okay now that's installed we can clear this and we can actually start our server again by running npm surf and let that start now it's open here you'll see we have a node modules folder we need to find fun awesome and we need to get into our css and we need to grab well we need to grab basically this whole folder here so let's copy this copy the folder drop the node go go into our assets and paste that in and there you go we get this font awesome free folder it's got a lot of things and we don't actually need all of this we just need the css.old.min so what we're going to do is go to our main.js and above our tailwind.css we're going to import assets cso not actually css we're going to import font awesome free css and then all dot min dot css and that is going to ins basically that's all we need to do to get um uh our icons working so let's close this sidebar we can close this folder again we can close that and back in here we can now add an icon so we can go i and i'm going to give this a f uh a class of fast dot user now that is d1 for the user now if you want to find office you can search here so let's say we want a home a home icon so we can search home as you can see here it shows this home icon so if we click on this it gives us the mark up here what we need so i can copy that and i can paste that in the footer for example now if we go back to our app oh there you go they have appeared it's just they're loading um as you can see there's a home button and now a um a profile button uh let's remove that go back to home there we go cool so let's remove this because we don't need that right now what we need to do um after we've added this uh router linking we then need to add a h1 in um which we're going to give a class equal to text white font black and text excel we're also going to use um we're going to get the current routes name so whatever page we're on we're going to get a name which is currently the home page as you can see we now get home we also need to style our user here so let's give the router link a class and we're going to add in a padding of about four all around margin right of free text green 500. it's a nice fifth green and then text to excel for two times the size and there you go we see we've got our home user button there and if we go to our header here let's actually give this a class say flex item center so it sent us our items border bottom and then border gray about 600 go back and there you go you can see we've got this nice looking header cool so that now looks fine we've got a header and that's our header pretty much done simple header all set up ready to go now we need to set this main route because currently if we put something in our footer we just do text white footer it currently sits dead below there but we need it to sit exactly in line with this um here so to do that we're actually going to have to um do some custom css because um tailwind doesn't support it as always option and we'll just go do we're going to say it's flex one overflow scroll which is going to push footer to the bottom but the issue is once we get biggest once this once we get enough content in here to overflow it's going to push down our footer which isn't great so to do that we need to set a max height but the max height we need to set can't be done in here so we're going to go over here into our assets interest into our tail when css and then we need to create a main and we need to just say in here max height is equal to calc and we're going to say 100 vertical height minus a 139 pixels now you're probably wondering where i get this 139 pixels from but once we're done the styling this header here is going to be 65 pixels high as you can see it says there on the right of that white box tool tip box x x65 which stands for 65 pixels high and our footer when we've actually added in all the styling and classes will be roughly 64 pixels high added together makes 139 so let's style up our footer as well then so in our footer we're going to do a class and we're going to say equal to grid we're going to use the grid coles 4 border top and then border gray 600 there you go see we've got it there now we need to where we've got our footer in here let's just delete this um let's also shrink that down so it looks a bit nice neater let's split this up just because i i want to look a bit neater than it is now in our footer we can do a router hyphen link and in the router link we can give it a class of padding for text center text to excel and then here we can actually give an icon so if we do another icon with the class of like we did earlier and i go back oh we've got an error what do i do i cannot use in in operator path oh i didn't add a two here so you need an actual two on the router link there we go and as you can see the home button is now in place now we need to give this a text oh wrong one a text gray 300 give it a bear color okay so now that is done um we need to actually so as you might be able to see the height of this doesn't hit the exact bottom yet the reason being is because we need to add in the rest of the icons but to do that we're gonna we're gonna loop through our uh links inside of our router um and actually display them on screen dynamically so let's just close this open up our router and we need to create our next route so we need a path and this one is going to be explore um the name will be explore this name is what will display on our actual application and then the component we're actually just going to reuse home for now we also need to do something called main menu and set that equal to true now this isn't actually a true um option for the roots but there's a custom option we can add in we also need to quickly we need we need to actually add in a icon class one and we need to give it their classes so because we're gonna need dynamic icon so here's the icon class we need for the home button let's copy this and put that in here but instead of home explore is going to be search and now if we duplicate explore again we can now do notifications and then that can says home and this one is going to be a bell um and finally we're going to add one more and this is going to be messages and in here we'll do messages and this will be um envelope and fallope um and the reason we're doing the main menu is because we're going to loop through all of our routes because we're going to need more than just the main routes right the main bottom routes uh you're going to need a profile and you're going to have stuff like that but if we use main routes we can then add in another path which is for example profile again it's all going to go to the home because the home is the only ui we're doing but i want to show you how you could um build it up to be better uh component again home and let's just say that's all we need because we don't need an icon because this isn't going to be a link we can access via the main menu and without the main menu it's not going to apply but i'm going to show you what happens when we keep it in so let's go into app now inside of our app we need to actually create a new script because we're going to need to we're going to be able to get the root stuff so i'm just gonna say setup and inside a setup we need a const roots it's equal to ref array but to get that we need to import ref from view we're going to need reference the reference from few using the composition api we're then going to also import um use router from and it's going to be view router and we also need in here this ref on before mount now if we go back into our setup we can also set our router this is going to allow us to get the information from our router file here so we're going to say use router just like that and that's all you need to do and then we're going to do on before mount which happens before the component mounts we're going to run an arrow function which is just going to say root again dot value is equal to router.options.root.filter because we need to filter and we need to say r which is short for root dot main menu so if it's main menu value is set to true which we set in here as you can see main menu this means it will return and be placed into our routes um our main routes fire file here now we just need to return routes now what we can do is if we go up here and let's just go in the main bit here and just go roots like that as you can see we get some different things back we get an array of uh paths objects names and as you can see the rest of it there so let's just go back remove that and let's loop through that so you see we've got our router link here let's break these onto separate lines to make it a bit easier to i need to tab that um to actually see and then we're going to do fee 4 is equal to route in routes and then we also need a key which is going to be equal to route dot name for now you just need to make sure your names are unique you could also add an id in here or saying or we could do i and just sell it to i there we go that's perfect and then r2 is going to be equal to route dot path and our classes are icons here we need to bind this by using a colon and just say root dot icon class just like we've added here and if we go back you can see all our icons are appearing here except from our home icon and that's because we didn't add main menu to it so you can see because we didn't add main menu it's not appearing in here oh wrong bit main menu and there you go now it appears in our main menu which is perfect that's exactly what we wanted um also it looks like i have miscalculated sank 65 plus 64 is 129 not 139 which means that is wrong and there you go now give a minute there you go now that's right so it was just my maths was i'm wrong don't blame me cool so we can close our index.js file now and we're actually for now done with this if we click on this you can see we change routes the home page obviously isn't going to change for using the same component for now um but you can see we swap roots and the name updates at the top there which is perfect but we need now need to display our tweets so let's go create a let's go into home let's close our app let's go into home and let's start creating our tweets so what we need for this is we actually just need something very basic in our script here we're going to create a setup and our setup again this part of the composition api we're going to create a constant of tweets which get equal to a ref array and up here i'm just going to import again ref from view and we need to set some default tweets so obviously at the minute this tweets it's just um a plain empty reference now to keep this clean i'm gonna create a file file um in here just a new file and i'm just going to call this tweets.js although brad's traffic media gave me a good idea to call it fweets because it's a few tweet so i'm going to call it fleet because i like what you said and then i'm just going to export default um an array of objects now i have all these on screen over here i'm just going to drag and paste them across um because those will be here all day um and but i am going to go through them with you just to show you uh what they are so here you go they're all in there and let me go for them so each tweet uh object has an id um obviously when we if we want to hook this up to mongodb we'll have an underscore id pass uh properly through uh for now i've just gone zero one two three four um we get the author which would be the display name the username the profile image we get a body which is the content which actually should be backticks um so we can actually add in some html markup in here and also break it onto new lines if we wanted to and then we've got stats and stats are just arrays of likes retweets and comments um which have user names in them so actually we've got user one user one use two and then we get for comments we get a username and a um a body of the comment itself so kind of like what the body is up here but down here we also so in our second one it's the same thing but this one's by brad um as you can see here there's a bit it's broken onto two lines uh which is fine and then for florence one here you can see this um html markup in here obviously when you say for tweet you want to save it right also that's really annoying that it's really out there you go much better um there you go and then stats or different i've just added random stats in and then for the final one here's my one but this one actually had an image attached so we're going to do some dynamic data to say if it has an image then we're going to use it now if you want this array here these fleets you can actually get this by going to the github repository below and just getting this file out so let's import that so let's import fleets from dot dot slash sweets now we can just literally replace the ref in here with fleets i love this it's amazing um voice brad has come out for that i'm just going to rename the constitutes it's going to confuse me at some point but sweets oh no no we can't it has to be tweets damn it we've got tweets um so we've got our tweets here and our fweets here that's all we needed from that so now what we need to do is actually just export that or return that um by going underneath here and just say return and we can say tweets now let's go up here and let's just print these out tweet just to make sure it's working and there you go you can see everything is being replaced there it's looking good which is good so let's just delete that let's remove this text and let's actually start setting up our um tweets here so we're going to create a new class and it's going to be called tweet or maybe fleet um so let's go in here let's create a new component so i don't say class i'm a new component and let's call it a tweet dot view now we're gonna call few minimize that um and in here we're gonna set up our tweet component now tweet components gonna be quite big it's gonna have article as its main one and we're going to do dot tweet um the classes we need on here is border bottom and border gray 600 for now though we're just going to let's remove our style down here and in our export we're actually just going to get props and the props is going to be content or tweet because we're going to get the tweet information passed down our our tweet and in here i just want to say tweet dot author dot name or is it username what do you use its display name isn't it damn it display name so we're just gonna display the name was just gonna do a dot text white so we can actually see it if white would actually work there you go um so we're just going to add text white here and we're going to display just a name so inside of our tweet here we're going to say fee hyphen 4 and before we actually continue that we actually need to import it so we need to import tweet from dot dot slash components forward slash tweet um and then we need to return it inside of our setup here so we're just gonna say tweet and this way we can now use tweet we're gonna say tweet is equal to a lowercase tweet in tweet and then we're gonna pass through a find a tweet to tweet we also need to bind um a key equal to tweet dot underscore id and there you go that is our v4 let's break this down just so you can see a bit easier so we've got our tweet we loop through our tweet we get our key and we pass through the tweet so now if we go back and we got now i cannot reprop your name off author let's go through tweet is it just we need to hard refresh there you go for some reason it it didn't hard refresh um when you add a new file i think you need to hard refresh it so it picks up that new file but as you can see we've got one by me one by brad one by flor and pop and one by me again so let's go back and let's actually set up how this should look so we've got our article we now need to wrap this whole thing in a router link now this is not going to be used um but it's just for when we actually um set this up with functionality in the future if that's what you guys want so we've got a router link uh which goes to and a class of flex p4 um and that that just adds uh makes it flex and adds padding we're going to create a figure which is which holds an image a or media data inside um and we're going to give it the class of width 16 margin right free this is going to be the image to profile image um so we're going to say image and we're gonna say source it's equal to and we're gonna say tweet dot author dot profile image url i think that's it let's have a look profile image url there we go so that should be in there now i might even change this out all these tweets in a minute to be everyone's actual username just so i can actually so you can actually see them so now in our old we're just going to say oh we're going to remove that we're just going to say image because that's all twitter do and i don't know why they should give it a proper one but that's what we're going to do for now um so we'll just go image and then we'll give this a clown of rounded full because it's gotta be uh rounded and then width full as well so that looks about right with full rounded full um perfect so that's gonna fit the full figure here so if we go back to our tweet you can see here we've got our profile images displaying now i'm going to be right back so i'm going to swap these out for our actual profile images okay as you can see i've added in all our profile images that is as simple as let's go to our suites um and it's just adding in their proper image there just swapping out for a proper image there you go so that is now done so now we've got proper images just to make it a bit more personal now let's actually style up the rest of this a card so let's close that let's go into tweet and underneath figure we're going to create a tweet hyphen body um or a section dot flex one dot tweet body uh i hate that i've done that the wrong way around there you go now inside this section we're going to have a diff with the tweet author and in here we're going to have a uh dot a spam dot text white dot font hyphen bold now in here we're gonna pass through the display name so we're gonna say tweet dot author dot display underscore name let's break this down just so it looks a bit better on screen and then we're going to copy this i'm going to paste in here and i am going to say um text gray 500 we're going to have margin left of two to make some space and we're gonna go font weight normal and then we're gonna pass through the username save go back and as you can see it now says tyler bots with the username on the right and same with brad florin and again me again i'm there twice i tweet morph enough for people i definitely don't uh tweet body so we've got tweet author done now we need to create our tweet content so let's create tweet hyphen content now in here um what i want to do is i actually i want to bind this um and inside tweet content we're going to add backticks and i'm going to do a check we can actually remove the tweet so these tweet names it's just how i name each section you don't actually need them so i'm going to remove them because i think they're unnecessary but there you go that's what we had there now inside here we're just going to say um well we're going to say if content dot image so if we have an image we're gonna say mb hyphen free else we're just gonna pass back enough no no class so what we're just saying here if we have an image we need to add space underneath the content or for white don't so let's just add in this paragraph with the class of text hyphen white and then we're going to do something called fee html and we're going to pass through content dot body now the reason we're doing fee html is because we're not actually going to be um just adding text we don't want to if you just go in here and you say content dot body let me remove the fee html quick just to show you um and i hit save and i go back uh what's the error it can't read image okay everybody figured out it was not because of anything like this i was trying to load some things it's actually because it's not called content it's called tweet um there you go so if we go back and we refresh there you go it's now showing so as you can see without fee html um you can see we just see that the be right it's brb brb uh brb break break which isn't what we want we actually want html so if we delete that and we paste in fee html and just say tweet dot body you can see in a second there you go um it actually uses html instead and it actually writes out correctly now there's probably a better way of doing this but it's the way i do it at the minute um if you do have any better way of doing it then please let me know i wanted to do it so it it noticed uh line breaks um inside of the actual text the file the string it noticed the line breaks but fortunately it does not which sucks but um that's fine we can just use breakpoints for now um so let's carry on so we've got our image there now we need to create another figure and inside this figure we'll give this the whoa we'll give this a fee if so we need to check if the tweet dot image exists if it does exist we need to say class rounded hyphen excel border and then border gray 600. then we need to say overflow hidden now in here we need to create an image and we need to set the source equal to a tweet dot image dot url because it's actually a object uh and then we need to do uh in the alt we'll say cons or tweet dot image dot alt and we're going to give it this a class let's break this down let's let's scroll down here um and let's break these down in our own line so it's easier to read and inside the class we're just going to say width full height 44 which is 11 rem um and then object cover now object cover is the same as doing object fit cover as you can see there so yeah don't forget if you have for over these you can actually see their values here which is really nice and there you go so that's the image done so if we go back to our tweets you can see my feet it's right here with the image i posted earlier today of this exact application um so there you go uh you got we've got images we've got uh emojis as well we've got uh usernames and images which is good so it's looking good but one thing i've noticed is our our links aren't highlighting depending on what page we're on um so let's go back to our app quickly before we uh finish that because we also need actions we haven't got the like the retweet the share button at the bottom there so we also need to add those but i want to get this highlight working so let's go back home let's go to our app oh that's not app that's main and let's close main again and now in here we just need to say where we see when we have these classes for router link we actually need to do a um a quick yeah no i was doing that right a quick thing here where we go put these all in backticks um because then we can do this and then here i'm going to break this down i'm going to do in here i'm going to do route dot name it's equal to dollar route dot name so if down here yeah so we're getting the route from here and then we're doing route.name uh route.name here it's equal to route.name so this is the current route's name and this is the route uh link we're on um we're gonna check if it's that we're gonna say if then we're gonna return text dot green 500 else we're going to return text gray 300 so if we save we can remove the text gray from up here um hit save go back and as you can see when we click on different ones and it changes up here you can see the color now changes so it shows us which page we're actually on um click profile stuff like this it all changes it all looks good cool so let's go back yeah so that's that done that's all i want to do so let's go back to the tweet here um we're not done yet we need to actually add in our um tweet action so under here we're gonna go tweet hyphen actions again i don't know why i added in that class we don't need that class i just add it because i don't know lets me know why it is uh so we're going to say flex item center so we're just adding some margin at the top we're adding flex item center and then we'll just go say justify between um item center is just like using the line items and justified between is just justify content um and now underneath we need another div which is going to be the comment stiff and we just need to be text gray 500 and then we're going to add a i with the class of fast fa comment um and we need to add some more styles now we need p 2 all the way around margin right 1 rounded full because we want to be circular and on hover we want to say background green 900 and then hoffa text green 500 hit save go back actually everyone has a cardboard and when you click it um so if you're hovering over this this is what you'd see it'll show um uh why is there so the little circle uh which is really nice now we need to actually pass the stat so we need to create a span and in here i'm gonna say tweet dot stats dot comments dot length because the comments dot length it's gonna give us how many comments we actually have and actually i've got four uh brad's got three uh flange got four and down here i've got two so now we just need to copy this we need copy this about uh three times two three more times there we go and this one needs to be retweets and we need to change fat comment to retweet because they actually have a retweet icon as you can see here and then we need to do the second one is for heart and the final one as fast share now if we go back as you can see that's now working good we just need to change this one to likes and the final one well the final one doesn't actually have stats because it's just a share button so there you go you can see now we have a comments a retweet a heart burn and also a share button um and there you go that is our few js twitter clone you well twitter ui clone now i know a lot of people want to see functionality so if you do want to see a functionality we're going to be using node.js to create an api for this and we'll actually set up a functionality where you can post your own tweets so if you are interested in that and please do let me know in the comments down below now anyway guys i hope you enjoyed this video if you did don't forget to leave a thumbs up leave a comment smash that subscribe button and don't forget to share with your friends for now guys thanks for watching this video and peace out [Music] you

Channel: Tyler Potts

Views: 5,457

Rating: 4.9310346 out of 5

Keywords: webdev, javascript, javascript wizard, wizard, css, sass, scss, js, vuejs, vue, website development, website design, app dev, app, app design, app development, mobile app, native, web developer, app developer, developer, programmer, tailwindcss, tailwind, twitter clone, twitter, how to, tutorial

Id: eue3jbwxQS0

Length: 41min 40sec (2500 seconds)

Published: Mon Jan 04 2021

Reddit Comments

[u/vitruvian__man]

Are you hooking this up to a backend as well? Looks super cool!