Product & Engineering
Sep 8, 2021
Our Startup Stack
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
package.json
1{ 2 "dependencies": { 3 "@ant-design/icons": "^4.4.0", 4 "@apollo/client": "^3.3.7", 5 "@flatfile/react": "^0.4.3", 6 "@hookform/error-message": "^2.0.0", 7 "@hookform/resolvers": "^2.6.0", 8 "@monaco-editor/react": "^4.1.3", 9 "@next/bundle-analyzer": "^10.0.7", 10 "@segment/analytics.js-core": "^4.1.10", 11 "@segment/snippet": "^4.13.2", 12 "@sentry/browser": "^6.9.0", 13 "@sentry/integrations": "^6.9.0", 14 "@sentry/node": "^6.9.0", 15 "@sentry/tracing": "^6.9.0", 16 "@sentry/webpack-plugin": "^1.14.0", 17 "@testing-library/dom": "^8.1.0", 18 "@testing-library/jest-dom": "^5.14.1", 19 "@testing-library/react": "^12.0.0", 20 "@testing-library/user-event": "^13.2.1", 21 "@types/classnames": "^2.2.11", 22 "@types/deep-equal": "^1.0.1", 23 "@types/faker": "^5.5.5", 24 "@types/lodash": "^4.14.165", 25 "@types/next-seo": "^2.1.2", 26 "@types/node": "^14.14.11", 27 "@types/omit-deep-lodash": "^1.1.1", 28 "@types/pluralize": "^0.0.29", 29 "@types/randomcolor": "^0.5.5", 30 "@types/react": "^17.0.0", 31 "@types/react-beautiful-dnd": "^13.0.0", 32 "@types/react-dom": "^17.0.0", 33 "@types/react-scrollspy": "^3.3.3", 34 "@types/react-signature-canvas": "^1.0.1", 35 "@types/uuid": "^8.3.0", 36 "@types/validator": "^13.1.3", 37 "@uploadcare/react-widget": "^1.3.4", 38 "@uploadcare/upload-client": "^1.1.2", 39 "airtable": "^0.10.1", 40 "antd": "4.12.3", 41 "apollo-link-sentry": "^2.0.1", 42 "babel-plugin-add-react-displayname": "^0.0.5", 43 "babel-plugin-import": "^1.13.3", 44 "caniuse-lite": "^1.0.30001180", 45 "classnames": "^2.2.6", 46 "codemirror": "^5.58.3", 47 "console": "^0.7.2", 48 "country-list": "^2.2.0", 49 "cross-fetch": "^3.0.6", 50 "cypress-file-upload": "^5.0.7", 51 "dayjs": "^1.10.3", 52 "deep-equal": "^2.0.5", 53 "deep-object-diff": "^1.1.0", 54 "eslint-plugin-cypress": "^2.11.3", 55 "eslint-plugin-jest": "^24.3.6", 56 "eslint-plugin-jest-dom": "^3.9.0", 57 "eslint-plugin-mocha": "^9.0.0", 58 "faker": "^5.5.3", 59 "fast-deep-equal": "^3.1.3", 60 "final-form": "^4.20.2", 61 "final-form-arrays": "^3.0.2", 62 "final-form-calculate": "^1.3.2", 63 "final-form-focus": "^1.1.2", 64 "format-string-by-pattern": "^1.2.2", 65 "grant": "^5.4.15", 66 "graphql": "^15.4.0", 67 "hot-formula-parser": "^3.0.2", 68 "isomorphic-unfetch": "^3.1.0", 69 "jest-canvas-mock": "^2.3.1", 70 "jest-fetch-mock": "^3.0.3", 71 "lodash": "^4.17.15", 72 "logrocket": "^1.0.14", 73 "logrocket-react": "^4.0.1", 74 "moment": "^2.29.1", 75 "msw": "^0.33.1", 76 "next": "^11.1.0", 77 "next-compose-plugins": "^2.2.0", 78 "next-connect": "^0.10.1", 79 "next-fonts": "^1.0.3", 80 "next-page-tester": "^0.27.2", 81 "next-seo": "^4.17.0", 82 "null-loader": "^4.0.1", 83 "object.defaults": "^1.1.0", 84 "omit-deep": "^0.3.0", 85 "omit-deep-lodash": "^1.1.5", 86 "path-parser": "^6.1.0", 87 "performance-now": "^2.1.0", 88 "pluralize": "^8.0.0", 89 "provinces-ca": "^1.0.0", 90 "qs": "^6.10.1", 91 "randomcolor": "^0.6.2", 92 "react": "^17.0.2", 93 "react-beautiful-dnd": "^13.1.0", 94 "react-confetti": "^6.0.1", 95 "react-cookie": "^4.0.3", 96 "react-dnd": "^14.0.2", 97 "react-dnd-html5-backend": "^14.0.0", 98 "react-dom": "^17.0.2", 99 "react-final-form": "^6.5.3", 100 "react-final-form-arrays": "^3.1.3", 101 "react-final-form-listeners": "^1.0.3", 102 "react-hook-form": "^7.11.1", 103 "react-markdown": "^6.0.2", 104 "react-scrollspy": "^3.4.3", 105 "react-signature-canvas": "^1.0.3", 106 "react-use": "^15.3.8", 107 "responsive-loader": "^2.2.1", 108 "states-us": "^1.0.1", 109 "string-humanize": "^1.0.1", 110 "titleize": "^2.1.0", 111 "tozod": "^0.1.4", 112 "type-fest": "^1.2.0", 113 "typescript": "^4.3.2", 114 "typescript-coverage-report": "^0.6.0", 115 "universal-cookie": "^4.0.4", 116 "uuid": "^8.3.2", 117 "validator": "^13.5.2", 118 "zod": "^3.5.1" 119 }, 120 "devDependencies": { 121 "@babel/core": "^7.12.10", 122 "@graphql-codegen/cli": "1.20.0", 123 "@graphql-codegen/fragment-matcher": "^2.0.1", 124 "@graphql-codegen/import-types-preset": "^1.18.1", 125 "@graphql-codegen/introspection": "1.18.1", 126 "@graphql-codegen/jsdoc": "^1.17.9", 127 "@graphql-codegen/named-operations-object": "^1.17.9", 128 "@graphql-codegen/near-operation-file-preset": "^1.17.13", 129 "@graphql-codegen/schema-ast": "^1.18.1", 130 "@graphql-codegen/typed-document-node": "^1.18.2", 131 "@graphql-codegen/typescript": "1.20.0", 132 "@graphql-codegen/typescript-apollo-client-helpers": "^1.1.2", 133 "@graphql-codegen/typescript-document-nodes": "^1.17.9", 134 "@graphql-codegen/typescript-operations": "1.17.13", 135 "@graphql-codegen/typescript-react-apollo": "2.2.1", 136 "@graphql-eslint/eslint-plugin": "^1.0.1", 137 "@graphql-typed-document-node/core": "^3.1.0", 138 "@types/gtag.js": "^0.0.4", 139 "@types/jest": "^26.0.23", 140 "@typescript-eslint/eslint-plugin": "^4.14.1", 141 "@typescript-eslint/parser": "^4.14.1", 142 "babel-plugin-graphql-tag": "^3.1.0", 143 "cypress": "^8.3.1", 144 "eslint": "^7.18.0", 145 "eslint-config-airbnb": "^18.2.1", 146 "eslint-config-airbnb-typescript": "^12.0.0", 147 "eslint-config-next": "^11.0.0", 148 "eslint-config-prettier": "^7.2.0", 149 "eslint-plugin-import": "^2.22.1", 150 "eslint-plugin-jsx-a11y": "^6.4.1", 151 "eslint-plugin-prettier": "^3.3.1", 152 "eslint-plugin-react": "^7.22.0", 153 "eslint-plugin-react-hooks": "^4.2.0", 154 "eslint-plugin-unused-imports": "^1.0.1", 155 "graphql-codegen-apollo-next-ssr": "^1.3.0", 156 "husky": "^4.3.8", 157 "jest": "^27.0.5", 158 "less": "^4.1.1", 159 "lint-staged": "^10.5.3", 160 "prettier": "^2.2.1", 161 "ts-jest": "^27.0.3" 162 } 163}
Backend
package.json
1{ 2 "dependencies": { 3 "@apollo/client": "^3.3.7", 4 "@aws-sdk/client-s3": "^3.22.0", 5 "@aws-sdk/s3-request-presigner": "^3.23.0", 6 "@babel/plugin-proposal-class-properties": "^7.12.1", 7 "@babel/plugin-proposal-decorators": "^7.12.12", 8 "@bull-board/api": "^3.3.0", 9 "@bull-board/express": "^3.3.0", 10 "@casl/ability": "^5.3.1", 11 "@casl/prisma": "^1.0.0-alpha.1", 12 "@cleartax/apollo-server-plugin-introspection-auth": "^1.1.0", 13 "@giraphql/core": "^2.8.0", 14 "@giraphql/plugin-scope-auth": "^2.3.0", 15 "@giraphql/plugin-simple-objects": "^2.3.0", 16 "@giraphql/plugin-validation": "^2.4.0", 17 "@graphql-codegen/cli": "^1.21.6", 18 "@graphql-codegen/typescript": "^1.22.4", 19 "@graphql-codegen/typescript-operations": "^1.18.3", 20 "@graphql-typed-document-node/core": "^3.1.0", 21 "@jest-mock/express": "^1.4.2", 22 "@prisma/client": "^2.26.0", 23 "@sendgrid/mail": "^7.4.2", 24 "@sentry/cli": "^1.63.1", 25 "@sentry/integrations": "^6.9.0", 26 "@sentry/node": "^6.9.0", 27 "@sentry/tracing": "^6.9.0", 28 "@slack/web-api": "^6.0.0", 29 "@types/analytics-node": "^3.1.4", 30 "@types/cookie-parser": "^1.4.2", 31 "@types/faker": "^5.1.6", 32 "@types/jest": "^26.0.24", 33 "@types/jsonwebtoken": "^8.5.0", 34 "@types/lodash": "^4.14.165", 35 "@types/morgan": "^1.9.2", 36 "@types/multer": "^1.4.7", 37 "@types/node": "^14.14.25", 38 "@types/node-fetch": "^2.5.12", 39 "@types/pify": "^5.0.1", 40 "@types/pluralize": "^0.0.29", 41 "@types/randomcolor": "^0.5.5", 42 "@types/throng": "^5.0.0", 43 "@types/url-parse": "^1.4.3", 44 "@types/uuid": "^8.3.0", 45 "@types/validator": "^13.1.3", 46 "@uploadcare/upload-client": "^1.1.2", 47 "@vjpr/babel-plugin-parameter-decorator": "^1.0.15", 48 "airtable": "^0.10.1", 49 "analytics-node": "^4.0.1", 50 "apollo-log": "^1.0.1", 51 "apollo-server": "^2.19.2", 52 "apollo-server-core": "^2.24.1", 53 "apollo-server-express": "^2.24.1", 54 "apollo-server-micro": "^2.19.2", 55 "apollo-server-plugin-base": "^0.12.0", 56 "apollo-server-testing": "^2.21.0", 57 "arg": "^5.0.0", 58 "axios": "^0.21.1", 59 "babel-plugin-import": "^1.13.3", 60 "babel-plugin-transform-typescript-metadata": "^0.3.1", 61 "bluebird": "^3.7.2", 62 "body-parser": "^1.19.0", 63 "bullmq": "^1.39.3", 64 "class-transformer": "^0.4.0", 65 "class-validator": "^0.13.1", 66 "cookie-parser": "^1.4.5", 67 "cors": "^2.8.5", 68 "cpy-cli": "^3.1.1", 69 "csv-parse": "^4.15.4", 70 "currency.js": "^2.0.3", 71 "dayjs": "^1.10.3", 72 "deep-diff": "^1.0.2", 73 "del-cli": "^3.0.1", 74 "eslint-plugin-jest": "^24.3.6", 75 "exceljs": "^4.2.0", 76 "express": "^4.17.1", 77 "express-winston": "^4.1.0", 78 "faker": "^5.3.1", 79 "graphql": "^15.4.0", 80 "graphql-scalars": "^1.9.3", 81 "humanize-string": "^2.1.0", 82 "jest": "^26.6.3", 83 "jsonwebtoken": "^8.5.1", 84 "jszip": "^3.6.0-0", 85 "lodash": "^4.17.15", 86 "lodash-humps-ts": "^0.0.6", 87 "moment": "^2.29.1", 88 "morgan": "^1.10.0", 89 "multer": "^1.4.2", 90 "nexus": "^1.0.0", 91 "node-dev": "^4.0.0", 92 "node-fetch": "^2.6.1", 93 "object-hash": "^2.1.1", 94 "open": "^8.2.1", 95 "otplib": "^12.0.1", 96 "performance-now": "^2.1.0", 97 "pg": "^8.5.1", 98 "pify": "^5.0.0", 99 "pluralize": "^8.0.0", 100 "prisma": "^2.26.0", 101 "qs": "^6.10.1", 102 "randomcolor": "^0.6.2", 103 "repl.history": "^0.1.4", 104 "serve-static": "^1.14.1", 105 "slugify": "^1.5.3", 106 "sql-highlight": "^3.3.2", 107 "throng": "^5.0.0", 108 "titleize": "^2.1.0", 109 "ts-jest": "^26.5.1", 110 "ts-node": "^9.1.1", 111 "tslib": "^2.1.0", 112 "type-fest": "^1.1.1", 113 "typedi": "^0.7.3", 114 "typescript": "^4.4.2", 115 "typescript-coverage-report": "^0.6.0", 116 "url-parse": "^1.5.1", 117 "uuid": "^8.3.2", 118 "validator": "^13.5.2", 119 "why-is-node-running": "^2.2.0", 120 "winston": "^3.3.3", 121 "xlsx": "^0.17.1", 122 "zod": "^3.8.1" 123 }, 124 "devDependencies": { 125 "@babel/core": "^7.12.10", 126 "@graphql-codegen/introspection": "1.18.2", 127 "@types/bluebird": "^3.5.35", 128 "@typescript-eslint/eslint-plugin": "^4.14.1", 129 "@typescript-eslint/parser": "^4.14.1", 130 "babel-plugin-graphql-tag": "^3.1.0", 131 "eslint": "^7.18.0", 132 "eslint-config-airbnb": "^18.2.1", 133 "eslint-config-airbnb-typescript": "^12.0.0", 134 "eslint-config-prettier": "^7.2.0", 135 "eslint-plugin-import": "^2.22.1", 136 "eslint-plugin-jsx-a11y": "^6.4.1", 137 "eslint-plugin-prettier": "^3.3.1", 138 "eslint-plugin-react": "^7.22.0", 139 "eslint-plugin-react-hooks": "^4.2.0", 140 "eslint-plugin-unused-imports": "^1.0.1", 141 "husky": "^4.3.8", 142 "lint-staged": "^10.5.3", 143 "nodemon": "^2.0.7", 144 "prettier": "^2.2.1", 145 "ts-node-dev": "^1.1.1" 146 } 147}
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.
Enjoyed this post? Stay in touch with us: