https://github.com/thomasjonstrup/star-wars-code-exercise

Vue application using Vue router and tanstack query to get data. Using Tailwind CSS for styling
https://github.com/thomasjonstrup/star-wars-code-exercise

tailwindcss vitejs vue vue-router

Last synced: 8 days ago
JSON representation

Vue application using Vue router and tanstack query to get data. Using Tailwind CSS for styling

• Host: GitHub
• URL: https://github.com/thomasjonstrup/star-wars-code-exercise
• Owner: thomasjonstrup
• License: mit
• Created: 2024-08-22T21:07:49.000Z (4 months ago)
• Default Branch: main
• Last Pushed: 2024-08-24T20:08:23.000Z (4 months ago)
• Last Synced: 2024-10-31T11:28:00.303Z (about 2 months ago)
• Topics: tailwindcss, vitejs, vue, vue-router
• Language: Vue
• Homepage: https://star-wars-code-exercise.netlify.app/
• Size: 202 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# star-wars-code-exercise

Vue application using Vue router and tanstack query to get data.

[![Netlify Status](https://api.netlify.com/api/v1/badges/d5febadf-d30d-481a-a30c-3719d0ab7b3f/deploy-status)](https://app.netlify.com/sites/star-wars-code-exercise/deploys)

## Overview

### The challenge

Users should be able to:

-   See a list of star wars characters in cards

-   Filter by different data like gender or hair color.

-   Paginate the different pages

### Screenshot

![](./screenshot.jpg)

### Links

-   Live Site URL: [hstar-wars-code-exercise.netlify.app/](https://star-wars-code-exercise.netlify.app/)

## My process

### Built with

-   Semantic HTML5 markup

-   CSS custom properties

-   Flexbox

-   CSS Grid

-   Mobile-first workflow

-   Vue JS

-   Vue Router

-   Tanstack Query

-   [Tailwind](https://tailwindcss.com) - For styles

Used Tanstack Query for handling the api call and caching data.