{"id":19756100,"url":"https://github.com/kushshriv/vercel-clone-for-react-projects","last_synced_at":"2026-05-02T18:40:00.880Z","repository":{"id":253847631,"uuid":"844657232","full_name":"KushShriv/Vercel-Clone-for-React-Projects","owner":"KushShriv","description":"A Vercel clone that deploys a react project given it's GitHub Repository URL.","archived":false,"fork":false,"pushed_at":"2024-08-19T20:42:09.000Z","size":2512,"stargazers_count":0,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-10T22:36:03.741Z","etag":null,"topics":["aws-ec2","aws-s3","cloudflare-r2","nodejs","react","redis","sqs","typescript","vercel-deployment"],"latest_commit_sha":null,"homepage":"","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/KushShriv.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}},"created_at":"2024-08-19T17:52:07.000Z","updated_at":"2024-10-19T00:58:23.000Z","dependencies_parsed_at":"2024-08-20T00:26:02.993Z","dependency_job_id":null,"html_url":"https://github.com/KushShriv/Vercel-Clone-for-React-Projects","commit_stats":null,"previous_names":["kushshriv/vercel-clone-react-projects"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KushShriv%2FVercel-Clone-for-React-Projects","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KushShriv%2FVercel-Clone-for-React-Projects/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KushShriv%2FVercel-Clone-for-React-Projects/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KushShriv%2FVercel-Clone-for-React-Projects/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/KushShriv","download_url":"https://codeload.github.com/KushShriv/Vercel-Clone-for-React-Projects/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241086641,"owners_count":19907313,"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","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":["aws-ec2","aws-s3","cloudflare-r2","nodejs","react","redis","sqs","typescript","vercel-deployment"],"created_at":"2024-11-12T03:14:44.493Z","updated_at":"2026-05-02T18:40:00.822Z","avatar_url":"https://github.com/KushShriv.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vercel Clone for React Projects\r\n\r\n\u003cdiv align='center'\u003e\r\n\r\n![Project Overview](assets/Summary.png)\r\nProject Overview\r\n\u003c/div\u003e\r\n\r\nThe project is a Vercel clone designed to offer website deployment capabilities, consisting of three primary modules:\r\n\r\n- __Upload Feature__: Handles the uploading of files and assets necessary for deployment.\r\n- __Deploy Feature__: Manages the deployment process, including cloning repositories, preparing build environments, and deploying the website.\r\n- __Request Handler Feature__: Processes incoming requests, coordinating between the upload and deploy modules to ensure smooth operation.\r\n\r\nThe backend is built using `Node.js` and `TypeScript`, ensuring robust and scalable server-side functionality. The frontend is developed in `React` with `TypeScript`, providing a modern, responsive, and user-friendly interface for managing deployments. This setup offers a comprehensive solution for deploying websites efficiently.\r\n\r\n\u003cbr\u003e\r\n\r\n\u003cdiv align='center'\u003e\r\n\r\n![](https://img.shields.io/badge/TypeScript-3178C6.svg?style=for-the-badge\u0026logo=TypeScript\u0026logoColor=white)\r\n![](https://img.shields.io/badge/Node.js-5FA04E.svg?style=for-the-badge\u0026logo=nodedotjs\u0026logoColor=white)\r\n![](https://img.shields.io/badge/React-61DAFB.svg?style=for-the-badge\u0026logo=React\u0026logoColor=black)\r\n\r\n![](https://img.shields.io/badge/Redis-FF4438.svg?style=for-the-badge\u0026logo=Redis\u0026logoColor=white)\r\n![](https://img.shields.io/badge/Cloudflare-F38020.svg?style=for-the-badge\u0026logo=Cloudflare\u0026logoColor=white)\r\n\r\n![](https://img.shields.io/badge/Amazon%20SQS-FF4F8B.svg?style=for-the-badge\u0026logo=Amazon-SQS\u0026logoColor=white)\r\n![](https://img.shields.io/badge/Amazon%20S3-569A31.svg?style=for-the-badge\u0026logo=Amazon-S3\u0026logoColor=white)\r\n![](https://img.shields.io/badge/Amazon%20EC2-FF9900.svg?style=for-the-badge\u0026logo=Amazon-EC2\u0026logoColor=white)\r\n![](https://img.shields.io/badge/AWS%20Fargate-FF9900.svg?style=for-the-badge\u0026logo=AWS-Fargate\u0026logoColor=white)\r\n\u003c/div\u003e\r\n\r\n---\r\n\r\n## System Design\r\n\u003cdiv align=center\u003e\r\n\r\n![Deployment Diagram](assets/Deployment.png)\r\nDeployment Diagram\r\n\r\n![Request Handling Diagram](assets/ReqHandler.png)\r\nRequest Handling Diagram\r\n\u003c/div\u003e\r\n\r\n\u003e Another `Redis DB` is used for checking status of a given page. (Not in diagrams) \r\n\r\n---\r\n\r\n## Running the Project\r\n\r\n### Setup\r\n\r\n1. Clone the repository.\r\n```\r\ngit clone https://github.com/KushShriv/Vercel-Clone-React-Projects.git\r\n```\r\n\r\n2. Go to each of the 4 folder and run\r\n```\r\nnpm i\r\n```\r\n\r\n3. Create an AWS S3 or Cloudflare R2 bucket.\r\n\r\n4. Make a `.env` file in the root directory of the project.\r\n```\r\nS3_ACCESS_KEY_ID=\r\nS3_SECRET_ACCESS_KEY=\r\nS3_ENDPOINT=\r\n```\r\n\u003e Endpoint Not Required if you're using S3, it'll hit the right endpoint by default (Required for Cloudflare R2).\r\n\r\n5. In `frontend/src/components/landing.tsx`, change `dev.100xdevs.com:3001` to `localhost:3001` for running locally and `your_wildcard_domain:3001`(after creating one) for production.\r\n\r\n### Run Locally\r\n1. Run the following commands on different terminal instances\r\n```\r\nnode vercel-upload-service/dist/index.js\r\n\r\nnode vercel-deploy-service/dist/index.js\r\n\r\nnode vercel-request-handler/dist/index.js\r\n```\r\n\r\n2. In your own localhost Configuration, add `id.localhost` or `id.your_wildcard_domain:3001`, according to whatever you've done.\r\n\r\n### Deployment\r\n\u003e For any large scale deployment, these services would have to be containerized first (Ex: using something like `Docker` or `Kubernetes`).\r\n\r\n1. __Upload Service__:\r\n    - Deploy `Upload Service` on a cloud provider (Ex: `AWS EC2`)\r\n    - Change the `Redis` Queue and use the `AWS SQS + AWS Lambda` API to use that.\r\n\r\n2. __Deploy Service__:\r\n    - Deploy Upload Service using `AWS EC2 + AWS Fargate` so that it auto-scales with the size of the `SQS` queue size.\r\n\r\n3. __Request Handler__:\r\n    - Deploy using `AWS EKS` to deploy after `K8s` containerization.\r\n    - Use `Amazon Global Accelerator`, `AWS Global Network` for worldwide deployment.\r\n\r\n---\r\n\r\nDone with the help of [Harkirat Singh's YouTube Video](https://youtu.be/c8_tafixiAs?si=9TXDrw3krv6GmIMY) \r\n\r\n\u003e TODO: `// @ts-ignore;` in deploy/index.ts as the time it's returning is an object but TS implicitely thinks it's a string.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkushshriv%2Fvercel-clone-for-react-projects","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkushshriv%2Fvercel-clone-for-react-projects","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkushshriv%2Fvercel-clone-for-react-projects/lists"}