DEV Community

Suulola Oluwaseyi
Suulola Oluwaseyi

Posted on

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
Enter fullscreen mode Exit fullscreen mode

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

npm init --y
Enter fullscreen mode Exit fullscreen mode

Project Initialization

3. Now, let's install the necessary dependencies

yarn add graphql @apollo/server @prisma/client 
yarn add -D typescript @types/node prisma
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode
  "compilerOptions": {
    "rootDirs": ["src"],
    "outDir": "dist",
    "lib": ["es2020"],
    "target": "es2020",
    "module": "esnext",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "types": ["node"]
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)