Alexis Drai
226667107d
|
1 year ago | |
---|---|---|
assets | 1 year ago | |
components | 1 year ago | |
docs | 1 year ago | |
entities | 1 year ago | |
navigation | 1 year ago | |
redux | 1 year ago | |
screens | 1 year ago | |
.gitignore | 1 year ago | |
App.tsx | 1 year ago | |
README.md | 1 year ago | |
app.json | 1 year ago | |
babel.config.js | 1 year ago | |
config.ts | 1 year ago | |
package.json | 1 year ago | |
tsconfig.json | 1 year ago | |
yarn.lock | 1 year ago |
README.md
PoKeMoNg
A React Native app for educational purposes. Refer to instructions here.
- About
- Notation checklist
- Sketches
- Some business logic
- Using the app
- Testing the app
- Known limitations
About
PoKeMoNg is a React Native application developed for educational purposes. The application is designed to showcase
a "master/detail" view of Moves
, with basic CRUD features. The application is linked to
a backend API that provides the data for the Moves.
Notation checklist
- Documentation (6 pts)
- Application sketches (4 pts)
- A Readme describing your project/application. (2 pts)
- Basics (20 pts (- 2))
- Navigation (3 pts)
- Tab bottom navigation (2 pts) AND at least one button (1 pts)
- Redux Store (10 pts)
- Read data from redux store (2 pts)
- Update data to redux store with actions and reducers (slice = 0) (4 pts)
- Update data to redux store using redux-thunk (API AND|OR AsyncStorage) (4 pts)
- Display list of items (2 pts)
- FlatList, VirtualizedList or SectionList
Display dynamic image (2 pts)- Binding child component props (1 pts)
- Handle a TextInput correctly (2 pts)
- Beware of keyboard management
- Navigation (3 pts)
- Application features (14 pts (- 2))
- Retrieve data using the Web API (6 pts)
- Handle fetch success callback (3 pts)
- Handle fetch error callback (3 pts)
Store favorite data into phone storage (2 pts)- Write Tests (6 pts (- 1))
all actions payload (1 pts)- all reducers case (2 pts)
- one UI Component (3 pts)
- Retrieve data using the Web API (6 pts)
Sketches
This app will contain a home page, and a "master/detail" tab for Moves
with basic CRUD features.
Home
The home screen provides a logo, and tab navigation options to other parts of the application.
Collection
The collection screen displays a list of Moves
fetched from the API.
>
Detail
The detail screen displays detailed information about a selected Move
.
>
Creating
The creating screen provides a form for creating a new Move
.
>
Updating
The updating screen provides a form for updating an existing Move
.
>
Some business logic
While the back end doesn't forbid a Move
from being both weak against and effective against the same one type,
it should. That's one of the flaws of that API.
In this app, we did implement the business logic described above in our callbacks for our MultiSelect
elements, like
so:
const handleSelectType = (selectedTypes: string[], setTypes: React.Dispatch<React.SetStateAction<string[]>>, otherSelectedTypes: string[]) => {
const uniqueSelectedTypes = Array.from(new Set(selectedTypes));
const withoutDuplicatesFromOtherColumn = uniqueSelectedTypes.filter(type => !otherSelectedTypes.includes(type));
setTypes(withoutDuplicatesFromOtherColumn);
};
Using the app
Running the backend
In order to use this app, you will need to run the dedicated backend. A README
with instructions is provided
for that purpose.
Connecting to the backend locally
First, please find the config.ts
file at the root of this project, and replace
with the IPv4 address associated with your own Wi-Fi adapter.192.168.0.15
To find that address out, you can run ipconfig
on Windows or ifconfig
on macOS/Linux in your terminal.
Running this app
Then, with the Expo CLI installed, at the root of the project, simply run
npx expo start
or
yarn start
The app should launch successfully, and instructions should be provided in terminal to open it on a number of devices.
Testing the app
You can run some partial automated tests on moveReducer.ts
, on TypeTacticsInfoList.tsx
, and
on MoveDetailScreen.tsx
by running the command
yarn run test
Known limitations
Beside whatever items may not have been checked off the notation checklist, there are also a number of known limitations and issues with this app.
Sparse
Even though the API provides a variety of entities
with fun business logic, this app only implemented a "master/detail" and the basic CRUD features on one entity: Move
.
In short, for lack of time, this app doesn't quite manage to do anything beyond the basic requirements. It doesn't use the API to its full potential, and the API doesn't really get a legitimate reason to provide even more interesting routes (for instance, aggregation pipelines and filtered searches).
Hardcoded enums
See #12
Enums of values such as TypeName
and MoveCategoryName
are defined by the API. The API provides an OAS, so we could
get those enums dynamically instead of copying and pasting them in this front-end project.
Of course, that may increase complexity beyond the scope of this project, and it may impact performance negatively -- but it seems like something we would take care of before deploying this app to production, in real-world conditions.