/SWAPP

Open-source React Web App that retrieves Star Wars data from GraphQL server. Link: https://starwars-app-bg.netlify.com/

Primary LanguageJavaScript

Open-source React Web Application that explores some interesting Star Wars data from GraphQL server. Live url: https://starwars-app-bg.netlify.com/

Data

1. API

Data is fetched from GraphQL Server via Apollo client

2. Authorisation

There is only one user available with the following credentials:

3. Authenticating GraphQL queries

Authenticating the queries happens by adding Authorization header (jwt token) to the request with value Bearer

Routes

Routes are implemented via react-router-dom.

1. Routes that don't require authentication

If the user is not registered, he is always redirected to the login page.

2. Routes that require authentication

If the user has been registered, he can see the following pages:

  • :/episodes
  • :/episodes/id,
  • :/characters,
  • :/characters/id
    • :/starships/id

UI/UX

1. Dark Mode

The user can choose between a light and a dark theme. The selected theme is stored across sessions, i.e. if the user opted for the dark theme and closes the window, once she reopens it, the dark theme will still be applied.

2. Error handling

If there is some kind of an error during login, an appropriate info message is shown on the frontend (‘Invalid Credentials’)

3. Responsive design

The app is fully responsive. Without the use of any frameworks. Custom mobile menu toggle functionality is implemented

4. Pagination

The app has pagination that loads more data wherever applicable (List characters page and in Single episode page)

Testing

The components are unit-tested with jest and enzyme.