INTERNSHIP

16th ASSIGNMENT

NASA Explorer Web App

This is a React-based web application made to explore NASA's data collection using NASA Open APIs. The idea behind this project was to gain more experience with React, focusing on routing, global state management, custom hooks, and higher-order components (HOC). Emphasis was placed on maintaining clean architecture, high-quality code, and a visually appealing design. The application fetches data about astronomy pictures, Mars rovers, near-Earth objects, and Earth imagery.

Key Features

Full routing support, including a custom 404 page

Smooth navigation

Dynamic data fetching

Animations and interactive visuals

Dark/Light mode toggle

Custom hooks for API requests

Custom higher-order components

Error handling with Error Boundaries

Technologies used

HTML5, CSS3

TypeScript, React

Visual Studio Code

Axios

localStorage

Material-UI (MUI), Google Fonts, Vecteezy (for image sources)

NASA Open APIs

Recharts and Leaflet.js (for data visualization)

Installation and running

To get started with this project, you need to have the following installed on your machine:

1. A modern web browser
2. Visual Studio Code (optional, but recommended)
3. Node.js

Steps to Install the Project:

1. Clone and open the Repository: Open a terminal (or command prompt on your machine) and run the following commands:

   git clone https://github.com/ivonaaaa/Internship-16-NASA.git

   cd Internship-16-NASA

2. Open the project in VS Code: In the same terminal type in this command:

   Code .

3. Install the dependencies: Once you're in the VS Code, open a new terminal and type in this command:

   npm install

4. Set up the environment: Create a .env file in the root of the project and add your NASA API key:

   VITE_NASA_API_KEY=your_api_key_here

5. Run the application: Start the app by running the following command:

   npm run dev

   Open the provided link in your browser to view the application.