The Centre for Dreams is a day program that provides services for adults living with a developmental disability. UofT Blueprint is collaborating with the Centre for Dreams to build a centralized platform for announcements and program information.
apps
├─ expo
| ├─ Expo SDK 51
| ├─ React Native using React 18
| └─ User facing mobile application
└─ next.js
├─ Next.js 13
├─ React 18
└─ Admin dashboard
packages
├─ api
| └─ tRPC router definitions
└─ db
└─ Prisma schema and migrations
This project uses a monorepo that contains our API, React Native mobile application, and Next.js admin dashboard.
Before jumping into the project, install the following dependencies:
If you are on Mac, I recommend using Homebrew and installing with
brew install node nvm pnpm watchman
npm install -g eas-cli
This project uses Node 20, so use the command nvm install 20
and nvm use 20
to setup the correct version.
For mobile development, this project uses Expo. You can use your phone for development by downloading the Expo Go app on iOS or Android. You will need to create an Expo account for developing the mobile application.
Clone the project
git clone https://github.com/uoftblueprint/centre-for-dreams.git
Go to the project directory
cd centre-for-dreams
Install the workspace dependencies
pnpm install
To run the project, you will need to set some environment variables. Copy the example env
cp .env.example .env
After filling in the values in .env
, you are ready to run the project!
To setup authentication with Clerk, follow the guide here.
TLDR: You need to make an account and update the following environment variables in .env
. With what's provided in the Centre for Dreams organization on Clerk (Ask). Note: you do not need to modify NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY.
CLERK_SECRET_KEY=
For the following environment variables, keep them the same for now, unless you're working on authentication. When you update them you should update them in .env.example
as well
NEXT_PUBLIC_CLERK_SIGN_IN_URL=
NEXT_PUBLIC_CLERK_SIGN_UP_URL=
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=
To test signing in with a one-time passcode for the expo project, manually create a user on the Clerk Dashboard with the same email as EXPO_PUBLIC_CLERK_TEST_EMAIL
in .env.example
. This email, along with EXPO_PUBLIC_CLERK_TEST_CODE
, will allow users to log into the application during development mode without having to receive a one-time passcode. For more information, see Testing with Clerk
One of the environment variables that you need to fill out is DATABASE_URL
. This project is using Postgres for the database. To setup a development database, you can either install Postgres locally or use an online provider.
For easy setup, we recommend using Neon for your database. After creating an account and project, you will see a panel called "Connection Details" on the dashboard. Change the connection type from "psql" to "prisma", and then copy the values into your .env
. Now you're ready for development!
Any time that you pull a new version of the project, you should apply new database migrations to ensure that your local schema matches the current Prisma schema.
pnpm db:migrate
This command applies all new migrations to your database -- you are now ready to run the project!
If you are making any changes to the Prisma schema, you will need to generate a new migration. You can do this with
pnpm db:migrate
The command will see the schema change and provide a prompt for the new migration name.
While you are working on a ticket, you may want to try out multiple different schema options. You only want to make a migration when you have finalized a schema change, and each pr should contain at most one migration. To change your database schema during development, you can use
pnpm db:push
This will apply your current Prisma schema to your database.
After finishing the setup, you can run the project with
pnpm dev
This command will run the admin dashboard and API on localhost:3000, open Prisma Studio on localhost:5556, and run the Expo application on localhost:8081.
To use Expo Go, you need to authenticate with Expo on your mobile device and computer. Use the login button on the mobile app to login with your account. On your computer, use
eas login
Once you are authenticated on both devices, you will be able to see the mobile application under "Development servers" in Expo Go while pnpm dev
is running.
pnpm dev
pnpm dev:web
pnpm lint
pnpm lint:fix
pnpm format:fix
This command is run automatically whenever you use pnpm dev
, pnpm lint
, or pnpm typecheck
.
pnpm db:generate
pnpm db:push
pnpm db:migrate
pnpm typecheck