a cozy, (audio 🔊) bookclub app.
- 🏕️ Create your club
- 📚 Set the reading list of your club
- 📅 Plan out reading and discussion milestones
- 🗣️ Discuss and read with yout book buddies in dedicated audio rooms
Pre-requisites:
- have
yarninstalled on your machine ;- have the Expo Go app installed on your phone ; (Learn more from on Expo website)
- have an EAS (Expo Application Services) account ; (Sign up here)
- have
eas-cliinstalled on your machine ; (eas-cli Github)- A Magic Auth API Key (+ OAuth keys for the social logins you want to use ; eg: Google OAuth API key etc)
- A Polybase db that follows the schema defined in
./schemas/collectionV1.ts- A Web3.Storage API Key
- A Google Books API Key
- A Huddle01 API Key and project ID
- A Livepeer API Key
- Install dependencies:
yarn - In
apps/expo, runeas project:initand initialize a project - If alls goes well in the previous step, you should see this in your terminal :
✔ Would you like to create a project for @<your-eas-account-name>/hearthsidehangouts? … yes
✔ Created @<your-eas-account-name>/hearthsidehangouts
✔ Project successfully linked (ID: <id-of-your-newly-created-project>) (modified app.json)
- Check
apps/expo/app.json; the"projectId"field should have the ID theeas-cliprinted in the previous step as its value ; if not, redo the previous step. - Still in
apps/expo, create a.env.localfile (copy/paste the content of.env.dist) - Still in
apps/expo, run the following commandeas secret:push --scope project --env-file .env.local;
Make sure to run
eas secret:push --scope project --env-file .env.localevery time you change your .env.local file !
- Still in
apps/expo, verify that your secret environment variables were created by runningeas secret:list; your terminal should print something like this :
eas secret:list
Secrets for this account and project:
ID <some-id-abc-def>
Name MAGIC_KEY
Scope project
Type STRING
Updated at <some-date>
———
ID <some-id-xyz-lmn>
Name POLYBASE_DEFAULT_NAMESPACE
Scope project
Type STRING
Updated at <some-date>
- If you followed all the previous steps properly, you should be good to go ! Go back to the root of the project
- To run expo locally in dev mode, run
yarn native - Your terminal should print something like this :
Starting Metro Bundler
Tunnel connected.
Tunnel ready.
█▀▀▀▀▀█ ▄ █ ▀ ▄▄▀ █▀▀▀▀▀█
█ ███ █ ▄▄▄ █▄██ █ ███ █
█ ▀▀▀ █ ▄█ ▄▄▀▀▄▄ █ ▀▀▀ █
▀▀▀▀▀▀▀ ▀▄█▄▀ ▀▄█ ▀▀▀▀▀▀▀
██▀█▀ ▀▀▀▀▄▀▄▀█ ▄▀ █ ▀▄▀
▄ ▀ █▀▄▄ ▀ ▄ ▀█▀▄ ▀▀ ██
█▀ █▄ ▀▀██▀ ▀█▀ ▄▀▀█▀▀█▀▀
█ ██▀█▀██▀▄█▀▀█▀ ▀███▀ ▀█
▀ ▀ ▀▀▄██▀█▀ ▀█▀▀▀█▀█
█▀▀▀▀▀█ ▀▀▀ █ █ ▀ █▄▀██
█ ███ █ █▄█▄ ▀▀██▀█▀██▀▄▄
█ ▀▀▀ █ █ █ ▄▄▄ ▄█▄▀ █
▀▀▀▀▀▀▀ ▀ ▀ ▀▀ ▀▀ ▀▀▀
› Choose an app to open your project at http://<random-string>.<your-eas-account-name>.19000.exp.direct/_expo/loading
› Metro waiting on exp://<random-string>.<your-eas-account-name>.19000.exp.direct
› Scan the QR code above with Expo Go (Android) or the Camera app (iOS)
› Press a │ open Android
› Press w │ open web
› Press j │ open debugger
› Press r │ reload app
› Press m │ toggle menu
› Press ? │ show all commands
Logs for your project will appear below. Press Ctrl+C to exit.
- In your phone open the Expo go app
- In the Expo Go app, scan the QR code from the console or write the URL
- Enjoy !
- Profile, clubs, materials (books), club activity, milestones... data management: Polybase ;
- File upload (pictures, pdf, audio): web3.storage API ;
- Live group audio chat: Livepeer & Livekit UI ;
- Authentication/wallet: Magic Auth SDK ;
This project was bootstrapped using the tamagui universal app starter.
npm create tamaguiThis monorepo was bootstrapped with npm create tamagui, a universal app (mobile + web) built with Expo + Next.js + Tamagui + Solito app.
Many thanks to @FernandoTheRojo for the Solito starter monorepo which this was forked from. Check out his talk about using expo + next together at Next.js Conf 2021.
The main apps are:
-
expo(native) -
next(web) -
packagesshared packages across appsuiincludes custom UI kit that will be optimized by Tamaguiappmost files will be importedf fromapp/features(don't use ascreensfolder. organize by feature.)helpershelper functions that are used across different parts of the applications (provide common functionality or perform specific tasks that can be reused throughout the codebase)hookscustom hooks that are used across different parts of the applicationsprovider(all the providers that wrap the app, and some no-ops for Web.)
Adding other folders inside of packages/ is possible (if you have a good reason to.)
-
Install dependencies:
yarn -
Next.js local dev:
yarn web
To run with optimizer on in dev mode (just for testing, it's faster to leave it off): yarn web:extract. To build for production yarn web:prod.
To see debug output to verify the compiler, add // debug as a comment to the top of any file.
- Expo local dev:
yarn native
Note we're following the design systems guide and creating our own package for components.
See packages/ui named @my/ui for how this works.
If you're installing a JavaScript-only dependency that will be used across platforms, install it in packages/app:
cd packages/app
yarn add date-fns
cd ../..
yarnIf you're installing a library with any native code, you must install it in expo:
cd apps/expo
yarn add react-native-reanimated
cd ..
yarnyarn upgrade-interactiveYou can also install the native library inside of packages/app if you want to get autoimport for that package inside of the app folder. However, you need to be careful and install the exact same version in both packages. If the versions mismatch at all, you'll potentially get terrible bugs. This is a classic monorepo issue. I use lerna-update-wizard to help with this (you don't need to use Lerna to use that lib).
You may potentially want to have the native module transpiled for the next app. If you get error messages with Cannot use import statement outside a module, you may need to use transpilePackages in your next.config.js and add the module to the array there.
- Root:
./apps/next - Install command to be
yarn set version berry && yarn install - Build command: leave default setting
- Output dir: leave default setting