Readme

Prompt for Earth Meteorite Landing with planning notes

Our client has asked us to build a web application that easily allows them to visualize, filter, and understand trends from the Earth Meteorite Landing dataset from NASA:

• Overview of dataset: Meteorite Landings | NASA Open Data Portal
• Direct link to JSON file: https://data.nasa.gov/resource/y77d-th95.json

Some key features that the client requested:

1. The ability to view the dataset in an organized, sensible way.

   • table view with each field in its own column
   • data sortable by column
   • a way to filter the data
   • added caching for the main page so data doesn't need to be refetched from the API as often.

2. The ability to search for individual meteorites by Name and/or ID.

   • searchable and display results as you type

3. The ability to save a list of their favorite meteorites that persists across browser sessions and tabs.

   • Ran out of time for this section to finish, but there's a favorites list through /api/v1/favorites/earthling that gets the dumy data from the database
   • Has users table with one user
   • Has meteorite_favorites with favorites of that user
   • Creating and deleting favorites
   • Would like a more user friendly way to display favorites in the future like a star or heart and filled in if it's favorited
   • Updated table naming to correct spelling of "meteorite" wherever "meteorite" was used

Other requirements

• Use a modern JS framework (e.g. React or Vue): Uses Next.js with React
• Consistent look and feel: Uses Tailwind CSS
• Responsive: could be better with more time, to display the table in more mobile friendly way
• Uses Material UI: Uses MUI DataGrid with GridToolbar

How to run the testing framework locally

Add the MySQL database and tables

1. Install MySQL if you don't have it on your machine ie via brew install mysql.

2. Unzip the meteorites.gz folder.

3. Setup and connect to a MySQL client such as TablePlus.

   

4. Create the database by adding a new one to the connection called meteorites

   

5. Connect to the database.

   

6. Import the gzipped database contents

   

You should see something like this:

Note: I added some filler data since I ran out of time for creating the POST request portion of the app.

Install the app

This is a Next.js project bootstrapped with create-next-app.

It was installed with npx create-next-app@latest

This app uses Node.js 18.17.1. Make sure you have that first. I added a .nvmrc and .tool-versions depending on if you are using NVM or asdf for the Node.js package manager, so it should work automatically if all goes well.

node --version should return something like v18.17.1.

Next, run this to install the modules:

npm install

Create a .env file and add these variables: Edit the variable values to what you have set.

MYSQL_USER="root"
MYSQL_PASSWORD=""
SOCKET_PATH="/tmp/mysql.sock"

To run the development server:

npm run dev

Navigate to http://localhost:3002

If everything is working, you should see something like this:

Navigate to the Favorites page and you should see something like this if it's working:

In both views you should be able to filter, search, and sort the data.

Geocoordinates on a map

Meteorites by year

Instructions for build steps and deployment packaging.

From the generated version of the Next.js install:

The easiest way to deploy Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out their Next.js deployment documentation for more details.

Future implementations:

• Add automated tests
• Finish adding a way to submit and remove favorites
• Create a user signup system
• Create user login and session
• Provide another way to view data other than just in a table
• Improve table display, especially the Geolocation column
• More mobile-friendly display
• Display as cards
• Display geocoordinates on a map with tooltips
• Display a graph for representing the number of meteorites per year
• A better way to handle when the api is down such as refetching, and displaying a message to the user that the data is temporarily unavailable
• Darkmode enabled