This is a companion repo for the "Introduction to React Native / Expo" course. This application is built from scratch throughout the course.
Color Palettes is a React native mobile application to manage color palettes using:
-
Expo features: Expo Router (File-based routing), Expo SDK, Expo dev client
-
React Navigation: to customize passing data between screens
- [USED_ALONGSIDE] Expo Router.
-
Easy-peasy: for State management, easy and similar to Pinia (in Vue ecosystem)
- [ALTERNATIVE_TO] React-redux
-
Vercel SWR: React Hooks for data fetching, which provides a Built-in cache (stale-while-revalidate strategy), request deduplication, remote mutation, ...
- [USED_ALONGSIDE] natvie Fetch API
-
TypeScript: for type-safety
- Fetch color palettes from an API using native Fetch + useSWR/useSWRImmutable Vercel hooks
- Store fetched data in a redux store using Easy-peasy
- List all fetch color palettes
- Pull down to refresh: uses Vercel SWR mutation API
- Push "Add new palette" modal
- Handle form inputs inside the modal
- Merge new added palette with fetched palettes, and add them to redux store
- Define computed properties in store (paletteNames, first5ColorsOf, ...) to derive state with great performance benefits
- and more ...
- Install dependencies:
> npm install- Since the app is using a developement build (expo-dev-client), you need to build the app locally or use EAS (Expo Application Services) build
# build app loacally
> npm run android[ | ios]
##Or
> npx expo run:android[ | ios]
# EAS build ([REQUIREMENT] eas command needs to be installed, eas account is required)
> eas build --platform android[ | ios]- Start the dev server & launch the app
> npm run start
#Or
> expo start --android[ | ios]- Scan QR code or press 'a'/'i' to start Android emulator / iOS simulator
Thanks to:
- React Native,
- Expo,
- Kadi Kraman for her courses on FrontEndMasters/Egghead and Materials for this project,
- Easy-peasy v6,
- Vercel SWR,
Written with Love ❤️