Trickty
Table of contents
- Description
- Developer Setup
- Tech Stack
- Project Structure
- Styleguide
- Third Party Services
- Languages Management
Description
This app was made to meet the requirements to join the G2i community. It's a trivia app based in Open TB and Expo. Below you could see a gif of the app functionality en behavior.
Developer Setup
Install Required Dependencies
If you want to run in some physical devices thats all, because Expo allows to run in physical devices without setting up a development environment, if you want to use simulators/emulators we need some extra things.
- OpenJDK distribution called Azul Zulu: Java Development Kit
- Android Studio
- Xcode
Install Environment Variables
This project has some environment variables, you will need to create a .env
equal to .env.SAMPLE
and put the required dependencies here.
Start Expo
In the project root, run
$ npm start
Visual Studio Code Configuration
Visual Studio Code is the recommended text editor for this project. The following extensions are useful:
- Prettier - code formatter
- ESLint - TypeScript linter
Tech Stack
- Expo framework to create apps in React Native in the easy way, also comes with a lot of helpers.
- TypeScript
- React Native
- Hooks They let you use state and other React features without writing a class.
- Redux Toolkit library with helpers and tools like RTK query, createSlice to make redux more easier.
- React-Redux React bindings for Redux.
- RTK Query API solution with cache management and state management.
- React-Navigation JavaScript library for navigation.
- React-Hook-Form library to create forms more easily
- React-Native-Paper UI material components by Callstack.
- Expo localization multi language support.
- React Native Reanimated library to make animations in React Native.
- Lottie After Effects UI animations for React Native.
- Lodash general utility helper
- Jest for unit testing
- React Native Testing Library Simple and complete React Native testing utilities that encourage good testing practices.
Project Structure
Unit and Acceptance Tests
Inside the folder __tests__
this project has unit tests oriented to behavior and also some snapshots of the components, they all work the same way. Run all tests once:
$ npm run test
Component folder structure
This template follows the next structure:
assets
: Contains every asset used in the application (images, audio, video, etc)localization
: Contains the logic related to support multiple languagesutils
: Test utilssrc
: Main container of all the code inside the application.components
: Contains every component that is widely used throughout the project.styles
: Contains the Theme with the global styles, fonts, colors used throughout the codebasecommon
: Contains common logic and functions.navigation
: Every related to navigation should be here.types
: Interfaces, model entities.store
: Contains all logic related to data storage and API logic because we use RTK query as we mention before.scenes
: Every flow in the application should be here inside a corresponding folder, with its component, styles and such.index.tsx
: Contains a scene where it has the components and the logic.types.ts
: Whenever we need some types constrained to this scenestyles.ts
: styles constrained to this scene
Styleguide
When coding a new React-Native application we will follow the Community guidelines with some extra tweaks
Also to help to maintain a good quality in our code we use the next extensions
Languages Management
Translations
Inside the folder localization in the root dir you will see two things:
- Languages folder: Contains all the translations file of languages that are supported by the app, for example
en.ts
index.tsx
file with the logic for the translations.
Update translation file
- Add a new key with his corresponding translation to the files inside the languages folder.
Add New language to the application
- Add a new file with all the keys and his translations, for example
fr.ts
will be the french one. - Go to
index.tsx
and update available languages and translations getters.