• Stadion FC React Native app
• App architecture
  • File Structure
  • Modules
• Building and running the app
  • Troubleshooting
• The Exercises
• How to deliver your work back to us

Stadion has started its own Football club so that it can participate in some friendly matches with some well known clubs. Of course, you can't be a real football club unless you have your own native app, so we've decided to build our own using React Native.

The exercise you'll be embarking on will implement a feature of the app.

We'll explain what that is soon, but first we'll help you get your bearings by giving you a brief overview of the architecture of the application.

Note: you're about to be given a top level overview of the app structure as a whole. To give you a bit of context as to the scope of the exercise, the only files you'll be expected to work with are in the fixtures module. The specifics of this will follow.

A Stadion developer has already scaffolded the app out, and so far we have setup:

• A boiler plate React Native project using Typescript.
• React Navigation for routing
• Redux for state management
  • With Typesafe actions for better typing support
• Styled Components for component building
• A small API module which uses mock data and some timeouts to simulate loading latency.

The general layout and bootstrapping of the application follows some fairly common patterns, so if you start navigating the code from App.tsx, you should hopefully find some familiarity with the structure.

The file and folder structure, whilst not so big yet, has started to layout what could be considered a good foundation for modularisation and separation of concerns.

The modules correspond one for one with the tabs in the bottom tab navigation of the app.

Each module at a minimum has:

• Some screens
• Some components
• An actions.ts file that contains all the actions for a module.
• A reducer.ts file that contains the reducer that handles the actions in the actions.ts
• A thunks.ts file that contains asynchronous behaviours, such as fetching data from servers.

The only module currently in development is the fixtures module, and this is the module within which you'll be working.

It's expected that you already are familiar with React Native, and have had it running locally on your machine before. If you need some guidance with this however, you can check their docs here.

Note: This application is not using Expo, it's a basic React Native CLI application.

From the root of the directory:

// Install the dependencies
yarn

// Run in iOS simulator (macOS only)
npx react-native run-ios 

// Run in Android emulator (Android only)
npx react-native run-android

• In some Android emulators, you may see a mesage like "System UI stopped working". It generally can be dismissed and ignored.
• If you have any issues that prevent you from running the app, please don't hesitate to reach out to your Stadion contact and a someone will help you resolve the issue.

Please complete the following exercises.

• Display news content in the home screen
• Display the fixtures list in the fixtures screen

In normal circumstances, your work would be submitted as a PR. However in this case, we'd like you to submit your work to us using the following steps:

• Delete the node_modules folder completely
• Compress the entire project folder into a zip
• Send your ZIP file through to the Stadion person who you've been in contact with.

Of course, despite the fact that you're simply delivering the source files directly to us, feel free to commit to your local version of the repository as much as you need/want to.