NASA Image Library Search and Deployment

• Implemented keyword-based querying via the /api/search endpoint to fetch 6 decades of mission photography.

• Built a search bar component allowing the user to query for images dynamically by keyword.

• Rendered search results in a responsive grid featuring high-resolution thumbnails, mission titles, centers, and dates.

• Configured build scripts and deployed the full-stack web app live to Vercel at https://nasaspaceexplorervsm.vercel.app/ Click here to see

NASA Image Library Search and Deployment

• Implemented keyword-based querying via the /api/search endpoint to fetch 6 decades of mission photography.

• Built a search bar component allowing the user to query for images dynamically by keyword.

• Rendered search results in a responsive grid featuring high-resolution thumbnails, mission titles, centers, and dates.

• Configured build scripts and deployed the full-stack web app live to Vercel at https://nasaspaceexplorervsm.vercel.app/ Click here to see

NASA EPIC Earth Imagery Integration

• Created @app.route("/api/epic") an endpoint that parses the date parameter and validates input against the YYYY-MM-DD format.

• Built _fetch_epic_images() to query the EPIC API from NASA and parse the full PNG, including year, month, and day path components.

• Wrapped raw API calls inside a _cached() helper function with a 24-hour cache TTL to lower redundant external API requests.

• Added a date selection input with a Show Images button and responsive grid to display all earth images.

NASA EPIC Earth Imagery Integration

• Created @app.route("/api/epic") an endpoint that parses the date parameter and validates input against the YYYY-MM-DD format.

• Built _fetch_epic_images() to query the EPIC API from NASA and parse the full PNG, including year, month, and day path components.

• Wrapped raw API calls inside a _cached() helper function with a 24-hour cache TTL to lower redundant external API requests.

• Added a date selection input with a Show Images button and responsive grid to display all earth images.

Added Near-Earth Object Asteroid Tracking

• NASA NeoWs API Integration: Querying NeoWs (Near Earth Object Web Service) REST API to fetch real-time close-approach asteroid telemetry for that day.

• Real-Time Metrics Parsing: Extracting important astronomical data attributes, including estimated maximum width, velocity, and miss distance.

• Sorting & Filtering: Manipulating API payloads to dynamically determine hazardous status badges and sort incoming asteroids by nearest distance.

• Metric UI Components: Created a CSS-styled list view with hazard badges and a starry background overlay

Added Near-Earth Object Asteroid Tracking

• NASA NeoWs API Integration: Querying NeoWs (Near Earth Object Web Service) REST API to fetch real-time close-approach asteroid telemetry for that day.

• Real-Time Metrics Parsing: Extracting important astronomical data attributes, including estimated maximum width, velocity, and miss distance.

• Sorting & Filtering: Manipulating API payloads to dynamically determine hazardous status badges and sort incoming asteroids by nearest distance.

• Metric UI Components: Created a CSS-styled list view with hazard badges and a starry background overlay

NASA Space Explorer Architecture Setup

Frontend Structure

• User Interface: index.html serves as the entry point for the user in the browser, styled via style.css.
• Core Logic: main.js handles user interactions, renders NASA data onto the browser, and routes API requests to the backend.

Backend Integration

• Flask Server: Flask app.py acts as the core app router, exposing endpoints for /api/apod, /api/asteroids, /api/epic and /api/search.

• nasa_api.py manages external API communication.

NASA APOD to Web

• APOD API Integration: Fetched NASA’s Astronomy Picture of the Day data dynamically to display the latest space image, date, etc.
• Parallax Scrolling Effect: Implemented multi-layered star parallax scrolling where stars in the background move slowly and smoothly.
• Shooting Star Animation: Designed a dynamic shooting star animation. This was when I took a little help from AI.
• Full Image Model: Added a “Full Image” button that opens a full-resolution image.

NASA APOD to Web

• APOD API Integration: Fetched NASA’s Astronomy Picture of the Day data dynamically to display the latest space image, date, etc.
• Parallax Scrolling Effect: Implemented multi-layered star parallax scrolling where stars in the background move slowly and smoothly.
• Shooting Star Animation: Designed a dynamic shooting star animation. This was when I took a little help from AI.
• Full Image Model: Added a “Full Image” button that opens a full-resolution image.

NASA Space Explorer Architecture Setup

Frontend Structure

• User Interface: index.html serves as the entry point for the user in the browser, styled via style.css.
• Core Logic: main.js handles user interactions, renders NASA data onto the browser, and routes API requests to the backend.

Backend Integration

• Flask Server: Flask app.py acts as the core app router, exposing endpoints for /api/apod, /api/asteroids, /api/epic and /api/search.

• nasa_api.py manages external API communication.

Authentication, Security, and Editor Enhancements

Authentication & Session Management

• A new interface allows user to securely register and login to M2H.
• Authentication is handled via JSON Web Tokens (JWT) stored at local-storage, making sure user sessions are secure.
• The Nav Bar have been updated with interaction based on whether the user is logged in or not.

Enhanced Security & Backend

• HTML scrubbing via bleach to prevent XSS attacks
• Added flask-limiter and CSP/HSTS for API protection

Deployment

• The app is now deployed and accessible live on vercel. Check the App

Authentication, Security, and Editor Enhancements

Authentication & Session Management

• A new interface allows user to securely register and login to M2H.
• Authentication is handled via JSON Web Tokens (JWT) stored at local-storage, making sure user sessions are secure.
• The Nav Bar have been updated with interaction based on whether the user is logged in or not.

Enhanced Security & Backend

• HTML scrubbing via bleach to prevent XSS attacks
• Added flask-limiter and CSP/HSTS for API protection

Deployment

• The app is now deployed and accessible live on vercel. Check the App

UI & Markdown Upgrades

UI Refinement and Alignment Fixes

• Fixed padding and margin inconsistencies between the editor and toolbar.
• Changed the layout to be balanced and more comfortable for dual writing and previewing.
• Improved spacing to make the editor look good in light and dark modes, reducing eyestrain.

New Formating Toolbar

• Bold, italicise, or strike-through text without the hassle of syntax typing.
• Now you can create document hierarchy and quickly highlight snippets with new Heading, quotes, etc.
• Organize ur throughts with the new bulleted and numbered list option all with one click.

UI & Markdown Upgrades

UI Refinement and Alignment Fixes

• Fixed padding and margin inconsistencies between the editor and toolbar.
• Changed the layout to be balanced and more comfortable for dual writing and previewing.
• Improved spacing to make the editor look good in light and dark modes, reducing eyestrain.

New Formating Toolbar

• Bold, italicise, or strike-through text without the hassle of syntax typing.
• Now you can create document hierarchy and quickly highlight snippets with new Heading, quotes, etc.
• Organize ur throughts with the new bulleted and numbered list option all with one click.

Building Live Preview

• Added a synchronized real-time preview rendering so MD Formats immediately get a preview HTML Content
• Automatic ID Assignment for headings such as # This is HI which render with anchor tags like {#17} automatically.
• Implemented real-time line, word, character and counts alongside an estimated reading time.
• The Document progress automatically store in localStorage to prevent data loss.

Building Live Preview

• Added a synchronized real-time preview rendering so MD Formats immediately get a preview HTML Content
• Automatic ID Assignment for headings such as # This is HI which render with anchor tags like {#17} automatically.
• Implemented real-time line, word, character and counts alongside an estimated reading time.
• The Document progress automatically store in localStorage to prevent data loss.

Building M2H UI

• Developed a clean split view layout with line numbering, a real-time input canvas for MD, and a synchronized live preview panel, which will be implemented in a feature.
• Added quick buttons to copy HTML code, download the code, clean this MD, and finally switch between themes.
• Added a line, word, character counter and estimated reading time (future backend implementation is required)

Building M2H UI

• Developed a clean split view layout with line numbering, a real-time input canvas for MD, and a synchronized live preview panel, which will be implemented in a feature.
• Added quick buttons to copy HTML code, download the code, clean this MD, and finally switch between themes.
• Added a line, word, character counter and estimated reading time (future backend implementation is required)