SWAPI Dashboard | Frontend Developer Test

Introduction

This project is a implementation of a one-page application showcasing an interactive list of Star Wars characters and detailed information about their home planets from SWAPI. Project aims showcases a scalable architecture, reusable components, and a unified design system.

Live Demo

Explore the live version of the project here.

Tech Stack

• Vue.js
• Vuex & Vue Router: State management and routing solutions.
• TypeScript: Ensuring type safety and improving maintainability.
• Tailwind CSS & Headless UI: For a consistent, scalable design system and accessible UI components.
• Webpack & Axios: Efficient module bundling and API interaction.
• ESLint: Ensuring code quality and consistency.

Key Features

• Dynamic Users Table: Interactive table with sorting and search functionalities.
• Planet Details Popover: Clickable elements providing detailed information about planets.
• Improved Routing: Deep linking enabled, allowing the sharing of specific search states via URL.
• Lazy Loading: Optimized data fetching for enhanced performance great for the possible scaling.
• Responsive Design: Adaptable UI for all device types.

Project Structure

• Reusable Components: Modular architecture for scalability.
• Design System: Tailwind CSS for a unified, maintainable design approach.
• State Management: Vuex for centralized, predictable state handling.
• TypeScript Integration: Type safety and code quality.

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build