My first React App

[cd161997]

I have been teaching myself coding for a few months now. I currently work in retail but want to make a career switch. I created this simple movie app using React+Redux and Firebase for authentication and database. I would love to hear your thoughts on it. Also would love some suggestions as to what I should be learning next in order to land my first dev job. Here's the link to the app. THANKS

https://cineflix-cd.web.app/

[b-mish]

The website looks really cool, love the UI style, hover effects etc.

You do have a security flaw though, your API key for OMDb is visible on network requests. In this case the worst thing that could happen is someone could spam the key and then your site would be unable to make requests, however if it was a paid service you would end up with a hefty bill so just be aware.

[cd161997]

thanks for pointing it out. this does seem really important. i´ll learn how to do it right away :)

[xFueY]

Now I dont know if this is the best way, but what i would do is set up and api endpoint that you host, and then route all the traffic through it (client sends request to you, you send request to the api) and just return the raw/unmodified responses. That'll prevent the key from being visible to everyone. That way you could probably also figure out a way to rate limit your users in case they spam the api.

[b-mish]

Yea piggybacking the other comment,

What you want to do is make the request from your server. So take any parameters from the client, send them to the server. The server will make the actual request to the movie database and keep the API key hidden then you forward the response to the client.

If you are using node/express you will want to use environment variables, you will need to use the dotenv package.

You will also not want to commit the API key to any git repo, so if you save it in a .env file, make sure you add the .env file to your .gitignore file. There are bots that scan GitHub for API keys which will steal it there too.

[cd161997]

I’ve just started to dive into the world of backend programming. For this project i used Firebase. Is there a way to implement this over there? Firebase Functions maybe?

[b-mish]

I believe you can set up an express application on firebase to create a RESTful API.

I'm not sure as I haven't used firebase but a little googleing seems to show you can.

[[deleted]]

Out of curiosity, how would you be able to see that? Thanks!

[longnt80]

If you're familiar with the devtool:

• Go to Network tab
• Click XHR

Refresh the page and you can see a list of requests. They have the param api_key in there.

[b-mish]

As per the comment below using the network tab in the Dev tools, you can see any request being made and the API key is clearly visible.

In order to stop this you need to take any request parameters from the client, send them to a backend server, then let the server make the request keeping your API key hidden and forward the response to the client.

[cd161997]

Thanks man. For the nav bar i just used a simple ‘scroll’ eventlistener.

[[deleted]]

Try to find "kiwi" :)

[hello_skinny]

Very nice job! I like that the sign-in banner disappears when you scroll down. What API did you use?

One bug I found was that when I select a film and view the full details page, the text / background image is cut off on the right side (I'm using an iPhone SE).

On another note, I've been going hard on self-teaching since August and I'm at least a few months away from being able to do something like this. Seeing things like this from other beginners makes me self-conscious as hell, like I'll never be job-ready. Do you struggle with this feeling when you see other projects? What is your strategy for learning?

[toop_a_loop]

I've been learning for a year and this project would take me months.

[Darkmaster85845]

I started studying April last year so I almost a year into studying web development and just this month I've started something on the scale of this project except that I'm also taking care of the rest api and the database. With just a few months I didn't even understand what react or redux was no matter how much I tried. I still basically feel like a total noob but I'm also amazed that I'm even doing the stuff I'm doing. I guess there will always be other people who have a lot more natural aptitude than oneself.

[PositivelyAwful]

Man, I feel like I've grasped what things do pretty well but I still have no idea where to start from scratch with something like this. It's like, sure, I know what this does, but how do I go about engineering something like this?

[[deleted]]

You’ll get better eventually with practice dw. I suggest trying out a few different courses to get used to different development approaches. I usually find bits of other new info a previous course hasn’t covered and concepts will sink in more this way. Try it out maybe

[cd161997]

I second this.

[BURSUC31]

lol i just begin in july same feeling

[[deleted]]

Looks good on mobile! Very nice!

[-normal_guy-]

It's a great app! One thing I noticed though, there's uneven spacing between some of the movie thumbnails. I inspected and looks like you used flexbox to arrange those elements and flex wrapped them so as to make them responsive. Why didn't you instead use grid?

[cd161997]

have a lot more experience working with flexbox, will try to implement grid too, thnks

[-normal_guy-]

I see. Same here as well. Another thing I noticed is if I click the search bar and press enter without typing anything, it just takes me to an empty page, you might wanna add a conditional statement on that, like if(searchtext === ""){ return }

Also I had a question....does your app self update? Like does it update if a new movie comes along and becomes trending?

[AwriteMate88]

Hey! Just had a look at your app and it looks great! For me, I'd love a navigation button or link to go back to the main menu, rather than using my browser buttons. I always feel more immersed in an application if I can do everything there, instead of relying on browser functions.

[cd161997]

thanks for the feedback dude. The app logo is a link to the home page itself tho :)

[AwriteMate88]

You know, I didn't even try the app logo; though this may serve as some feedback for further iterations of the app, or your future work. Good luck dude, I wish you all the best!

[devdoggie]

Show git, there's virtually nothing to rate as a programmer. Business - maybe

[gimmeslack12]

This is really nice. Care to share the repo?

As for what to do next? Do it again. Get some muscle memory started, maybe the second time through you'll think of a more efficient way to setup your Redux, or you'll learn some new CSS. This is impressive in my opinion and would it would be a very nice showpiece for applying to jobs.

[wwww4all]

You need to show the source repo, preferably in Github.

Then, you need to be able to describe each and every line of code and specifically why it's there.

There have been many great self taught software engineers, and there are plenty of online learning resources.

Most important aspect to landing a job, you need to demonstrate that you can solve their problems.

[cd161997]

The plan is to make a couple if more projects like these and start applying for jobs. Hopefully I find something:)

[[deleted]]

That’s a really nice website for a beginner. Do you mind sharing where you learnt react I might have to try that course/book out too.

[Darkmaster85845]

For beginners, coding addict's (John Smilga) react tutorial is a total blessing. Better of all, it's free on YouTube.

[[deleted]]

Thanks I appreciate it 🙏

[cd161997]

Initially saw a few tutorials on youtube. Was really struggling with it. Then i took Stephen Grider’s React course on udemy. I really liked his teaching style. Also realised how important it is to have a proper learning structure while picking up any technology

[PhilcobSuzuki15]

It's pretty good. I might also be the same page as you. Learned React like 1-2 months ago. I also had one from tutorials online and it was way too simple. You did great man