Engineering & Product

Our Startup Stack

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

Startup stack

Banking: [Brex](https://brex.com)
Shares and certificate management: [Carta](https://carta.com)
Product management: [Linear.app](https://linear.app)
Data management: [Airtable](https://airtable.com)
Design: [Figma](https://figma.com)
Documents: [Notion](https://notion.so) and [Google Docs](docs.google.com)
Communication: [Slack](https://slack.com)
Email: [Google](https://google.com) and [Superhuman](https://superhuman.com)
Calendar: [Calendly](https://calendly.com)
Password management: [1Password](https://1password.com)
Music: [Spotify](https://spotify.com)
Source control: [Github](https://github.com)
Code editor: [VS Code](https://vscode.com) with [Tabnine](https://tabnine.com)
Asset management: [S3](https://aws.amazon.com/s3/)
Content management: [Contentful](https://contentful.com/)
Transactional emails: [Sendgrid](https://sendgrid.com)
Office space: [WeWork](https://wework.com)
Coffee: [La Colombe](https://www.lacolombe.com/)

Tech stack

Frontend deployment and hosting: [Vercel/Nextjs](https://vercel.com)
Frontend stack: [Nextjs](https://nextjs.com), React, [Ant Design](https://ant.design/), [Apollo GraphQL](https://apollographql.com)
API deployment: [Heroku](https://heroku.com)
API stack: Nodejs, [Expressjs](https://expressjs.com/), [Prisma](https://www.prisma.io/), GraphQL
Error tracking: [Sentry](https://sentry.com)

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

```json:package.json
{
"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.

‍