React-Web Api-Nasa

Final Course Project. Consuming several Nasa APIs.

---

Thank you very much to the Adecco Foundation for believing in us.

And thanks also to the technical training deployed by General Assembly

• This article is written in English but you can see its version in Spanish

• Demo

• If you want to see the demo of this project deployed, you can visit API-NASA project Demo

• We have decided to work as a team as a practice of collaborative work in Web development.

• project by Claudia Muñoz García y Eduardo Cabrera Blázquez

• If you want to see the principal initial wireframe of this project, you see here INITIAL WIREFRAME

• First meeting between Claudia and Eduardo HOW TO START

• Project Considerations and Acknowledgements in PDF format PDF

Click on the Nasa logo to learn more about APIs

Hooks and technologies used in this React Bundle

• Hooks used: useState, useReducer, useRef, useEffects

• As appropriate, we have used Frameworks or libraries like MapBox, Bootstrap, Animate.js, @material-ui/core, o react-zoom-pan-pinch, chart.js, firebase-Firestore

• We have used our own CDN (Cloudinary) to host the project's media, although we also have access to our own Google Cloud Storage.

• We have used Screenpresso software as our preferred digital tool for creating and editing our wireframes.

---

---

In this exercise, the API-NASA of the astronomical image of the day is called. It will also be possible to visualize on maps both the current position of the international station as well as the API that Nasa has Nasa to record locations of known meteorites.

---

---

One of the challenges we have had to face relates to the paradigm shift we had been accustomed to Vanilla Javascript programming. We, like many React developers, have had to move from class-based components to function-based components with React hooks. to function components with React hooks we have had to come to terms with the fact that state updates using objects are no longer automatically merged.

Example Apod Json Api-Nasa

- Color Theory

It is important to know a little about the psychology of color, and above all:

- Search for balanced colors: to achieve this, we respect the chromatic range of the chosen palette.
- We have tried not to use or abuse other colors, so as not to transmit a feeling of disorder..

======= Proyect Web development 2022

Code Routes

root.render(
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<App />} />
      <Route path="Main" element={<Main />} />
      <Route path="Meteors" element={<Meteors />} />
      <Route path="MapsMeteors" element={<MapsMeteors />} />
      <Route path="Iss" element={<Iss/>} />
      <Route path="MapsEstacionIss" element={<MapsEstacionIss />} />
      <Route path="*" element={<Error404 />} />
    </Routes>
  </BrowserRouter>,
);

reportWebVitals();

several unit tests performed

Private and protected Mapbox password (If you Fork the project you need to get your own)

mapboxgl.accessToken = process.env.REACT_APP_API_KEY;

Snapshot of the main url

Sample International Station Route (Minimum viable product)

Snapshot of the Meteors Url (Minimum viable product)

Snapshot of the fire registration Url (Minimum viable product)

Snapshot of the favorite data hosted in Google Cloud

snapshot of visitor logs and statistics (chart.js component)

Commits and time employed

audio of presentation in english

presentation.mov