Heroku Link: https://spacestagram-joao.herokuapp.com/
All the topics in this README: * Development * Fetch data from NASA’s API * Responsive Design * Logic and Details * Testing with Jest * Conclusion and Learning Outcomes
To fetch data from Nasa's API, I am using Axios that is a promise-based HTTP client that facilitates to use API, basically works doing HTTP requests to fetch data, so we can display all in the information on the screen.
The NASA_KEY is coming from a .env file, and the params are:
thumbs: If the content type is a video from youtube, we can get just the Thumbnail url.
start_date: Today date -10 days converted to YYYY-MM-DD
end_date: Today date converted to YYYY-MM-DD.
After getting the data from a specific range, we need to revert the order of the result, for the user see the most recent posts first.
After this, we should be able do the API pagination, to get a limited amount of data from the API, this is important for some reasons:
-Don't over request data from the API;
-Don't force the user wait too much for all the requests;
-Infinite scroll possibility.
For the Infinite scroll, I am using a open-source library for ReactJS called InfiniteScroll.
Data.lenght will be updated everytime that we do a new request, ManipulatePosts is doing more requests based onde the last start_date request.
The spacestagram is completely responsive, designed first in the mobile version, than transferred to the desktop size screen.
I will explain how I had the solution for some functions:
The like button is developed using a Heart of just css and that is saved in the local storage when the user clicks in a Heart(Like), and every time that the application is used the code will check and list all the liked posts by their date that is unique in this API.
Loading is created by using the useState functionalitty of React, where we can change the state from true to false. So after the user is completely fetched we can change the state of loading to false and then the screen will change.
The loading in the "timeline" is completely done using the InfiniteScroll library.
To make sure that everything is working properly in my application, I am doing Unit Tests using the javascript framework Jest, that make me able to test my functions and mainly the API requests and responses, and to make sure that my code is working fine.
Here is an example: The nasa API has a object called "status" that checks if the user is not using a wrong parameter or key, if the status is equal 200 everything is working fine, if 403 the request has a problem.
I had a lot of learning outcomes in this project, I developed more my skills with ReactJS, I increased my knowledge on how to handle API and how to fetch and API and use this data to render something on the screen, increased my knowledge of modular programming and had the opportunity to do Unit Tests mainly in the API to make sure that everything is working properly and have a more consized code.
In general, this project was great for me, I learned things, I developed more skills and was really fun to do it.