Week 18
Decoding open source projects
Fixing real world issues in them
Project #1
Backpack
https://github.com/100xDevs-hkirat/week-16-bp-repo
Backpack has a few parts
1. Frontend (extension)
2. Backend (Express)
3. DB (Hasura + Postgres)
4. Chat server (Websocket)
5. Distributed Chat (Redis)
6. Autoscaling Backend
We will explore these incrementally
Goal for today -
Setup the project
Understand the FE/BE/DB setup
Make a full stack contribution that touches all 3
Things you need to know for today
1. Typescript
2. Express
3. React
4. Context API
5. Zod
6. mui
7. Hasura/Postgres/zeus
Step 1
Setting up the project locally
Official setup
Full stack setup
---- Initial steps ----
Clone repo
yarn install (root folder)
yarn build (root folder)
---- DB ----
cd backend/native/reef
docker-compose up
Open new terminal
npx hasura-cli console
---- Backend ----
Open new terminal
cd backend/native/backpack-api
yarn start
---- Frontend ----
cd packages/common/src/constants.ts
Replace Backpack api url to localhost:8080
cd packages/app-extension
yarn start
Copy over dev folder to extensions tab
Full stack setup
Try setting up the wallet
Make sure backend requests are going to localhost:8080
Maybe try sending friend requests in the messaging tab
Before we start,
We should understand how DB migrations are stored in Projects
DB Migrations
1. Are checked into the codebase
2. Are usually auto generated
3. Are usually manually applied to the production DB
Understanding DB/Graphql/zeus
1. If you make changes in the DB, you need to give the right set of permissions to the columns
2. You need to confirm that migrations are regenerated
3. Update the automatically generated client
Very similar to how it happens in prisma -
https://github.com/calcom/cal.com/tree/main/packages/prisma/migrations
Issue we are solving
https://github.com/100xDevs-hkirat/week-16-bp-repo/issues/2
Steps to solve a full stack issue
1. Change the Frontend
2. Change the DB -- we did not autogenerate zeus
3. Change the backend
Assignment
