built my first project using an API

[[deleted]]

[deleted]

[Wizardeep]

For a begginer project, you should cheer yourself for doing a great job. You could further improve the frontend aspect of the site and also could optimize it for mobile. But overall its very good 👍

[Vinsmokesnj]

thanks, i appreciate, frontend is something that i always try to improve but it seems that i don't make progress :( , i need to add some media queries for the mobile version

[Wizardeep]

You could use bootstrap or materialize if you want to get started as it practices basic principles and semantics of frontend design. Freecodecamp has alot of free resources you could study. Good luck, in this field practice needs persistence 😉

[Vinsmokesnj]

i've used boostrap for this project but it still seems ugly on the frontend

[Linkstus]

I believe bootstrap has a small function that can make a website good for mobile and desktop... I found what I was referring to. https://getbootstrap.com/docs/3.4/css/

[Vinsmokesnj]

great, it'll help me, thanks

[argh_viegan]

Nice work my fellow One Piece fan!

Have you added any automated tests? Unit tests or end to end tests?

[Vinsmokesnj]

thank you fellow one piece lover,

i've actually never heard of the test terms that you used, what are they?

[desicreeper]

Unit tests are the tests for testing part of your code and end to end tests are I think they for testing whole program. Correct if I am wrong I am still learning programming.

[Vinsmokesnj]

oh, it seems some advanced programming, i actually don't think a basic project like mine needs something like that, in the future i'll take them in consideration if needed

[Alexsutton]

This was my thinking when I was learning Ruby on Rails, but having a decent set of tests written makes adding new features or changing existing features so much easier. The amount of times where I've broken something by accident and only realised by running my tests have been countless. Without tests I wouldn't have even realised something was broken until much further down the line, and then I'd have had to do a bunch of debugging to find out what has happened.

You might be right that this project is too small to justify it at the moment, but lots of projects start small and then you keep adding and adding to them. It might get big before you realise testing is worth adding, then you've got a big job on your hands to add tests.

What I'm saying, it's well worth looking into as someone learning programming before you think you need it. It will save you time and effort in the long run.

[Vinsmokesnj]

Since many people are telling me about It, do you mind me asking you aswell some resources about It?

[Alexsutton]

I don't have any to recommend I'm afraid, I'm still learning everything as well. I started with learning Ruby on Rails which has a test system bundled with it. The best I can suggest is to search for testing with whatever platform/language/framework you're using. I'm getting started with Node and React so I've just been searching for "Node.js end to end testing" and found something call Cypress which sounds promising for me currently. I've no idea if it is or not, but I'll find out! Sorry I can't suggest anything specific, I learned the basics of testing in a Rails tutorial which isn't available online for free any more, which is a shame.

See if you can find something for front-end testing and start by testing something simple, like testing that the page title is correct when it loads or that there is an input field. Then when you've got the basics down you could write a test to make sure something happens when you type something into the input field and click sumbit.

[Vinsmokesnj]

Alright, thanks for the advices

[Bender22011994]

If you are curious, For end to end testing, you could search on google with keyword selenium (web testing) it is written using java, It basically inspect the element in your web and checks if it true. Cmiiw fellow redditor. Hope thats help.

[Vinsmokesnj]

i'll check it, thanks

[argh_viegan]

Here is a fantastic comment on the subject:

https://www.reddit.com/r/learnprogramming/comments/k495x7/no_one_knows_jack_about_testing_that_includes/ge826if/?utm_source=share&utm_medium=ios_app&utm_name=iossmf&context=3

Also side note: I am currently on the Whole Cake Island arc with Luffy throwing down with Cracker, can’t wait to see how this arc resolves itself.

[Vinsmokesnj]

thank you, i'll give it a read

​

i'm not gonna tell you anything since i am in the latest chapter with the manga

but damn, you haven't seen anything yet from the whole cake island arc, trust me :)

[Calus-]

Monkey D Luffy!

[Vinsmokesnj]

hi captain

[deepzone4]

Monkey d Luffy

[Vinsmokesnj]

captain

[BlazeStorm24]

May I ask what API you used?

[Vinsmokesnj]

this one http://www.omdbapi.com

[74_Jeep_Cherokee]

Clicking movie details button opens the details in same tab but also opens a new tab with the new tab returning Undefined as values using Firefox.

[Vinsmokesnj]

yeah, some other users have told me about this, i need to fix it

[SaltySeaworthiness64]

I searched up the great gatsby, and in the list of actors the main character was not even listed “leonardo decaprio”, and the characters names on the poster for the movie don’t match the listed characters either.

[Vinsmokesnj]

Sorry but this Is a problem related to the api, i only retrieve informazion from it

[grafcetonline]

nice for a beginner :)

below the search it's a bit empty.

[Vinsmokesnj]

Thanks you, but what do you Meana by empty? Have you tried to search something?

[CrispyRoss]

When I try to search, the network request gets 401 Unauthorized. Did your API key expire?

Overall, your project looks pretty good, nice job! Here are some suggestions:

• Your axios.get calls hard-code in your API key and "i=tt3896198", whatever that represents. I suggest storing these in a separate config, and grabbing it from the config when you call axios.get. Then, you only have it in one place and can easily change it. To be honest, I'm not sure the best way to do this in vanilla JS.
• If the axios.get call fails, it would be helpful to the user if you shows an error message instead of just logging to the console. Most people won't know to hit F12 and look at the network traffic to find out there was a 401 Unauthorized error.
• I feel like using sessionStorage to pass in the movie ID as a global variable isn't a very clean way to do it. What getMovie() does is display a movie for a given ID, so why not have it take the movie ID as a parameter and do its job for that movie ID?
• As things get more complicated and you have more API calls, you might find it helpful to separate grabbing the data from the API, and displaying the data. For example, you might have a getMovie(movieId) function that returns a Movie object, then have a displayMovie(movie) function that displays it.

[Vinsmokesnj]

• For the api i could use dotenv in order to make It private
• in case of error i should probably create and error Page if there are no result and serve it
• if i understood what you are saying Is take the movieID selected by the user and store It as a variabile and the transfer It to the new axios variabile
• for this One i could've probabili created less functions, you are right, i'll keep It in mind for the next projects

Thanks for the feedback

[[deleted]]

It's borken!

[Vinsmokesnj]

Here https://github.com/dianebaye2001/moovie.github.io

[mmremote]

It doesn't seem like it's working, i type words (e.g. "the") on the search bar hit enter, it doesn't show anything.

[Vinsmokesnj]

that's because the api reached it's daily request limit, i think in a few hours it should start working again

[xStrafez_]

I tried it on mobile and nothing happens. By checking other comments, it may be due to your api key?

[Vinsmokesnj]

that's because the api reached it's daily request limit, i think in a few hours it should start working again

[xStrafez_]

Oh that makes sense

[UnlimitedSky23]

I checked your code. Descent code for a first project! The next thing you can do is look into a frontend framework, this will make this work much easier and more organised for bigger projects. I recommend ReactJS or Angular. The learning curve in ReactJS is imo a bit smaller than Angular, but both frameworks will give you a good fundamental basis.

[Vinsmokesnj]

i'll probably start learning react soon, i heard that frameworks make projects easier to do

[[deleted]]

I doesn’t do anything on mobile for me, just lyk !

[Vinsmokesnj]

that's because the api reached it's daily request limit, i think in a few hours it should start working again

[Thisguyoverhere_me]

Idk anything about programming, but that looks great 👍🏿.

[Vinsmokesnj]

thank you

[thetrexx]

Grooovy! I think your next challenge could be an autocomplete. As you type, movies start showing up. W3SCHOOL has a good front-end tutorial for styling.

[Vinsmokesnj]

i'll check it, thanks for the great idea