Kwizapp Ionic React Frontend

Repository Structure

Directory	Description
src/components	Reusable react components used at different part in the application
src/graphql	Apollo client setup
src/pages	Main routes of the application
src/theme	Customizable tailwind.css theme files
src/AppRouter.tsx	Main router of the application
src/useStore.ts	Global state management solution

Development

install npm packages

npm i

run with

npm run dev

Styles

Build tailwind styles

# once
npm run build:style

# watch mode
npm run dev:style

Environment Variables

⚠️ You need to set the REACT_APP_API_URL environment variable. Either add the following to an .env file:

# .env

REACT_APP_API_URL=http://localhost:3001/graphql

or adjust the scripts in the package.json:

"scripts": {
    "dev:app": "REACT_APP_API_URL=http://localhost:3001/graphql react-scripts start",
}

This is the frontend of the kwizapp. It depends on a few services (APIs) in order to work properly:

• poster-service: provides movie poster image urls for IMDb ids
• metadata-service: provides movie metadata for IMDb ids
• nest-api: main graphql API (get queried by the frontend)

1. Start Poster API (see corresponding README)
2. Start Metadata API (see corresponding README)
3. Start Nest API (see corresponding README)
4. Start Ionic React Frontend with npm run dev
5. Open app on PORT 3000 - http://localhost:3000/

Component Documentation

The folder styleguide contains automatically generated documentation of all our react components.

Open the file styleguide/index.html in a browser to access the documentation. There are two sections: Pages and UI Components. The first sections describes the main components that are structured in terms of pages, whereas the second section documents the smaller UI components used in our application.

Build Documentation Files

Run the following command to update the component documentation in styleguide/.

npm run styleguide:build

Mobile Preview

For a mobile preview, use the browser's built-in features for that.

User Flow

This is the general flow of the Kwizz game. The game ends once the user has no more lives left.