{"id":26926465,"url":"https://github.com/pa4080/vercel-basic-replica","last_synced_at":"2026-04-09T17:05:13.736Z","repository":{"id":234678640,"uuid":"789362492","full_name":"pa4080/vercel-basic-replica","owner":"pa4080","description":"Build your React or Astro projects online","archived":false,"fork":false,"pushed_at":"2025-05-01T07:59:52.000Z","size":879,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-01T08:44:48.951Z","etag":null,"topics":["authjs","aws-s3","cloudflire-r2","express","javascript","react","typescript","vite"],"latest_commit_sha":null,"homepage":"https://vercel-basic-replica.metalevel.cloud/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pa4080.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-04-20T10:31:51.000Z","updated_at":"2025-05-01T07:59:51.000Z","dependencies_parsed_at":"2024-05-03T19:57:23.156Z","dependency_job_id":"d49ee319-3088-439e-b44d-10de80a10719","html_url":"https://github.com/pa4080/vercel-basic-replica","commit_stats":null,"previous_names":["pa4080/vercel-basic-replica"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/pa4080/vercel-basic-replica","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pa4080%2Fvercel-basic-replica","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pa4080%2Fvercel-basic-replica/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pa4080%2Fvercel-basic-replica/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pa4080%2Fvercel-basic-replica/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pa4080","download_url":"https://codeload.github.com/pa4080/vercel-basic-replica/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pa4080%2Fvercel-basic-replica/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28131616,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-12-30T02:00:05.476Z","response_time":64,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["authjs","aws-s3","cloudflire-r2","express","javascript","react","typescript","vite"],"created_at":"2025-04-02T03:32:16.596Z","updated_at":"2025-12-30T20:03:44.540Z","avatar_url":"https://github.com/pa4080.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vercel Simple Replica\n\nThis is an TypeScript/Node exercise. The goal of the project is to reproduce the basic functionality of Vercel:\n\n1. Upload service and request handler (a router that provides the API of the application and serves the frontend),\n2. Deploy service (loop worker),\n3. Frontend app (built with React/Vite, by the help of Tailwind CSS and Shadcn/UI).\n\n## Technologies in use\n\n- TypeScript\n- Node\n- Express\n- Redis | Upstash Redis \u003chttps://console.upstash.com\u003e, \u003chttps://developers.cloudflare.com/workers/databases/native-integrations/upstash\u003e\n- CloudFlare R2, workers, DNS, Tunnels. \u003chttps://developers.cloudflare.com\u003e\n- `@aws-sdk` v3 as client for CloudFlare R2.\n- Doppler \u003chttps://doppler.com\u003e\n- AuthJS:\n  - \u003chttps://authjs.dev/getting-started/installation?framework=express\u003e\n  - \u003chttps://authjs.dev/reference/express\u003e\n  - \u003chttps://authjs.dev/reference/adapter/upstash-redis\u003e\n- React/Vite\n- Tailwind CSS\n- Shadcn/UI\n- MongoDB\n\n## References\n\n- [Code along Vercel - I built Vercel in 4 Hours (System Design, AWS, Redis, S3) by Harkirat Singh at YouTube \\*this is the main tutorial of this exercise](https://youtu.be/c8_tafixiAs?si=WI9AJLQdzQZO0r3X)\n- [Code along Vercel - Daily code by Harkirat Singh at his Learning Paths site](https://projects.100xdevs.com/tracks/ZSQI8YNE0iL6sT1hJpts/vercel-1)\n- [Code along Vercel - repo by Harkirat Singh at GitHub](https://projects.100xdevs.com/tracks/ZSQI8YNE0iL6sT1hJpts/vercel-1)\n\n## Daily code\n\n### Init the project\n\n- _`pnpm` is used for the project init and package management_\n\n```bash\nmkdir -p vercel-simple-replica\ncd vercel-simple-replica\ngit init\npnpm init\npnpm --package=typescript dlx tsc --init\n```\n\n- Tweak the [`tsconfig.json`](tsconfig.json) file - create the necessary directories `mkdir -p dist src` .\n- Add few dependencies, for more details see the [package.json](package.json) file.\n- Setup the linting and staging tools.\n\n### Coding the upload server\n\n- See [`src/index.ts`](src/index.ts) for the app logic.\n- [Code along Vercel steps - Upload service](https://projects.100xdevs.com/tracks/ZSQI8YNE0iL6sT1hJpts/vercel-1)\n- [Coding the upload server at YouTube](https://www.youtube.com/watch?v=c8_tafixiAs\u0026t=1507s)\n- [NPM: `simple-git`](https://www.npmjs.com/package/simple-git)\n- [NPM: `nodemon`](https://www.npmjs.com/package/nodemon)\n- [Setup `nodemon` and `ts-node` example](https://khalilstemmler.com/blogs/typescript/node-starter-project/#Cold-reloading)\n\n### Node (TS) CLI hints\n\nRun a TS file:\n\n```bash\npnpm exec ts-node --skip-project src/utils/random.ts\n```\n\nRun a function from a file:\n\n```bash\npnpm exec ts-node --skip-project -e 'require(\"./src/utils/random.ts\").generateId()'\n```\n\n### Setup ProcessEnv and Zod\n\n- [Validate Environment Variables With Zod article by Catalin Pit](https://catalins.tech/validate-environment-variables-with-zod/)\n- [You're typing process.env wrong at YouTube by Matt Pocock](https://www.youtube.com/watch?v=q1im-hMlKhM)\n- [DON'T USE Environment Variables Without This at YouTube by James Q Quick](https://www.youtube.com/watch?v=dCzNA9nUxuo)\n\n### Setup CloudFlare R2\n\n- Login to CloudFlare: \u003chttps://cloudflare.net/\u003e\n- Go to `Workers \u0026 Pages` \u003e `R2` (They provides 10GB/month for free)...\n  - [Cloudflare API Docs](https://developers.cloudflare.com/api/)\n  - [Cloudflare R2 Docs](https://developers.cloudflare.com/r2/)\n- Activate the `R2` option\n- Create a new bucket - i.e. `vercel-simple-replica`\n- Integrate the R2 bucket with our upload server [@see the relevant section of the main tutorial](https://youtu.be/c8_tafixiAs?si=5UkwO9I-ZtrtnqkL\u0026t=3582)\n  - Copy your `Account ID` and create envvar `CLOUDFLARE_ACCOUNT_ID`,\n  - Go to _Manage R2 API Tokens_ and:\n    - Create a new API Token - for example name it `vercel-simple-replica-token` with _Permissions_ `Object Read \u0026 Write` and specify the bucket - `vercel-simple-replica`.\n    - Create the env-vars related to the new token - `CLOUDFLARE_API_TOKEN`, `CLOUDFLARE_API_ACCESS_KEY_ID`, `CLOUDFLARE_API_ACCESS_KEY_SECRET`, `CLOUDFLARE_API_ENDPOINT`.\n\n### Migrate from aws-sdk v2 to v3\n\n- [AWS Docs: Migrate to version 3](https://docs.aws.amazon.com/sdk-for-javascript/v3/developer-guide/migrating.html)\n- [AWS Docs:AWS SDK for JavaScript](https://docs.aws.amazon.com/sdk-for-javascript/v3/developer-guide/getting-started-nodejs.html)\n- [Upgrading Notes (2.x to 3.x) from `aws-sdk-js-v3` at GitHub](https://github.com/aws/aws-sdk-js-v3/blob/main/UPGRADING.md)\n\n```bash\nnpx aws-sdk-js-codemod -t v2-to-v3 src/aws.ts\n\npnpm remove aws-sdk\n\npnpm i @aws-sdk/client-s3\npnpm i @aws-sdk/lib-storage\n```\n\n### Put the repoId inside of a deployment que\n\nWe're using Redis as a message queue to handle the uploading process asynchronously.\nFor this, a Redis docker container is deployed and the necessary environment variables to connect to it are defined.\n\nTo test the connection via `redis-cli` we can use the following command:\n\n```bash\ndoppler run --command 'redis-cli -u \"$REDIS_URL\"'\ndoppler run -- sh -c 'redis-cli -u \"$REDIS_URL\"'\n```\n\n```sql\nKEYS *\nLPUSH build-queue test-Id-123\nRPOP build-queue\n```\n\n- `RPOP` pop the first item on the right of the list/queue,\n- `LPOP` pop the first item on the left of the list/queue.\n\nReferences:\n\n- [Redis Queue](https://redis.com/glossary/redis-queue/) \u003e [BullMQ at GitHub](https://github.com/taskforcesh/bullmq?tab=readme-ov-file) | [**BullMQ Docs**](https://docs.bullmq.io/readme-1)\n- [AWS docs: What is Amazon Simple Queue Service?](https://docs.aws.amazon.com/AWSSimpleQueueService/latest/SQSDeveloperGuide/welcome.html) | [Amazon Simple Queue Service](https://aws.amazon.com/sqs/)\n\n### Deploy service\n\n- [Code along Vercel steps - Upload service](https://projects.100xdevs.com/tracks/ZSQI8YNE0iL6sT1hJpts/vercel-2)\n- [Coding the upload server at YouTube](https://www.youtube.com/watch?v=c8_tafixiAs\u0026t=4905s)\n\nIn contrast to the main tutorial, here all services are within the same TS project.\n\n### Some icons\n\n- \u003chttps://emojis.wiki/\u003e\n- 💀👽🎩🤖👦💧🩸🚀🚗🔧🔩🔨🔧🪛❌💻🧲🧭🎲💾🔔🔗📥⛲🔒🧰🧊'🖥 '🧬🐾'♨️ '🌵\n\n### Build the request handler\n\n- [Code along Vercel steps - Upload service](https://projects.100xdevs.com/tracks/ZSQI8YNE0iL6sT1hJpts/vercel-3)\n- [Build the request handler at YouTube](https://youtu.be/c8_tafixiAs?si=DbNfFxzdd646XHE2\u0026t=7212s)\n- [Step-by-Step Guide: Uploading and Downloading Binary Files to AWS S3 v3 using serverless JavaScript](https://dev.to/restdbjones/step-by-step-guide-uploading-and-downloading-binary-files-to-aws-s3-v3-using-nodejs-and-codehooksio-4olh)\n\n### Auth.js\n\nThere are few things to do:\n\n1) Add `\"type\": \"module\"` into the `package.json` file of your express project. Reference: [@auth/express No \"exports\" main defined #9987](https://github.com/nextauthjs/next-auth/issues/9987)\n2) If you are using `ts-node` it will throw `TypeError: Unknown file extension \".ts\"` with the above setup, so the easiest way is to switch to `tsx`. Reference: [An answer from StackOverflow](https://stackoverflow.com/a/76343394/6543935)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpa4080%2Fvercel-basic-replica","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpa4080%2Fvercel-basic-replica","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpa4080%2Fvercel-basic-replica/lists"}