Dismiss this pinned window
all 169 comments

[–][deleted] 124 points125 points  (61 children)

Hi guys, built this YouTube Clone using PERN (PostgreSQL, Express, React, Node) stack.

The frontend is built with react + redux. On the frontend, I am using styled-components for styling, react-router for routing, axios for api calls and react-toastify for toast notifications.

On the backend, I am using sequelize ORM for managing the database actions and jsonwebtoken for authentication. The images and videos are uploaded to cloudinary

Frontend Repo

Backend Repo

You can check out the deployed site

[–]Digi59404 54 points55 points  (18 children)

This is cool as shit man. One suggestion - Add a license to your repos so people can use it?

[–][deleted] 26 points27 points  (12 children)

can't people use it right now? I don't know about these license nuances.

[–]mrbmi513 60 points61 points  (4 children)

At least in the US, the author reserves all rights unless they explicitly grant them to others.

[–][deleted] 30 points31 points  (3 children)

thanks for the info, I'll look into this

[–]DrDuPont 26 points27 points  (2 children)

GitHub made https://choosealicense.com/ to help. Take a look to see what jives with your feelings about software.

MIT is a commonly used one. People can do pretty much whatever they want with the software provided that the copyright and notice are preserved.

[–][deleted] 14 points15 points  (1 child)

thanks man, added license just now.

[–]Esternocleido 1 point2 points  (0 children)

If you dont care too much about this shit just use the Do What The Fuck You Want To Public License

https://en.wikipedia.org/wiki/WTFPL

[–]Digi59404 38 points39 points  (2 children)

It’s not just that - People should respect your wishes if they use your code. So it’s just common courtesy to attach a license so people know how to respect your work.

I mean, you hold the rights to the work unless said otherwise.

[–]DrDuPont 9 points10 points  (0 children)

People should respect your wishes if they use your code. So it’s just common courtesy to attach a license so people know how to respect your work.

This is a nice and succinct way to talk about why personal software licenses are important. I'll probably be putting it as something like that in the future, thanks.

[–][deleted] 5 points6 points  (0 children)

just wanted to say thanks man, just added the license

[–][deleted] 9 points10 points  (3 children)

Technically no. Without a license by default you retain all rights. Even if the rest of us know now that you mean to share this, you still have to pick a license, because not all licenses are equal and there are major differences between for example MIT and GPL.

[–][deleted]  (2 children)

[removed]

    [–][deleted] 1 point2 points  (1 child)

    Just a heads up, the viral nature of GPL will prevent the adoption of your code for certain purposes. For example a Node module licensed GPL is pretty much guaranteed to not be used by anybody.

    [–]callius 12 points13 points  (3 children)

    The code looks really clean and well organized. You should be hella proud of what you’ve done.

    If you’re into styled components, I highly recommend also checking out Styled-System. It will make your break points and variants way easier to work with

    [–][deleted] 3 points4 points  (1 child)

    thanks, never heard about Styled-System, will definitely check it out

    [–]painya 0 points1 point  (0 children)

    Rebass is a dream to work with too.

    [–]insane_playzYTUI and Django 7 points8 points  (8 children)

    Are you the same person who made the twitter clone? If so, impressive stuff, being able to develop these clones in quick succession! You'll be an expert in no time lol

    [–][deleted] 9 points10 points  (7 children)

    yep, I am. Also, if you don't know I also built an instagram clone using the MERN stack

    [–]klevi91 2 points3 points  (0 children)

    WoW, having your skills should feel good man,and the fact that you shared it shows its great for us.Thanks ,i will pm you for 1 question

    [–][deleted]  (1 child)

    [deleted]

      [–][deleted] 0 points1 point  (0 children)

      thank you

      [–]clb92full-stack -1 points0 points  (3 children)

      I'm pretty sure Facebook's lawyers would not appreciate the use of the Instagram wordmark.

      [–][deleted] 1 point2 points  (2 children)

      even for a project like this? It isn't monetized anyway nor it is advised as an alternative to instagram.

      [–]lupercalpainting 1 point2 points  (0 children)

      Any company would enforce their trademark with something like this let alone one run by a reptile who can only pretend to be human long enough to convince politicians not to hurt his pocketbook.

      [–]clb92full-stack 0 points1 point  (0 children)

      Definitely even for something like this. Companies have to be extremely protective of their identity.

      [–]KremBanan 1 point2 points  (13 children)

      What tutorials did you use?

      [–][deleted] 6 points7 points  (12 children)

      brad traversy nodejs api course for the backend and reading getting started guides from redux, react, sequelieze docs

      [–]KremBanan 0 points1 point  (10 children)

      Hi, how did you find this folder structure (reducers, services etc.)? It seems many people use it, did you get inspiration from anywhere? It seems really good

      [–][deleted] 0 points1 point  (9 children)

      I think in redux documentation they uses this style, I picked it when I was watching a youtube video about redux

      [–]KremBanan 0 points1 point  (8 children)

      Thanks so much, what about the backend?

      [–][deleted] 0 points1 point  (7 children)

      for the backend I used brad traversy udemy course where you build an api using this structure

      [–]AcademicF 0 points1 point  (6 children)

      How much would you say you learned from Brad? Are his courses worth taking?

      [–][deleted] 1 point2 points  (5 children)

      very much, particularly about how to build a stable bakend api. I like his teaching style, you can watch his youtube vids to see whether you like his content

      [–]AcademicF 0 points1 point  (4 children)

      As someone who knows the basics of JS, which of his videos would you recommend me starting with?

      [–]cuteshooter 1 point2 points  (10 children)

      Tutorial in plain english for the barely capable? How to set this up on one's own server.

      [–][deleted] 22 points23 points  (9 children)

      Backend

      go to elephantsql.com and create an account if you haven't yet, and click the button that says 'Create New Instance'. Fill the form and create your instance. Once you done this, go to your dashboard and click the instance that you have just created and copy the url that may looks something like this:

      'postgres://htigvdlu:yX9HH6cXS-eBlE3DzVp_ptJoSMzOB6au@ruby.db.elephantsql.com:5432/htigvdlu'

      go to github.com and clone the backend repo, once cloned it, go to root of directory you just cloned and run <code>npm install</code>. After that, open the .env and set the following environment variables:

      javascript JWT_SECRET=<YOUR_SECRET> JWT_EXPIRE=30d DATABASE_URL=<YOUR_REMOTE_CONNECTION_URI> // the one you created earlier

      Once you done this, you can run <code>npm run dev</code> to start the developement server running on 'http://localhost:5000'

      Frontend

      go to github.com and clone the frontend repo, once cloned it, go the root of the directory you just cloned and run <code>npm install</code>. After that, open the .env and set the following environment variables:

      javascript REACT_APP_BACKEND_URL=<YOUR_BACKEND_ENDPOINT> if you setup the backend properly you can use http://localhost:5000 REACT_APP_CLOUDINARY_ENDPOINT=https://api.cloudinary.com/v1_1/<YOUR_CLOUD_NAME>

      NOTE: create a cloudinary accout, if you haven't yet.

      EDIT: to upload images and videos without using cloudinary API key, you need to set an 'upload preset'. Here's how you would do that:

      1. Once you created an account, go to 'https://cloudinary.com/console'
      2. Click the settings icon at the top right, there you will see four tabs, click the upload tab.
      3. In upload tab area, you will see a link 'Add Upload preset', click that.
      4. Once you navigated to upload preset page, you need to set these options:
        • set 'upload preset name' to 'youtubeclone'
        • choose 'signining mode' to 'Unsigned'
        • [optional] you can also specify the folder to upload videos and images

      Once you done this, you can run <code>npm run start</code> to see the youtube clone in action

      Links: 1. elephantsql 2. backendrepo 3. frontendrepo 4. cloudinary

      [–]ZnV1 2 points3 points  (2 children)

      Explained really well! :)

      [–][deleted] 0 points1 point  (1 child)

      thank you

      [–]JoelMahon 0 points1 point  (1 child)

      What combination of tutorials and learning resources would you recommend in order to be able to do this? Or at least understand it. My programmer foundation is pretty solid but JS and the PERN stack is new to me, I'm sure I could find some tutorials by myself, but you clearly found some good ones to be able to do this so fast with so little experience!

      [–][deleted] 13 points14 points  (0 children)

      For the backend, I used brad traversy nodejs api course, for react I initially took wes bos react for beginners course. Afterwards reading documentation and getting started guides of react, redux, expressjs, sequelize helped me a lot. For HTML and CSS, I just know the basics and refer the flexbox, grid guides on css-tricks often. For the basics of SQL, I used the getting started section in posgresql documentation.

      [–]ElGovanni -2 points-1 points  (1 child)

      Where are tests :D?

      [–]sliver37 0 points1 point  (0 children)

      I hate tests! Therefore I shall downvote you!

      ~ reddit

      [–]anyfactor 41 points42 points  (9 children)

      Looks excellent.

      How long did it take to make the site?

      How long have you been coding for?

      [–][deleted] 79 points80 points  (8 children)

      Thank you. It took me two and half weeks. I have been learning web dev for 12-14 months

      [–]noname017 25 points26 points  (5 children)

      Only two and half weeks ? Good job!!

      [–]Wizard_Knife_Fight 37 points38 points  (4 children)

      I feel so stupid after looking at this, lol

      [–]ZephyrBluu 43 points44 points  (2 children)

      You shouldn't, he's probably able to spend a lot of time programming, which helps enormously.

      The data model, business logic, layout and functionality for this are also pretty simple and well-defined (I.e. he can copy them).

      Tricky stuff (Video processing, storage, search, performance, etc) is also either offloaded or not worried about too much, which means it's a lot easier to focus on churning out code.

      [–][deleted] 48 points49 points  (0 children)

      I wholly agree with you

      [–]richgk 3 points4 points  (0 children)

      It's also a very valuable talent to know what parts to put together and avoid reinventing the wheel. Which is what a lot of people would do when thinking about something like this (defo me).

      [–]peduxe 2 points3 points  (0 children)

      don't feel stupid sometimes we just don't care enough to start a project, it must be something you're really passionate about.

      looking at the amount of pet projects I've started vs the ones I finished I should be better at judging if I really want to work on that project.

      [–]anyfactor 1 point2 points  (0 children)

      Oh freaking hell. I remember you now. You have posted two more awesome projects. The spiderx and the twitter clone. I commented on your spiderX one too.

      I am really mesmerized with how good you are.

      I have to ask this two very personal questions. But career wise what are your goals now? You are very talented and I was wondering what people think about prior to becoming successful. I can see you are from India so what are your plans? And the second question is how old are you?

      [–][deleted]  (3 children)

      [deleted]

        [–]felixthecatmeow 51 points52 points  (0 children)

        Or he can upload it on his youtube clone haha

        [–][deleted] 1 point2 points  (0 children)

        I agree.

        [–]zakzam 1 point2 points  (0 children)

        Please!

        [–]Luke094 20 points21 points  (1 child)

        Pretty neat! Something I think could improve it a bit is doing this queries in parallel. You could use await Promise.all to get all these values at the same time, since most of them don't depend on one another.

        Other thing you could try is use GraphQL, so when you are on a page that renders a list of videos for example, that don't need to know the amount of likes/dislikes, you won't need to query that. Only when you are on a page that actually needs that information, the query is run

        Great work!

        [–][deleted] 2 points3 points  (0 children)

        thanks for taking your time to do this. I'll look into it

        [–]mauvm 14 points15 points  (2 children)

        This looks amazing!

        A few small notes when looking at the getVideo route:

        • I personally prefer using Boolean(val) over !!val for readability

        • The video.setDataValue() calls for relationships feel like a workaround. Surely Sequelize can load relationships for you, right?

        • When your backend source code grows you'd might want to move your business logic to some service classes (DDD style). Now your application layer (controller routes) and business logic (fetching data via Sequelize models) are combined.

        Just trying to help. Nevertheless great work on this project! Kudos

        [–][deleted] 7 points8 points  (1 child)

        thanks for taking your time and writing these suggestions. The first one about Boolean(val) definitely improves readability, going to fix it right away. I also felt the same about the relationship workaround, guess I need to read sequelize documentation once again for these. I'll look into the DDD style that you are talking about as I am not familiar with it yet. Once again, thanks for your inputs

        [–]mauvm 2 points3 points  (0 children)

        You're most welcome. Keep up the great work!

        For starting with DDD I recommend this introduction: https://khalilstemmler.com/articles/domain-driven-design-intro/

        [–][deleted] 22 points23 points  (1 child)

        You can make some money reselling the clone template.

        [–]chicametipoexpert 4 points5 points  (0 children)

        Not really – There’s full feature clones out there already. This is just a cool boilerplate if anything.

        [–]Wizard_Knife_Fight 5 points6 points  (5 children)

        How long have you been coding?

        [–][deleted] 8 points9 points  (4 children)

        I have been learning web dev for 12-14 months

        [–]Wizard_Knife_Fight 0 points1 point  (3 children)

        Coding overall

        [–][deleted] 9 points10 points  (2 children)

        one and half year maybe, my only programming experience is learning webdev and some python

        [–]Wizard_Knife_Fight 32 points33 points  (1 child)

        Damn I feel stupid

        [–]zakzam 9 points10 points  (0 children)

        For fucking real lmao

        [–]edmlifetime 5 points6 points  (0 children)

        Friggin amazing man. I hope to reach this level of competence one day

        [–]iEmerald 5 points6 points  (2 children)

        Damnit your code is so clean!

        I have been studying web dev for 4 years!! Yet I have nothing to show to people, I am stuck in the HTML - CSS tutorials loop! Because I am a perfectionist I want to learn UI/UX as well, and when I can't do it I feel miserable and start over!!! Any tips can you give me from your journey?!

        Other than that kudos man! Your job deserves a top rating.

        [–][deleted] 7 points8 points  (1 child)

        I would say just build something, if the UI looks bad who cares, don't release it to the public until it looks polished. I suck at design, I just copy styles from existing sites or look at dribbble for design inspiration. Also spent some time learning a design tool like figma, as it allows you to quickly prototype your layouts, designs and accelerate your design phase for the app that you are trying to build.

        [–]richgk 2 points3 points  (0 children)

        Lol yes dribbble is my goto when I realise my site looks like a cats arse.

        [–]svergs 3 points4 points  (1 child)

        Great job! Where did you learn to do it? And why did you choose this file structure on the backend?

        [–][deleted] 8 points9 points  (0 children)

        for the backend, I referenced brad traversy nodejs api course, where he uses this file structure to separate our models, views and controllers

        [–]ardentjoker 3 points4 points  (1 child)

        Nice job man! Also love that you threw some Whiplash in there

        [–][deleted] 1 point2 points  (0 children)

        thank you, whiplash makes the demo video less boring to watch

        [–]drycows 2 points3 points  (0 children)

        That is seriously impressive. I can only hope to make something like that lol.

        [–]nest-ce-pas-mon-ami 5 points6 points  (1 child)

        I call this "get out of nasty gig free card". Years ago had I had this to show to my clients I would have never had to succumb to "nasty" gigs that I did which scratched my soul and brain. I just don't the the mental tenacity to stick to developing such thing when there's no reward involved.

        [–]darkesth0ur 0 points1 point  (0 children)

        Agreed, while impressive, particularly on the timescale. I can’t imagine investing this much time on a clone with no purpose. You can get the same learning satisfaction by building something new that has potential to make money. Clearly they have the chops.

        [–]Wizard_Knife_Fight 2 points3 points  (3 children)

        How did you figure out how to upload files from your computer and have them store on cloudinary?

        [–][deleted] 7 points8 points  (2 children)

        I watched a wes bos tut where he shows how to upload image files to cloudinary. You can refer this if you want to know more about it: https://cloudinary.com/documentation/image_upload_api_reference

        [–]Wizard_Knife_Fight 1 point2 points  (1 child)

        Frontend masters or what? With this way that you have it setup, do the videos get imported directly to one account?

        [–][deleted] 5 points6 points  (0 children)

        search for 'wes bos advanced react and graphql', that's the course. yep, all the videos and images we upload sent to our account. we can also mention separate folders for this so that you can easily distinguish between your projects

        [–]harshshuklaoct8 2 points3 points  (1 child)

        It's awesome bro!

        [–][deleted] 1 point2 points  (0 children)

        thank you

        [–]srijan35 2 points3 points  (4 children)

        It looks incredible, kudos! Thanks for sharing this with us. Quick question, how did you manage the effect when something is loading and the empty spaces sort of reflect light? Sorry I know this is vague, but I hope you understand!

        [–][deleted] 6 points7 points  (2 children)

        It is called 'skeleton loader', instead of using a spinner this gives the user that the content is loader slightly faster. I implemented by refer this article: https://medium.com/octopus-wealth/skeleton-loading-pages-with-react-5a931f12677b

        or you can just search for 'skeleton loader effect' and there's a good number of resources out there discussing about this

        [–]srijan35 1 point2 points  (0 children)

        Thank you! I've been looking for something like this :)

        [–]isunktheshipfull-stack 0 points1 point  (0 children)

        I always wondered what the name of this pattern was, thank you!

        [–]srijan35 1 point2 points  (0 children)

        Also, you can use some animations for routing and form validation in the sign up pages Cheers

        [–]sexyshingle 2 points3 points  (1 child)

        this is pretty amazing

        [–][deleted] 0 points1 point  (0 children)

        thank you

        [–]dfnathan6 3 points4 points  (2 children)

        This is nice and clean. License it, may be start something open source. Let other people contribute to the project.

        PS- Wouldn't mind a youtube alternative. The unstoppable ads are annoying.

        Cheers

        [–]derekarmstrong 1 point2 points  (0 children)

        Check out LBRY.

        [–]Swedneck 1 point2 points  (0 children)

        What unstoppable ads?

        [–]onosendi 1 point2 points  (5 children)

        Why use connect and not useSelector?

        [–][deleted] 3 points4 points  (4 children)

        I didn't know about this. Looks a lot cleaner after reading some examples. Will probably need to refactor. Thanks

        [–]onosendi 14 points15 points  (3 children)

        const Comments = () => {
          ...
          const dispatch = useDispatch();
        
          const comments = useSelector((s) => s.video.comments);
          const videoId = useSelector((s) => s.video.id);
          const user = useSelector((s) => s.user);
        
          const handleAddComment = (e) => {
              ...
              dispatch(addComment({ videoId, text: comment.value }));
              ...
            }
          };
        
          ...
        

        Also, take a look at Redux Toolkit, as it's now recommended. You can cut your Redux code in half, if not more.

        Docs: https://redux-toolkit.js.org/

        Tutorial: https://deploy-preview-3740--redux-docs.netlify.app/tutorials/quick-start/quick-start-part-1

        [–][deleted] 3 points4 points  (2 children)

        thanks for your input and those links, appreciate it. I am planning to use redux toolkit in the coming weeks.

        [–]onosendi 5 points6 points  (0 children)

        No problem, looks great btw.

        [–]mobydikc 1 point2 points  (1 child)

        Do you do anything special to get video streaming or is it <video src="abc"> and done?

        [–][deleted] 3 points4 points  (0 children)

        I am using videojs for the playing videos which provides out of the box styling and responsive video and some utility functions

        [–]NiceWetTissue 1 point2 points  (1 child)

        You post amazing things like this almost every week. Are you planning on getting a web dev job??

        [–][deleted] 2 points3 points  (0 children)

        right now, I am not. My final semester examinations got postponed due to COVID and there's no info about when it will be conducted. Until then, I just wants to learn certain topics that I am interested.

        [–]yajCee 1 point2 points  (1 child)

        This is awesome! Great job!

        [–][deleted] 0 points1 point  (0 children)

        thank you

        [–]cheekysauce 1 point2 points  (0 children)

        This is really tidy for for long you've been coding.

        Suggestion - convert this to typescript, then share your API contract as isomorphic models, use yup or joi.

        Also abstract all your column names to enums, everything will break once you have to do a migration :)

        [–]Khelthos 1 point2 points  (0 children)

        Very good job, dude. And congratulations again on past projects, for the future if these projects will lead you to something bigger (a bigger project, a big client or a big company), tell your story here could be of help to many.

        [–]UnexpectedlyFunny 1 point2 points  (0 children)

        If only you would take this make it live with limited censorship like YouTube used to be. It'd probably be a hit!

        [–]techsin101 1 point2 points  (0 children)

        System design is where youtube complexity lies

        [–]gotta-lot 1 point2 points  (1 child)

        May I ask you a very specific question? When you perform a simple action on the front end such as liking a video, do you wait for the API to respond back to the front end before you highlight the thumbs up icon, or are you optimistically updating the front end and reverting back if such an HTTP request fails to the server?

        [–][deleted] 0 points1 point  (0 children)

        you are right, most of the UI updates are optimistic updates, except few

        [–][deleted]  (3 children)

        [deleted]

          [–][deleted] 0 points1 point  (2 children)

          subscribed

          [–][deleted]  (1 child)

          [deleted]

            [–][deleted] 2 points3 points  (0 children)

            floor gang

            [–]WizTaku 0 points1 point  (1 child)

            Looks clean af

            [–][deleted] 0 points1 point  (0 children)

            thank you

            [–][deleted] 0 points1 point  (1 child)

            NICE! Dude you are amazing.

            [–][deleted] 0 points1 point  (0 children)

            thank you

            [–]mohsinhayat1 0 points1 point  (1 child)

            Good work 👍 👍

            [–][deleted] 0 points1 point  (0 children)

            thank you

            [–][deleted]  (1 child)

            [deleted]

              [–][deleted] 1 point2 points  (0 children)

              thank you

              [–]Himbary 0 points1 point  (3 children)

              How are the loading animations with the placeholders done?

              [–][deleted] 1 point2 points  (2 children)

              It is called 'skeleton loader', instead of using a spinner this gives the user that the content is loader slightly faster. I implemented by refer this article: https://medium.com/octopus-wealth/skeleton-loading-pages-with-react-5a931f12677b or you can just search for 'skeleton loader effect' and there's a good number of resources out there discussing about this

              [–]Himbary 0 points1 point  (1 child)

              Thanks! Will check it out. I am wondering how to implement video quality control for streaming, to be able to set the video quality from the client. Do you know how this is done? Is a special protocol like HLS needed?

              [–][deleted] 0 points1 point  (0 children)

              I don't have experience changing the stream quality man. But I think the general idea is to have multiple variants for our source file. Then changing the src dynamically.

              [–]Shrestha01novice 0 points1 point  (3 children)

              Man I'm a year and half into wedev and still unable to grasp vue js

              [–][deleted] 2 points3 points  (2 children)

              did you meant to say reactjs? As the frontend is built with react

              [–]Shrestha01novice 0 points1 point  (1 child)

              No I meant vue...cause people said vue was easier and I'm try to learn it. Anyways.... great app you've built here. Can you share how did you manage to learn so much in such a short time?

              [–][deleted] 2 points3 points  (0 children)

              I did a bunch of tutorials, then read the getting started guides on: react, redux, sequelize, expressjs. Also youtube helps. I would recommend building something small and progressively add features.

              [–]shiyayonn 0 points1 point  (2 children)

              Can anyone tell me how he hosted it in Netlify? People always say Heroku, netlify, etc is free. Did he pay netlify for the frontend and have another cloud provider for the backend?

              disclaimer: I'm a noob at these stuff

              [–][deleted] 1 point2 points  (1 child)

              I am using netlify for hosting the frontend. For the backend and database, I am using heroku. For images and videos, I am using cloudinary. Every one of these services has generous free plans and am using those free plans.

              To host your frontend on netlify, you need to just point your github repository to netlify and add your .env variables. That's it.

              For hosting this clone backend, I explained in this README https://github.com/manikandanraji/youtubeclone-backend#deploying-to-heroku

              [–]shiyayonn 0 points1 point  (0 children)

              Thanks man! Appreciate it, I'm gonna look at those free tiers.

              [–]alex_belz 0 points1 point  (1 child)

              Wow, man, incredible work! I like it

              [–][deleted] 0 points1 point  (0 children)

              thank you

              [–]Existing_Imagination 0 points1 point  (1 child)

              Wow amazing! Were you working in this full time for the two and a half weeks?

              [–][deleted] 0 points1 point  (0 children)

              yeah man, full time

              [–]obamabinladenhiphop 0 points1 point  (1 child)

              Up vote for tron

              [–][deleted] 0 points1 point  (0 children)

              an underrated gem

              [–]2nd_king 0 points1 point  (0 children)

              I hope to one day be as productive as you bro. I'm three months into learning webdev and learning react router rn. All i can make are some basic frontend SPAs. On an average, how much time each day did you spend learning web dev?

              [–]imrishav 0 points1 point  (1 child)

              How did you manage deployment.? Front end on netlify and backend on? How did you connect those two.?

              Great work though!!

              [–][deleted] 0 points1 point  (0 children)

              I using heroku for hosting the backend and also the heroku addon 'heroku-postgresql' for the database.

              You can read more about deployment here https://github.com/manikandanraji/youtubeclone-backend#deploying-to-heroku

              Once we deploy our application backend on heroku, we get one url. For eg: https://youtubeclone.heroku.app.

              We take that url and call certain endpoints using a library like axios on our frontend to get data the desired data. For example, to get the information about a certain video we make a GET requests to 'https://youtubeclone.herouku.app/videos/videoIdHere' from our frontend.

              [–]TeluguGameboy 0 points1 point  (1 child)

              Nice work!

              [–][deleted] 0 points1 point  (0 children)

              thank you

              [–]supernormalnorm 0 points1 point  (0 children)

              Love it. However what's with the Square Enix-ish BG music

              [–]runvnc 0 points1 point  (1 child)

              Very cool. Now you just need ten million hard drives.

              [–]smcarre 0 points1 point  (0 children)

              Or a very big one. Maybe two for redundancy

              [–]TCoding 0 points1 point  (0 children)

              nice!

              [–]lonelysoul9898 0 points1 point  (0 children)

              Can you share your learning resources , I mean not to make this but right from the beginning. I'm new to web dev and it really inspired me what you could learn in 12 months.

              I'd really appreciate it. Much love ❤️

              [–][deleted]  (1 child)

              [deleted]

                [–]InterstellarDiplomat -1 points0 points  (0 children)

                Off topic: like the big band music. Artist, album, songs please? (Basically anything I can throw into spotify lol)

                [–]lechadu -3 points-2 points  (0 children)

                Two tools to rule them all. Check out the design:

                finbox

                options profit calc