StarWars

The goal of this project is to create a web application that allows users to explore the list of Star Wars characters along with detailed information about the starships and films associated with each character. This app utilize ReactJS for the UI and React Flow for displaying the data as a graph. Users are able to see how each character connects with different starships and films in an interactive visualization.

Demo

Follow the link to view project: https://sharcty.github.io/StarWarsReact/

Follow the link to see my presentation of a project: https://www.loom.com/share/db190bcca42944638d693adecbcfcb4b?id=5da2e816-87e3-495c-82df-16547411bd6b

Screenshots

Installation

Install StarWarsReact with npm

  npm install StarWarsReact
  cd StarWarsReact

Run Locally

Clone the project

  git clone https://github.com/sharcty/StarWarsReact.git

Go to the project directory

  cd StarWarsReact

Install dependencies

  npm install

Start the server

  npm run dev

Running Tests

To run tests, run the following command

  npm run test

To get tests coverage, run the following command

  npm run coverage

Test coverage results

Deployment

To deploy this project run

  npm run deploy

Tech Stack

Client: React, ReactFlow, ViTest, Vite, gh-pages

API Reference

API used for getting data

https://sw-api.starnavi.io

Images picking from

https://starwars-visualguide.com/#/

Color Reference

Color	Preview	Hex Code
Rich Black		#07111d
Oxford Blue		#05162b
Orange		#df7a44
Butterscotch		#db9942

Lessons Learned

For me it was first time building React project from scratch. I was thrilled to learn more from it, even though it was challenging to start. Thanks for the opprotunity!