NASA Space Explorer 🚀

Version 2.1.4 - UI Improvements & Enhanced Readability Release

A full-stack web application that showcases NASA's space data through modern web technologies. This interactive platform provides access to stunning space imagery, Mars rover photos, Near Earth Object tracking, and more.

🌟 Features

Core Features

Space Mission Control Dashboard - Clean, space-themed interface with real-time data widgets
Astronomy Picture of the Day (APOD) - Daily featured space images with calendar navigation
Mars Rover Photo Gallery - Explore photos from Curiosity, Opportunity, Spirit, and Perseverance with advanced filters
Near Earth Objects (NEO) Tracker - Real-time asteroid tracking with interactive data visualizations

Advanced Features (v2.1.0)

Infinite Scroll - Seamless browsing experience in Mars Rover gallery
Favorites System - Save and organize your favorite space discoveries with persistent storage
Interactive Data Visualizations - Advanced charts for NEO data using Recharts
- Hazard classification pie charts
- Size distribution bar charts
- Velocity distribution line graphs
- Size vs Distance scatter plots
Smart Navigation - Favorites counter badge and dedicated favorites page
Comprehensive Logging - Daily rotating log files with configurable levels
Version Tracking - Automatic version management across frontend and backend

UI/UX Improvements (v2.1.4)

Horizontal Filter Layouts - Moved all filter components from sidebars to horizontal layouts for better space utilization
Enhanced Readability - Improved font colors and contrast ratios across all components
Custom Color System - Professional color palette for risk assessment:
- Low Risk: #076041 (Dark Forest Green)
- Medium Risk: #a6841b (Dark Gold)
- High Risk: #851313 (Dark Burgundy Red)
White Background Overlays - Semi-transparent white backgrounds for better content readability
Responsive Design - Optimized layouts for mobile and desktop viewing
Accessibility Improvements - Better contrast ratios and ARIA attributes

Technical Highlights

Modern React 18+ with TypeScript
Express.js backend with NASA API integration
Responsive design with Tailwind CSS and space-themed UI
Real-time data caching and optimization
Performance-focused architecture with lazy loading
Intersection Observer API for infinite scroll
Local storage for favorites persistence

🛠️ Tech Stack

Frontend

React 18+ with TypeScript
Tailwind CSS for styling
React Query for data fetching and caching
Recharts for data visualization
React Router v6 for navigation
React Intersection Observer for infinite scroll
Axios with interceptors for API calls

Backend

Node.js with Express
TypeScript
NASA Open APIs integration
Winston for logging with daily rotation
Helmet.js for security
CORS with proper configuration
Compression and caching strategies
Environment-based configuration

🚀 Quick Start

Prerequisites

Node.js 18+ and npm
NASA API Key (get one free at https://api.nasa.gov/)

Installation

Clone the repository:

git clone https://github.com/TonyCasey/nasa-explorer.git
cd nasa-explorer

Install all dependencies:

npm run install:all

Set up environment variables:

# Backend (.env in backend folder)
cp backend/.env.example backend/.env
# Edit backend/.env and add your NASA API key

# Frontend (.env in frontend folder)
cp frontend/.env.example frontend/.env
# Edit frontend/.env if needed

Start the development servers:

# Terminal 1 - Start backend
cd backend
npm run dev

# Terminal 2 - Start frontend
cd frontend
npm start

The application will be available at:

Frontend: http://localhost:3001 (or 3000)
Backend API: http://localhost:5000

📁 Project Structure

nasa-space-explorer/
├── frontend/               # React TypeScript application
│   ├── src/
│   │   ├── components/    # Reusable UI components
│   │   │   ├── Navigation.tsx
│   │   │   ├── PhotoGallery.tsx
│   │   │   ├── NEOChart.tsx
│   │   │   ├── FavoriteButton.tsx
│   │   │   └── ...
│   │   ├── pages/        # Page components
│   │   │   ├── Dashboard.tsx
│   │   │   ├── APOD.tsx
│   │   │   ├── MarsRovers.tsx
│   │   │   ├── NEOTracker.tsx
│   │   │   └── Favorites.tsx
│   │   ├── services/     # API service layer
│   │   │   ├── api.ts
│   │   │   ├── nasa.service.ts
│   │   │   └── favorites.service.ts
│   │   ├── hooks/        # Custom React hooks
│   │   │   └── useFavorites.ts
│   │   ├── types/        # TypeScript type definitions
│   │   └── utils/        # Utility functions
│   │       ├── logger.ts
│   │       └── version.ts
│   └── public/           # Static assets
├── backend/              # Express API server
│   ├── src/
│   │   ├── routes/      # API route handlers
│   │   ├── services/    # Business logic and NASA API integration
│   │   ├── middleware/  # Express middleware
│   │   └── utils/       # Helper functions
│   │       ├── logger.ts
│   │       └── version.ts
│   └── dist/            # Compiled JavaScript
├── shared/              # Shared types and utilities
├── scripts/             # Build and utility scripts
│   ├── version.js      # Version management
│   └── update-version.js # Version sync script
├── logs/               # Application logs (auto-generated)
└── docs/               # Project documentation
    ├── TODO.md         # Project roadmap and tasks
    └── CLAUDE.md       # AI assistant instructions

📡 API Documentation

Base URL

http://localhost:5000/api/v1

Core Endpoints

Astronomy Picture of the Day

GET /api/v1/apod
GET /api/v1/apod?date=YYYY-MM-DD

Mars Rover Photos

GET /api/v1/mars-rovers/photos
Query params:
  - rover: curiosity | opportunity | spirit | perseverance
  - sol: Mars day (integer)
  - earth_date: YYYY-MM-DD
  - camera: FHAZ | RHAZ | MAST | CHEMCAM | etc.
  - page: Page number for pagination

Near Earth Objects

GET /api/v1/neo/feed
Query params:
  - start_date: YYYY-MM-DD
  - end_date: YYYY-MM-DD

Health Check

GET /api/v1/health

🧪 Development

Available Scripts

Root Level

npm run version:sync    # Sync version across all packages
npm run version:bump    # Bump version number
npm run install:all     # Install all dependencies

Frontend

npm start               # Start development server
npm run build          # Build for production
npm test               # Run tests
npm run lint           # Run ESLint
npm run type-check     # TypeScript type checking

Backend

npm run dev            # Start development server with hot reload
npm run build          # Compile TypeScript
npm start              # Start production server
npm run lint           # Run ESLint
npm test               # Run tests

📊 Performance Targets

Lighthouse Score: > 90
Core Web Vitals:
- LCP: < 2.5s
- FID: < 100ms
- CLS: < 0.1
Bundle size: < 500KB (gzipped)
API response time: < 500ms (cached)

🎯 Project Status

Completed ✅

Week 1 (Days 1-7)
- Project setup and foundation
- NASA API integration
- Core UI components
- Space Mission Control Dashboard
- APOD Gallery with calendar
- Mars Rover photo gallery
- NEO Tracker with basic visualization
- Comprehensive logging system
Week 2 (Days 8-10)
- Infinite scroll implementation
- Favorites/bookmark system
- Advanced data visualization charts
- Version management system

In Progress 🚧

Search and filter capabilities enhancement
Social media sharing functionality
Earth imagery (EPIC) feature
Space Weather dashboard

Planned 📋

Unit tests (>80% coverage)
E2E tests with Playwright
PWA configuration
AI-powered features
Performance optimizations
Production deployment

🤝 Contributing

Fork the repository
Create your feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add some amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

📝 License

This project is built for educational purposes as part of the Bounce Insights coding challenge.

🙏 Acknowledgments

NASA Open APIs for providing amazing space data
The open-source community for the amazing tools and libraries
All contributors and testers

Built with passion for space exploration and modern web technologies 🌌

Latest Build: v2.1.4 - August 17, 2025

📈 Recent Updates (v2.1.4)

UI Improvements Session - August 17, 2025

✅ Layout Optimization - Converted all filter sidebars to horizontal layouts
✅ Readability Enhancement - Improved font colors and contrast across NEO cards
✅ Custom Color System - Implemented professional risk assessment colors
✅ Spacing Improvements - Added proper padding to image cards
✅ Version Display Fix - Corrected footer build number display
✅ Accessibility - Enhanced contrast ratios and ARIA attributes
✅ Production Deployment - All changes live on Vercel and Heroku

Live URLs:

Frontend: https://nasa.tonycasey.dev/
Backend: https://nasa-server.tonycasey.dev/

Name		Name	Last commit message	Last commit date
Latest commit History 55 Commits
.github		.github
backend		backend
docs		docs
frontend		frontend
scripts		scripts
shared		shared
.gitignore		.gitignore
CLAUDE.md		CLAUDE.md
DEPLOYMENT.md		DEPLOYMENT.md
Folder.DotSettings.user		Folder.DotSettings.user
Procfile		Procfile
README.md		README.md
codecov.yml		codecov.yml
eslint.config.mts		eslint.config.mts
package-lock.json		package-lock.json
package.json		package.json
playwright.config.ts		playwright.config.ts
qodana.yaml		qodana.yaml

TonyCasey/nasa-explorer

Folders and files

Latest commit

History

Repository files navigation

NASA Space Explorer 🚀

🌟 Features

Core Features

Advanced Features (v2.1.0)

UI/UX Improvements (v2.1.4)

Technical Highlights

🛠️ Tech Stack

Frontend

Backend

🚀 Quick Start

Prerequisites

Installation

📁 Project Structure

📡 API Documentation

Base URL

Core Endpoints

Astronomy Picture of the Day

Mars Rover Photos

Near Earth Objects

Health Check

🧪 Development

Available Scripts

Root Level

Frontend

Backend

📊 Performance Targets

🎯 Project Status

Completed ✅

In Progress 🚧

Planned 📋

🤝 Contributing

📝 License

🙏 Acknowledgments

📈 Recent Updates (v2.1.4)

UI Improvements Session - August 17, 2025

Code Coverage

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Contributors 2

Uh oh!

Languages

Packages