Journey to my first React app

#react #javascript #debug #beginners

Building an app from scratch is much more than how it looks.
It is not that difficult. But for me, as a newbie, it is something difficult.
Let's divide my journey into three parts.

About the Project
Problems I faced and debugged
End

About the Project

We all have been looking for a place where we can sit and enjoy the music. After a hectic day, there is still a place where we can enjoy the peace. For some of us it's a Home, for some it's their loved ones.

Quoting Jiraiya Sensei - A place where someone thinks about you is a place you can call Home.

As we all have gone through a lot in this pandemic. So why not we just relax for a while and have a deep breath and just Relax.....

Problems I faced and debugged

At first, I thought of using the background as a component. But after including other components, they do not overlap. So I Googled this problem and came to know that there are two basic solutions

By using Overlay
By changing z-index

But I was unable to apply both the solution. So I came with a cringey solution i.e. by applying the image in CSS. Then I used background-image : url(/xyz.jpg); in my CSS.And now the components overlap as I wished. It worked fine but a new problem arrived at the same moment. The background image is zoomed to its maximum height and width. To overcome this , I wrote background-size : cover; which I think worked best for me.
Then I made a Navbar component. It worked fine😊.
Then after doing some more code , I thought of an idea💡. Is that - Why don't I make the words coming on the screen more real that someone is typing that sentences? Then I Googled , and the library I used is React Typist. You can also try this on by going to the npm site.
I used that in my Type component. And by reading their documentation , I easily applied that on my App.
Then I put a sound component in my App. And the package I used is react-audio-player from npm. And by applying some changes to the code, now I can see audio bar on my App.

The problem now popped is that I wasn't able to add a URL to the player. I have downloaded a music file on my PC. It is in the same folder where my components are, but passing the file location to the URL is not enough to make the player work.

Programmers ability is - whenever they face any problem in their code. They Google.

And I did the same , some of them says "Use the location of the music as a variable and then use the variable in your code". Actually, it didn't work. 😵
Spending some hours on this problem is making me more and more frustrated. Then I thought of using another package for the same. But I got stuck on the same problem until I realized the basic rule.

During the time of coding if you ever stuck in a problem for a long time. Just think from the start again and ask yourself the 5 W's and H. Then you will definitely find your way.

So again, I did the same, fundamentally what I need - a URL, for what - for using it in my App. So I came with a solution. It might be a legal or illegal thing. I don't know. But a very simple solution i.e.

just google "Download xyz mp3" or from wherever you can download, just go to that download link.😤
Inspect that download link.
That's your URL.

Then after that everything seems fine. But the main problem is still waiting for me. I wasn't aware of that but it is waiting.....⏳

Back to my story,
As everything is working fine till now , So I thought of making my App responsive. Then I started working on @media queries. I wrote pretty well @media queries. After writing @media queries I was sure that this App is not made for portrait phones. Then I thought that why shouldn't I make a prompt that makes the user rotate his/her phone. After that, my brain cells start working on that thing. And again, the first problem arose, that is, my component isn't overlapping. Then I Googled the best way to ask a user to rotate his/her phone. But the answers are for React-native. I was working on React only. So after some more Googling, I came across a package that gets the orientation from the user.use-window-orientation. Goto

Some of you might think - "Ayo, why don't you just use screen.height and screen.width to get the pixels information and do this"

if (screen.width > screen.height ) {
    return landscape;
} else {
    return portrait;
}

Yes, I came up with that solution also, but that was after solving the problem.
So,
In the documentation they explained the use in some other way but I prefer a different technique. I use Conditional Rendering

const { portrait } = useWindowOrientation();
    if (portrait) {
        return <Rotate />
    }
    else {
        return (
            <div className = "Home">
                <Navbar />
                <Type />
                <Music />
            </div>
        )
    }

And that's the solution folks.

End

I was so happy to tell my friend about this problem and I solved it. This is just a basic start of this project, I have many more things to do in this project. For some pro developers, these problems might not count in their problemsList. But I write this article for some newbies like me out there who are still struggling to find their way in their problems.
You can check my github repo for this project.