Building a full-stack Typescript project with GraphQL and React Native - Part 1: Setup

For this series, I will be building a Fund raising app. This application will allow users to request for funds towards a cause and for other users who want to assist to donate a certain amount towards the cause.

Some other use cases are

• Users are able to login and signup(Authentication)
• Users can create a cause for which they need donation towards and generate a link to share which others
• User who create a cause can read and delete the cause but not update unless you're a super admin(authorization)
• The link generated should take the invited users to the app if they have the app or direct them to the relevant store to download the mobile application(deep linking/dynamic linking)
• Users should be able to upvote and downvote a cause. Once a cause is downvoted up to 10 times, it will be reviewed by a moderator. If downvoted up to 100 times, it's marked as fraudulent and stops receiving funds.
• Still considering if I want to include a chat functionality that will include Socket implementation or not
• Other users should be able to make payment on the app. The payment will be handled using Paystack SDK.

Let's dive in

Backend Set Up

1. Create your project folder. I will be calling mine fund-raising-backend and navigate into it

mkdir fund-raising-backend
cd fund-raising-backend

2. Initialize the package.json and open in your favorite code editor. I will be using VS Code

npm init --y

3. Now, let's install the necessary dependencies

yarn add graphql @apollo/server @prisma/client 
yarn add -D typescript @types/node prisma

Some quick notes

• We will be using Prisma as our ORM to interface with our Postgres database. For creating a Postgres DB on Render, follow the official documentation. At the end, you should have an external connection URL that looks like postgres://USERNAME:PASSWORD@EXTERNAL_HOST_URL/DATABASE. Render offers a free database plan that lasts for 3 months

4. Set up Typescript configuration by creating the tsconfig.json file and specifying the options while configuring the script command

touch tsconfig.json

{
  "compilerOptions": {
    "rootDirs": ["src"],
    "outDir": "dist",
    "lib": ["es2020"],
    "target": "es2020",
    "module": "esnext",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "types": ["node"]
  }
}

In our package.json, update the scripts compile typescript while running the compiled file and ensure the type is specified as module

...
  "type": "module",
  "scripts": {
    "compile": "tsc",
    "start": "npm run compile && node ./dist/index.js"
  }
...

At this point, we've not created any file except for our package.json and the node_modules folder from our dependencies.

The next step will be to

• Define a schema
• Define a resolver