Mohamed El Mahallawy

Co-Founder & CTO

What are the tools that help us run our business? Here is a preview:

Startup stack

• Banking: Brex
• Shares and certificate management: Carta
• Product management: Linear.app
• Data management: Airtable
• Design: Figma
• Documents: Notion and Google Docs
• Communication: Slack
• Email: Google and Superhuman
• Calendar: Calendly
• Password management: 1Password
• Music: Spotify
• Source control: Github
• Code editor: VS Code with Tabnine
• Asset management: S3
• Content management: Contentful
• Transactional emails: Sendgrid
• Office space: WeWork
• Coffee: La Colombe

Tech stack

• Frontend deployment and hosting: Vercel/Nextjs
• Frontend stack: Nextjs, React, Ant Design, Apollo GraphQL
• API deployment: Heroku
• API stack: Nodejs, Expressjs, Prisma, GraphQL
• Error tracking: Sentry

package.jsons

I often times find myself looking at a project's package.json to get an idea of what tools or packages they are using and to discover new ways of doing things. Here is ours:

Frontend

{
  "dependencies": {
    "@ant-design/icons": "^4.4.0",
    "@apollo/client": "^3.3.7",
    "@flatfile/react": "^0.4.3",
    "@hookform/error-message": "^2.0.0",
    "@hookform/resolvers": "^2.6.0",
    "@monaco-editor/react": "^4.1.3",
    "@next/bundle-analyzer": "^10.0.7",
    "@segment/analytics.js-core": "^4.1.10",
    "@segment/snippet": "^4.13.2",
    "@sentry/browser": "^6.9.0",
    "@sentry/integrations": "^6.9.0",
    "@sentry/node": "^6.9.0",
    "@sentry/tracing": "^6.9.0",
    "@sentry/webpack-plugin": "^1.14.0",
    "@testing-library/dom": "^8.1.0",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^12.0.0",
    "@testing-library/user-event": "^13.2.1",
    "@types/classnames": "^2.2.11",
    "@types/deep-equal": "^1.0.1",
    "@types/faker": "^5.5.5",
    "@types/lodash": "^4.14.165",
    "@types/next-seo": "^2.1.2",
    "@types/node": "^14.14.11",
    "@types/omit-deep-lodash": "^1.1.1",
    "@types/pluralize": "^0.0.29",
    "@types/randomcolor": "^0.5.5",
    "@types/react": "^17.0.0",
    "@types/react-beautiful-dnd": "^13.0.0",
    "@types/react-dom": "^17.0.0",
    "@types/react-scrollspy": "^3.3.3",
    "@types/react-signature-canvas": "^1.0.1",
    "@types/uuid": "^8.3.0",
    "@types/validator": "^13.1.3",
    "@uploadcare/react-widget": "^1.3.4",
    "@uploadcare/upload-client": "^1.1.2",
    "airtable": "^0.10.1",
    "antd": "4.12.3",
    "apollo-link-sentry": "^2.0.1",
    "babel-plugin-add-react-displayname": "^0.0.5",
    "babel-plugin-import": "^1.13.3",
    "caniuse-lite": "^1.0.30001180",
    "classnames": "^2.2.6",
    "codemirror": "^5.58.3",
    "console": "^0.7.2",
    "country-list": "^2.2.0",
    "cross-fetch": "^3.0.6",
    "cypress-file-upload": "^5.0.7",
    "dayjs": "^1.10.3",
    "deep-equal": "^2.0.5",
    "deep-object-diff": "^1.1.0",
    "eslint-plugin-cypress": "^2.11.3",
    "eslint-plugin-jest": "^24.3.6",
    "eslint-plugin-jest-dom": "^3.9.0",
    "eslint-plugin-mocha": "^9.0.0",
    "faker": "^5.5.3",
    "fast-deep-equal": "^3.1.3",
    "final-form": "^4.20.2",
    "final-form-arrays": "^3.0.2",
    "final-form-calculate": "^1.3.2",
    "final-form-focus": "^1.1.2",
    "format-string-by-pattern": "^1.2.2",
    "grant": "^5.4.15",
    "graphql": "^15.4.0",
    "hot-formula-parser": "^3.0.2",
    "isomorphic-unfetch": "^3.1.0",
    "jest-canvas-mock": "^2.3.1",
    "jest-fetch-mock": "^3.0.3",
    "lodash": "^4.17.15",
    "logrocket": "^1.0.14",
    "logrocket-react": "^4.0.1",
    "moment": "^2.29.1",
    "msw": "^0.33.1",
    "next": "^11.1.0",
    "next-compose-plugins": "^2.2.0",
    "next-connect": "^0.10.1",
    "next-fonts": "^1.0.3",
    "next-page-tester": "^0.27.2",
    "next-seo": "^4.17.0",
    "null-loader": "^4.0.1",
    "object.defaults": "^1.1.0",
    "omit-deep": "^0.3.0",
    "omit-deep-lodash": "^1.1.5",
    "path-parser": "^6.1.0",
    "performance-now": "^2.1.0",
    "pluralize": "^8.0.0",
    "provinces-ca": "^1.0.0",
    "qs": "^6.10.1",
    "randomcolor": "^0.6.2",
    "react": "^17.0.2",
    "react-beautiful-dnd": "^13.1.0",
    "react-confetti": "^6.0.1",
    "react-cookie": "^4.0.3",
    "react-dnd": "^14.0.2",
    "react-dnd-html5-backend": "^14.0.0",
    "react-dom": "^17.0.2",
    "react-final-form": "^6.5.3",
    "react-final-form-arrays": "^3.1.3",
    "react-final-form-listeners": "^1.0.3",
    "react-hook-form": "^7.11.1",
    "react-markdown": "^6.0.2",
    "react-scrollspy": "^3.4.3",
    "react-signature-canvas": "^1.0.3",
    "react-use": "^15.3.8",
    "responsive-loader": "^2.2.1",
    "states-us": "^1.0.1",
    "string-humanize": "^1.0.1",
    "titleize": "^2.1.0",
    "tozod": "^0.1.4",
    "type-fest": "^1.2.0",
    "typescript": "^4.3.2",
    "typescript-coverage-report": "^0.6.0",
    "universal-cookie": "^4.0.4",
    "uuid": "^8.3.2",
    "validator": "^13.5.2",
    "zod": "^3.5.1"
  },
  "devDependencies": {
    "@babel/core": "^7.12.10",
    "@graphql-codegen/cli": "1.20.0",
    "@graphql-codegen/fragment-matcher": "^2.0.1",
    "@graphql-codegen/import-types-preset": "^1.18.1",
    "@graphql-codegen/introspection": "1.18.1",
    "@graphql-codegen/jsdoc": "^1.17.9",
    "@graphql-codegen/named-operations-object": "^1.17.9",
    "@graphql-codegen/near-operation-file-preset": "^1.17.13",
    "@graphql-codegen/schema-ast": "^1.18.1",
    "@graphql-codegen/typed-document-node": "^1.18.2",
    "@graphql-codegen/typescript": "1.20.0",
    "@graphql-codegen/typescript-apollo-client-helpers": "^1.1.2",
    "@graphql-codegen/typescript-document-nodes": "^1.17.9",
    "@graphql-codegen/typescript-operations": "1.17.13",
    "@graphql-codegen/typescript-react-apollo": "2.2.1",
    "@graphql-eslint/eslint-plugin": "^1.0.1",
    "@graphql-typed-document-node/core": "^3.1.0",
    "@types/gtag.js": "^0.0.4",
    "@types/jest": "^26.0.23",
    "@typescript-eslint/eslint-plugin": "^4.14.1",
    "@typescript-eslint/parser": "^4.14.1",
    "babel-plugin-graphql-tag": "^3.1.0",
    "cypress": "^8.3.1",
    "eslint": "^7.18.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-config-airbnb-typescript": "^12.0.0",
    "eslint-config-next": "^11.0.0",
    "eslint-config-prettier": "^7.2.0",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-react": "^7.22.0",
    "eslint-plugin-react-hooks": "^4.2.0",
    "eslint-plugin-unused-imports": "^1.0.1",
    "graphql-codegen-apollo-next-ssr": "^1.3.0",
    "husky": "^4.3.8",
    "jest": "^27.0.5",
    "less": "^4.1.1",
    "lint-staged": "^10.5.3",
    "prettier": "^2.2.1",
    "ts-jest": "^27.0.3"
  }
}

Backend

json:package.json codesandbox=react { "dependencies": { "@apollo/client": "^3.3.7", "@aws-sdk/client-s3": "^3.22.0", "@aws-sdk/s3-request-presigner": "^3.23.0", "@babel/plugin-proposal-class-properties": "^7.12.1", "@babel/plugin-proposal-decorators": "^7.12.12", "@bull-board/api": "^3.3.0", "@bull-board/express": "^3.3.0", "@casl/ability": "^5.3.1", "@casl/prisma": "^1.0.0-alpha.1", "@cleartax/apollo-server-plugin-introspection-auth": "^1.1.0", "@giraphql/core": "^2.8.0", "@giraphql/plugin-scope-auth": "^2.3.0", "@giraphql/plugin-simple-objects": "^2.3.0", "@giraphql/plugin-validation": "^2.4.0", "@graphql-codegen/cli": "^1.21.6", "@graphql-codegen/typescript": "^1.22.4", "@graphql-codegen/typescript-operations": "^1.18.3", "@graphql-typed-document-node/core": "^3.1.0", "@jest-mock/express": "^1.4.2", "@prisma/client": "^2.26.0", "@sendgrid/mail": "^7.4.2", "@sentry/cli": "^1.63.1", "@sentry/integrations": "^6.9.0", "@sentry/node": "^6.9.0", "@sentry/tracing": "^6.9.0", "@slack/web-api": "^6.0.0", "@types/analytics-node": "^3.1.4", "@types/cookie-parser": "^1.4.2", "@types/faker": "^5.1.6", "@types/jest": "^26.0.24", "@types/jsonwebtoken": "^8.5.0", "@types/lodash": "^4.14.165", "@types/morgan": "^1.9.2", "@types/multer": "^1.4.7", "@types/node": "^14.14.25", "@types/node-fetch": "^2.5.12", "@types/pify": "^5.0.1", "@types/pluralize": "^0.0.29", "@types/randomcolor": "^0.5.5", "@types/throng": "^5.0.0", "@types/url-parse": "^1.4.3", "@types/uuid": "^8.3.0", "@types/validator": "^13.1.3", "@uploadcare/upload-client": "^1.1.2", "@vjpr/babel-plugin-parameter-decorator": "^1.0.15", "airtable": "^0.10.1", "analytics-node": "^4.0.1", "apollo-log": "^1.0.1", "apollo-server": "^2.19.2", "apollo-server-core": "^2.24.1", "apollo-server-express": "^2.24.1", "apollo-server-micro": "^2.19.2", "apollo-server-plugin-base": "^0.12.0", "apollo-server-testing": "^2.21.0", "arg": "^5.0.0", "axios": "^0.21.1", "babel-plugin-import": "^1.13.3", "babel-plugin-transform-typescript-metadata": "^0.3.1", "bluebird": "^3.7.2", "body-parser": "^1.19.0", "bullmq": "^1.39.3", "class-transformer": "^0.4.0", "class-validator": "^0.13.1", "cookie-parser": "^1.4.5", "cors": "^2.8.5", "cpy-cli": "^3.1.1", "csv-parse": "^4.15.4", "currency.js": "^2.0.3", "dayjs": "^1.10.3", "deep-diff": "^1.0.2", "del-cli": "^3.0.1", "eslint-plugin-jest": "^24.3.6", "exceljs": "^4.2.0", "express": "^4.17.1", "express-winston": "^4.1.0", "faker": "^5.3.1", "graphql": "^15.4.0", "graphql-scalars": "^1.9.3", "humanize-string": "^2.1.0", "jest": "^26.6.3", "jsonwebtoken": "^8.5.1", "jszip": "^3.6.0-0", "lodash": "^4.17.15", "lodash-humps-ts": "^0.0.6", "moment": "^2.29.1", "morgan": "^1.10.0", "multer": "^1.4.2", "nexus": "^1.0.0", "node-dev": "^4.0.0", "node-fetch": "^2.6.1", "object-hash": "^2.1.1", "open": "^8.2.1", "otplib": "^12.0.1", "performance-now": "^2.1.0", "pg": "^8.5.1", "pify": "^5.0.0", "pluralize": "^8.0.0", "prisma": "^2.26.0", "qs": "^6.10.1", "randomcolor": "^0.6.2", "repl.history": "^0.1.4", "serve-static": "^1.14.1", "slugify": "^1.5.3", "sql-highlight": "^3.3.2", "throng": "^5.0.0", "titleize": "^2.1.0", "ts-jest": "^26.5.1", "ts-node": "^9.1.1", "tslib": "^2.1.0", "type-fest": "^1.1.1", "typedi": "^0.7.3", "typescript": "^4.4.2", "typescript-coverage-report": "^0.6.0", "url-parse": "^1.5.1", "uuid": "^8.3.2", "validator": "^13.5.2", "why-is-node-running": "^2.2.0", "winston": "^3.3.3", "xlsx": "^0.17.1", "zod": "^3.8.1" }, "devDependencies": { "@babel/core": "^7.12.10", "@graphql-codegen/introspection": "1.18.2", "@types/bluebird": "^3.5.35", "@typescript-eslint/eslint-plugin": "^4.14.1", "@typescript-eslint/parser": "^4.14.1", "babel-plugin-graphql-tag": "^3.1.0", "eslint": "^7.18.0", "eslint-config-airbnb": "^18.2.1", "eslint-config-airbnb-typescript": "^12.0.0", "eslint-config-prettier": "^7.2.0", "eslint-plugin-import": "^2.22.1", "eslint-plugin-jsx-a11y": "^6.4.1", "eslint-plugin-prettier": "^3.3.1", "eslint-plugin-react": "^7.22.0", "eslint-plugin-react-hooks": "^4.2.0", "eslint-plugin-unused-imports": "^1.0.1", "husky": "^4.3.8", "lint-staged": "^10.5.3", "nodemon": "^2.0.7", "prettier": "^2.2.1", "ts-node-dev": "^1.1.1" } }

P.S. did you know we built our own marketing website + blog using Nextjs? This allows us to create a fast, SEO-optimized and feature-rich marketing website.