The image below is the final interface after every issue was solved.
It was a late night at my end when I got the below message from a friend via discord
Did you figure out about cloning from Github? I am also having a problem now.
Did you follow any tutorials?
I already did npm install react-scripts --save and whatever the online suggested but I still can't use npm start
it's showing me 'react-scripts' is not recognized as an internal or external command, do you know how to solve it?
My reply was to clone the repo at my end in the morning. Since I have worked with cloning a Github repo before now, I never thought I would encounter any issue.
Morning came and I faced it! Errors upon Errors. But I was able to figure it out at my end. Below are the steps taken
Setting Up An Environment Before Cloning
- I created a folder with
mkdir youtube-clone - I cloned the repo she provided with
git clone https://github.com/safak/youtube.git
After successfully cloning it, I noticed the project files are the same as what she showed me last night.
At this point, I knew those files aren't valid React app files. And since the files look exactly like a JavaScript project, I decided to open it with a Live Server. It compiled and ran as expected.
But I knew she was working on a React project and not JavaScript. So, I decided to examine the repo properly on GitHub. Then, I noticed that the repo has 28 branches. These branches represent a different YouTube tutorial by the repo owner.
Before she messaged me, she had told me she was working on a portfolio project via a React Portfolio tutorial on youtube. So, I decided to search for it among the 28 branches. And Yes.! I found two results. React-portfolio and React-portfolio-website.
I went back to my gitbash to navigate to one of those branches.
While I was still on the clone directory, I navigated to React-portfolio-website with this command git checkout react-portfolio-website then, Vscode displayed the react files as you can see from the image below.
Starting the project with npm start returned this error 'react-scripts' is not recognized as an internal or external command, operable program or batch file. This was the exact error she talked of last night.
However, instead of trying to install react-scripts, I decided to run npm install and this took about 2mins to complete.
Now, starting the project with npm start open the project on my localhost:3000 with this error
./src/components/intro/Intro.jsx Module not found: Can't resolve '../../img/me.png' in 'C:\Users\HP\desktop\youtube\src\components\intro
From the error above, I could tell the compiler failed to find me.png. Instead of searching around for the me.png file on the repo, I duplicated the start.png file. One of the available images I found on the Img path. I renamed the duplicate from star.png to me.png.
Saving the project with Ctrl S refreshed my localhost:3000 into a webpack error page. I got shocked if this was going to be another problem? 😂. Instead of panicking or Googling a webpack error page, I manually refreshed the page on my browser with Ctrl R and Vwa-Lah, Wa-Lah, Wa-La!!! It worked.