random-post

This project is a one-week assignment to create a demo application, which renders posts and author information.

Requirements overview

Requirement	Description	Result
Language	React-Native	🌈 Implemented
Framework	React-Redux	💦 Not implemented (run out of time)
Initial screen	Contains a list of posts from PostAPI	🌈 Implemented
Detail screen	Show details for post author from UserAPI	🌈 Implemented
Develop tests	Testing the application	💦 Implemented (Only two tests)
Build process	Code to compile, run and produce output	🌈 Implemented
3rd party libraries	Be able to justify the reason	🌈 Explained below
Coding style	Be consistent with the code	🌈 Implemented (with Prettier)
Data persistence (Optional)	Be able to support offline mode	💦 Not implemented

App demo

Installation

Disclaimer: This application is developed and tested on Linux with Android emulator from Android Studio.

1. Follow up the official React Native guide to set up the environment.

2. Clone the project

git clone https://github.com/qingqingqingli/random-post.git

3. Install dependencies

cd random-post

yarn install

4. Run the app

# step 1: start Metro in one terminal
yarn start

# step 2: start the application in another terminal
react-native run-android

If everything is set up correctly, you should see the app running in your Android emulator shortly. If you can't get it to work, see the Troubleshooting page.

Testing result

• Run the command below to run the tests

jest test

• Caveat: Only two tests have been developed.

Structure diagram

• One main takeaway from the diagram below is all the component are interacting with useState hook. The dependencies can be optimised by React-Redux. I run out of time to implement it.

• Any suggestions on how to improve the structure is more than welcomed! 💛

Used 3rd party libraries

Library	Description	Justification
React Navigation	Build routing and navigation for React Native apps	It is scalable and easy to add more screens to the app
eslint	Find and fix problems in JavaScript code	Helps to find coding errors
jest	The recommended JavaScript Testing Framework	Develop tests for the application
prettier	Code formatter for JavaScript	Make it easy to maintain a consistent coding style
jest-fetch-mock	Allows you to easily mock your fetch calls and return the response you need to fake the HTTP requests	Mock fetch calls to test other components
react-test-renderer	Provides a React renderer that can be used to render React components to pure JavaScript objects	Check content from returned component

My wishlist

These are learning areas left for the future. ☺️

• Develop a less coupled structure
• To implement React-Redux
• Write tests to cover: UI components, API fetch responses, react navigation, button
• Improve the UI design: add a flash screen, improve design for displaying posts & author info, add map visualisation based on author geographical coordinates