Star Wars API
An interactive web app powered by SWAPI that lets users explore Star Wars characters and the films they appear in through dynamic, no-refresh content updates.
Overview
This project was built as an interactive data-driven application using the Star Wars API (SWAPI). The objective was to create a responsive and engaging interface that demonstrates modern JavaScript workflows, real-time API integration, and smooth animation. Users can browse characters and instantly view related film details without reloading the page.
My Role
- Designed and developed the complete application independently.
- Integrated SWAPI endpoints and managed asynchronous data handling.
- Built front-end layout and responsive behavior across breakpoints.
- Made UI and UX decisions for interaction flow and readability.
- Implemented animation and interaction polish using GSAP.
Key Features
Character List: The interface presents 10+ Star Wars characters in a clean, clickable list that acts as the main entry point for exploration.
Dynamic Movie Data: When a character is selected, Fetch API requests retrieve and render film title, opening crawl, and poster imagery in place, creating an app-like experience without full page refreshes.
Implementation Details
Responsive Design
The layout is fully responsive and scales from mobile to desktop through a flexible structure, balanced spacing, and typography tuned for smaller screens.
This keeps the browsing experience consistent regardless of device size.
Loading and Error States
A visual loading indicator appears during requests to provide immediate feedback, while graceful error handling shows user-friendly messages when requests fail.
Modern JavaScript and Animation
Data Flow: The app uses Fetch API, promise handling, and modular code organization to keep asynchronous rendering reliable.
Dynamic Rendering: Template literals and reusable HTML patterns are used to inject content cleanly and maintain readability.
GSAP Enhancements: Transitions and interaction feedback improve visual flow, engagement, and perceived performance.
Challenges and Takeaways
The most complex part of the build was managing asynchronous requests across related API endpoints while keeping UI updates smooth and predictable. Balancing performance, responsiveness, and animation quality required deliberate tradeoffs throughout development.
- Built a stronger understanding of asynchronous JavaScript and API-driven workflows.
- Confirmed that loading and error feedback are essential for trust and usability.
- Learned how animation can enhance clarity and engagement when applied with intention.
Reflection
This project marked a clear step from static page work to fully dynamic application development. It highlights my ability to work with real-time data, manage asynchronous logic, and shape polished interactive experiences through responsive layout and motion design.