pa4080/swapi

SWAPI Search App with ReactJs and TypeScript Exercise

SWAPI Search App with ReactJs and TypeScript.

Resources and referens

• Star Wars API

• Star Wars API Alternative provided by Dr. Charles R. Severance. Currently in use because is much faster, up to date than the official one and also provides much correct information.

• Related:

  • SW Guide Site

  • SW Guide GitHub

  • SWAPI Json Server GitHub

  • https://starwars.fandom.com/wiki/Obi-Wan_Kenobi_(television_series)

• Star Jedi Font

• Font Converter

• UseHooks-TS a React hooks library, ready to use, written in typescript.

Project setup

Clone the repository, then install the dependencies and start the development server.

npm install
npm start

The rest of the commands are available in the package.json file. See also the .github/workflows/workflow.yml file for the GitHub Actions workflow.

Initial setup of project

Install ReactJs and Typescript by Vite

npm create vite@latest
# ✔ Project name: … prj-ts-react-swapi
# ✔ Select a framework: › React
# ✔ Select a variant: › TypeScript
cd prj-ts-react-swapi/
npm install
npm i react-router-dom axios dompurify @types/dompurify
npm i usehooks-ts
npm i @react-hook/media-query

• Create start command in package.json file as follows:

  "scripts": {
      "start": "vite --host 0.0.0.0 --port 3000",
  }

• Note I need to access the app from other devices on the same network to test it on Mobile, Hackintosh, Windows etc. This is also very useful option when you are using WSL2, otherwise you may need to export the port manually.

• Clean the src/ and public/ directories and start working on the project.

Install other packages

npm i --save-dev tailwindcss postcss autoprefixer postcss-import
npx tailwindcss init -p

npm i @tailwindcss/forms @tailwindcss/typography @tailwindcss/aspect-ratio
npm i @headlessui/react
npm i @heroicons/react
npm i react-icons

References:

• https://tailwindui.com/
• https://react-icons.github.io/react-icons/
• https://headlessui.com/
• https://heroicons.com/

Setup the Git Repository and Push to GitHub

# git config --global init.defaultBranch master
git init
git add -A
git commit -m "Initial commit"
git branch -M master
git remote add origin git@github.com:metalevel-tech/prj-ts-react-swapi.git
git push -u origin master

Automation with GitHub Actions

• Deploy to GitHub Pages and Automate with GitHub Actions

• Deploying by gh-pages seems to overwrite custom domain | gh-pages -d dist overwrites custom domain

• Vite: Building for production

Shell helpers

PNG > WebP conversion

FILE="Input_image.png"
convert "$FILE" -quality 80 -strip -define webp:lossless=true -define webp:method=4 "${FILE%.*}_80.webp"
convert "$FILE" -quality 70 -strip -define webp:lossless=false -define webp:method=4 "${FILE%.*}_70.webp"

SVG > ICO conversion

FILE="Input_image.svg"
convert -background transparent "$FILE" -clone 0 -resize 32x32  favicon.ico