Project for React & Redux individual capstone assignment.
The Astronomical Picture of the Day (APOD) app consists of the daily "picture of the day" image or video, provided by the National Aeronautics and Space Administration of the United States (NASA) via its api site { NASA api's }. It's an official service of the goverment of USA, and can be visited at the following link: https://api.nasa.gov/
The APOD app shows a collection of the last 30 images provided by the NASA api. Everyday, at midnight USA eastern standard time (USA East Coast time), a new pictured is added to the collection.
The pictures rendered by the app include images and videos. The app provides the user with a select option, to show a separated list of images or pictures. By default, the app shows the combined list of images and videos, under de option "Both".
Under each image or video displayed there's a button that let the user navigate to a new section containing the complete information provided by the api about the selected image or video.
This information includes the following items:
- Title
- Author (if available)
- Date published (YYYY-MM-DD format)
- Explanation
- Media service
- Service code
- Note on the size of images in the details section: for educational and entertaiment porpouses, the size of the image in this section has been set to a very big size, which lets the user to explore small sections of each image with the scroll of the browser.
The APOD app has been built with React and Redux / Redux Toolkit.
Project will be build according to the following guidelines:
Use React documentation. Use React components. Use React props. Use React Router. Connect React and Redux. Handle events in a React app. Write unit tests with React Testing Library. Use styles in a React app. Use React life cycle methods. Apply React best practices and language style guides in code. Use store, actions and reducers in React.
Major languages: Javascript, HTML, CSS Frameworks: webpack, Jest, React, Redux, Redux Toolkit Technologies used: VSC, Github, Gitflow
Clone the repository in your local machine using git clone.
Please run: npm run build and then npm start to see project displayed in your browser.
To see the project deployed please visit the following link: Live demo link
To see the video presentation of the app, please visit the following link: Video presentation
👤 Author1
-
Dario Alessio
-
GitHub: https://github.com/DarioAlessioR
-
Slack: https://microverse-students.slack.com/team/U039GCFRK9B
-
LinkedIn: https://www.linkedin.com/in/dario-alessio-3a3b7911b
Contributions, issues, and feature requests are welcome!
Feel free to check the issues page.
Give a ⭐️ if you like this project!
- To the NASA for providing the images and videos, as well as the scientific information of each picture.
- To Nelson Sakwa the author of the original design, as required by the Creative Commons License.
- Hat tip to anyone whose code was used
- Inspiration
This project is MIT licensed.