Coded_by_Stella Business Strategies, Marketing and Web Development designed to attract, engage and win clients.

🚁 Flight Operations Center Dashboard

Prototype presentation: front-end web development demo for aviation and emergency response systems

Description

Front-end prototype for coordinating aerial and wildfire missions with an integrated mission-control interface.

Key Features

• Mission management: create, edit and track missions (Active, Standby, Resolved).
• Geospatial visualization: interactive map built with Leaflet.js and custom markers (🔥 🚁 🟠 🟢).
• Weather readiness: structure ready for weather data to support planning and risk assessment.
• Crew and aircraft assignment: quick-pick to assign helicopters and crews.
• Operational timeline: start and end times for scheduling and resource allocation.
• UI/UX focus: clean, pilot-friendly interface in vanilla HTML/CSS/JS.

Technologies

HTML · CSS · JavaScript · Leaflet.js

View live demo

🛢️ Fuel Depot Map

Prototype presentation: live map for helicopter fuel depots

Description

Client-side prototype to locate, record and update helicopter fuel depots on a live map. It turns scattered notes into a single source of truth for fewer calls, faster decisions and safer operations.

Key Features

• Live map + GPS: auto-centers on your position.
• Barrel markers: quick visual count per site.
• Deposit / Withdraw: log ops with operator and qty.
• Real-time totals: barrels and liters (1 bbl = 200 L).
• Precise coords: copy exact lat/lng in one click.
• History log: timestamped record per operator.
• Local persistence: browser localStorage for demo.

Technologies

HTML · CSS · JavaScript · Leaflet · OpenStreetMap · Geolocation API · localStorage

View live demo

⛅ Live Weather App

Prototype presentation: front-end web development demo for weather and geolocation

Description

Lightweight, responsive weather app with an accessible UI and native geolocation.

Key Features

• City search and geolocation: search with suggestions and native geolocation.
• Live conditions: temperature, feels like, wind, humidity, precipitation, air quality (US AQI).
• 5-day forecast: daily cards with min and max, wind, sunrise and sunset, precipitation.
• Hourly trend: 24 hour sparkline.
• Dynamic background: animated gradients based on current weather.
• UX utilities: unit toggles (°C/°F, km/h/kt), light and dark theme with persistence.
• Accessibility and performance: ARIA roles, optimized contrast, vanilla stack.

Technologies

HTML · CSS · JavaScript · Open-Meteo API

View live demo

🌍 World Clock App

Prototype presentation: advanced front-end demo for real-time time zones and UX

Description

Responsive world clock that shows live time across multiple cities with a clean UI, emoji flags, and a focus on accessibility and performance.

Key Features

• Multi-city grid: Oslo, Tokyo, Rome, Sydney, Madrid, New York, Berlin, Paris.
• Live updates: date and time refresh every second.
• User location: “My current location” via browser timezone detection.
• Single-city view: dynamic render with “Back to homepage” button.
• Flags in cards: Twemoji SVG for consistent rendering across devices.
• UI/UX: accessible hierarchy, responsive layout, subtle shadows and gradients.
• Deployment: optimized build and hosting on Netlify.

Technologies

HTML · CSS · JavaScript · Moment.js · Moment Timezone · Twemoji · Netlify

View live demo

🛡️ Fraud Check Dashboard

AI-powered demo: flag suspicious transactions in seconds

Description

Client-side demo web app that scores transactions as Suspicious or Legit using a lightweight ML model. It turns raw CSVs into decisions, visuals and exportable reports, so risk teams can move faster, avoid losses and stay compliant.

Key Features

• Upload & Predict: drop a CSV and get instant fraud scores.
• Visual highlight: suspicious rows are clearly marked for quick triage.
• One-click export: download a CSV with scores and labels.
• Threshold slider: tune the decision cutoff to balance recall vs. precision.
• Overview chart: clean bar chart of Legit vs. Suspicious counts.
• Auto-setup (cloud): generates sample data & model on first run.

Why it matters

Every company handling digital payments faces the same pain points: fraud drains revenue, manual reviews slow teams and blind spots risk compliance. This demo shows how an AI-driven, easy-to-use tool can flag threats before they become losses and provide auditable outputs for managers and regulators.

Technologies

Python · pandas · scikit-learn · Streamlit · matplotlib

View live demo

✍️ AI Poem Generator

Prototype presentation: multilingual AI poem generator

Description

Client-side app that generates poems in English, Italian or Norwegian based on style, mood and line count. Clean UI with a dark mode toggle.

Key Features

• Language selector: English, Italian, Norwegian.
• Style presets: Free verse, Haiku, Sonnet, Tanka, Limerick, Villanelle, Ode.
• Mood presets: Calm, Joyful, Melancholic, Romantic, Mysterious, Hopeful, Nostalgic.
• Line count: choose how many lines to generate.
• Generate action: one click to create the poem with a live output area.
• Dark mode: instant theme switch.
• UX & Accessibility: responsive layout with clear labels.

Technologies

HTML · CSS · JavaScript · Axios · API · AI

View live demo

🍉 Summer Recipe - SheCodes Challenge

Prototype presentation: UI components and micro-interactions

Description

Desktop-only landing page focused on visual polish and micro-interactions.

Key Features

• Branding and styling: gradients, bold typography, balanced palette.
• Micro-interactions: animated CTA button with hover states.
• Responsive foundations: lightweight code that is easy to adapt.
• Semantic and accessible: readable and maintainable HTML and CSS.
• Vanilla JS enhancements: button interactions and basic behaviors.

Technologies

HTML · CSS · JavaScript

View live demo