StarWars Avatars

Frontend: React + TypeScript + TailwindCSS + Vite

Framer Motion

Description

Web application listing characters (Avatars) from the Star Wars universe. The list can be further filtered by avatars attributes, properties.

Data is fetched from the open API resources -> https://swapi.dev/api

Resources used

• /people/
• /planets/ `
• /films/
• /species/
• /starships/
• /vehicles/

TODO

• CardsList - add Table for memorizing character data
• Characters categorization - divide into classes / add color

🚀 LIVE

📺 DEMO

🖋️ SKETCH

[ Figma ] Design document

🧰 BUILT WITH

⛰️ FRONTEND

• React.js [ Hooks, Refs, Context, Reducer ]
• HTML
• CSS [ TailwindCSS ]
• Javascript [ Typescript ]
• Framer Motion

💠 PLUGINS & TOOLS

• eslint, Prettier
• formik, yup
• axios

🏗️ BUILD & DEPLOYMENT

• vite
• git [ GitHub ]

⚙️ AVAILABLE SCRIPTS

In the project directory, you can run:

npm run start

npm run dev

npm run build

npm run preview

npm run format

npm run type:check