https://expo.dev/@sionkim00/coinmarketcap-clone
- React Native
- React Recoil
- Context API
- React Navigation
- And many others such as wagmi charts.
Three main features of application:
- Main Screen provides coins and its according charts
- In a watchlist, you can track coins you like!
- Portfolio section gives a user to manage their portfolios while having a flexibility to customize quantity, price, etc..
In this app, to demonstrate flexibility, I used two different state management patterns, which are Context API and React Recoil. The context API is used to track watchlisted coins. While Context API is preferred global state management pattern, it's suitable for black/white theme or simple data. So to manage portfolio data, I used React Recoil, which is quite a new state management library. With Recoil's powerful shared state (Atoms) and functions (Selectors), I was able handle API calls, storing data in local device (Async Storage), and manage state very easily.
Real time coin datas were provided with Coingecko API.
Interactive price chart development took most of the time, because using a animated-charts by rainbow wallet kept giving an error. To handle this, I took a detour to use wagmi charts, which turned out to be fan-tas-tic! It enables user interaction along with high customizability.
<LineChart.Provider
data={coinMarketData.prices.map((price) => {
return { timestamp: price[0], value: price[1] };
})}
>
<LineChart height={200}>
<LineChart.Path color={percentageColor}>
<LineChart.Gradient />
</LineChart.Path>
<LineChart.CursorCrosshair color="white">
<LineChart.Tooltip style={{ backgroundColor: "white" }} />
</LineChart.CursorCrosshair>
</LineChart>
</LineChart.Provider>
 |
 |
|---|---|
| Home Screen | Detailed Coins |
 |
|---|
| Watchlist |
 |
 |
|---|---|
| Portfolio Screen | Add Portfolio |