As a computer science student, I am always looking for another cool side project to keep me busy. These ideas for side projects can come from anywhere; sometimes from the places you least expect.

作为计算机科学专业的学生，​​我一直在寻找另一个很酷的项目来让我忙。 这些辅助项目的想法可以来自任何地方。 有时来自您最不期望的地方。

The other day I was scrolling through TikTok when I can across this video. Basically, it’s about how there are people in this world born on the same day and were in the same hospital are you were. Neat, right? I then looked at the comments and multiple users were saying there should be a website for this. Immediately I knew what I had to do. In this post, I will talk about how I was able to build and deploy this site in only a few hours completely for free by using various popular coding technologies.

前几天，当我可以浏览这段视频时，我正在滚动浏览TikTok。 基本上，这是关于这个世界上在同一天出生的人和您在同一家医院的情况。 整洁吧？ 然后，我查看了评论，多个用户说应该为此提供一个网站。 我立刻知道我该做什么。 在本文中，我将讨论如何使用各种流行的编码技术完全免费地在几个小时内构建和部署该站点。

Before I talk about the technology, I want to quickly discuss what I am trying to build. Essentially, it is a website where users can create an account and input their information like their name, birthday, hospital name, and snapchat username (for a way to contact). After they do this, they can see a table of every other user who has inputted their information. They can then (hopefully) find others with the same birthday and hospital!

在谈论技术之前，我想快速讨论一下我要构建的内容。 从本质上讲，这是一个网站，用户可以在其中创建一个帐户并输入其信息，例如姓名，生日，医院名称和贵金属用户名(用于联系方式)。 完成此操作后，他们可以看到输入了信息的所有其他用户的表。 然后，他们可以(希望)找到生日和医院相同的其他人！

Over time I plan to add new features (because right now this is essentially an Excel spreadsheet clone), but for the moment that is the idea.

随着时间的推移，我计划添加新功能(因为现在这实际上是一个Excel电子表格克隆)，但目前还是这个主意。

Now for the interesting part. Let’s look at the technology I used to build this.

现在开始有趣的部分。 让我们看看我用来构建它的技术。

Right off the bat I knew I was going to build this in Next.js. I had just finished uploading a tutorial series on YouTube about it and I built my personal website using it so I was confident I could quickly and easily get this site up and running with Next.js.

马上我就知道我要在Next.js中构建它。 我刚刚在YouTube上上传了一个教程系列，并使用它构建了我的个人网站 ，因此我确信我可以使用Next.js轻松快速地启动并运行该网站。

Next.js gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. No config needed.

Next.js为您提供最佳的开发人员体验，包括生产所需的所有功能：静态和服务器混合渲染，TypeScript支持，智能捆绑，路由预取等。 无需配置。

My next challenge was deciding how and where to store the data. For this, I turned to Google’s Firebase. I had worked with Firebase before in various forms, including with Flutter and Vanilla JavaScript, but not yet with Next.js. No problem though, because Next.js has amazing documentation and example projects. I was able to clone this firebase auth repo and get on my way. As seen by the repo name, Firebase also helped in another way; providing a means of authentication.

我的下一个挑战是确定如何以及在哪里存储数据。 为此，我转向了Google的Firebase 。 之前，我曾以多种形式使用Firebase，包括Flutter和Vanilla JavaScript，但尚未使用Next.js。 没问题，因为Next.js具有出色的文档和示例项目。 我能够克隆此Firebase身份验证回购并继续前进。 如回购名称所示，Firebase也提供了另一种帮助。 提供一种认证方式。

Firebase helps mobile and web app teams succeed

Firebase帮助移动和Web应用程序团队成功

To quickly build a UI for this site, I turned to Bootstrap, specifically react bootstrap. Using it, I was able to code the Nav bar and the Modals quickly. Then, I used npm package “react-bootstrap-table-next” to build the table for the data. This allowed be to dynamically generate the data and add a search bar easily (see code below). Both of these technologies accounted for 99% of my UI.

为了快速为该站点构建UI，我转向了Bootstrap ，特别是react bootstrap。 使用它，我能够对Nav栏和Modals进行快速编码。 然后，我使用npm包“ react-bootstrap-table-next”来构建数据表。 这样可以动态生成数据并轻松添加搜索栏(请参见下面的代码)。 这两种技术都占了我的UI的99％。

I also used HTML and CSS for some basic markup because, let’s face it, you can’t build a website without them.

我还使用HTML和CSS进行一些基本标记，因为面对现实，如果没有它们，您将无法建立网站。

The last step was to add Google Analytics to, you guessed it, track my analytics. Adding Google Analytics to Next.js is more complicated that you may think. Fortunately for me, I added it to my personal website a couple of months ago so I was able to copy and paste that code. I would recommend checking out my personal website repo to see how its done and copy the code if you are planning on integrating Google Analytics with your Next.js project.

您猜到，最后一步是将Google Analytics(分析)添加到跟踪我的分析中。 您可能会认为，将Google Analytics(分析)添加到Next.js更加复杂。 对我来说幸运的是，几个月前我将其添加到了我的个人网站，因此我能够复制并粘贴该代码。 如果您打算将Google Analytics(分析)与Next.js项目集成在一起，建议您查看我的个人网站存储库 ，看看它是如何完成的，并复制代码。

Google Analytics is a web analytics service offered by Google that tracks and reports website traffic, currently as a platform inside the Google Marketing Platform brand.

Google Analytics(分析)是Google提供的一项网络分析服务，可跟踪和报告网站流量，目前作为Google Marketing Platform品牌内部的一个平台。

After the site was built, all I needed to do was deploy. For this, I turned to 3 technologies. First, I pushed all my code to a GitHub repo. Then, I connected that repo to Vercel where I deployed the app for free. Vercel is great because it allows you to simply push changes to GitHub and your website will automatically get rebuilt and deployed in a matter of minutes. Finally, I used Namecheap to buy and connect a custom domain for the app (the only optional cost for this project). A custom domain name gives it a more professional feel and makes it easily accessible to your users. You can access the website at: https://findyourbabybuddies.com/. Don’t forget to register and update your profile while you’re there!

构建站点之后，我需要做的就是部署。 为此，我转向了3种技术。 首先，我将所有代码推送到GitHub repo 。 然后，我将该仓库连接到Vercel ，在此我免费部署了该应用程序。 Vercel很棒，因为它允许您简单地将更改推送到GitHub，并且您的网站将在几分钟内自动重建和部署。 最后，我使用Namecheap购买并连接了该应用程序的自定义域(此项目的唯一可选费用)。 自定义域名赋予它更专业的感觉，并使其易于用户访问。 您可以访问以下网站： https : //findyourbabybuddies.com/ 。 在那里时，请不要忘记注册和更新您的个人资料！

Here are all the technologies I used in a quick view:

这是我快速浏览过的所有技术：

I learned a lot from this project, but the most important lesson I learned was launch before (you think) you’re ready. This may be risky advice, but let me explain. Here’s a quote by Reid Hoffman that I have grown to live by. He says, “If you are not embarrassed by the first version of your product, you’ve launched too late.” When I initially launched this site, there were still features I wanted to add and some small bugs that needed to be fixed. However, if I kept adding every new feature that I thought of, I would never launch! The site worked and it was ready, so I made it live. Did I know the site could be better? Of course. But by having the site live, I was able to get some feedback and made changes/added new features based on that feedback. In fact, I made 5 commits to GitHub in the first 3 hours after launch and I’m still making multiple commits a day to this day!

我从这个项目中学到了很多东西，但是我学到的最重要的一课是在准备就绪之前启动。 这可能是冒险的建议，但让我解释一下。 这是我赖以生存的里德·霍夫曼(Reid Hoffman)的一句话。 他说： “如果您对产品的第一个版本不感到尴尬，那么发布太晚了。” 当我最初启动此站点时，仍然有我要添加的功能以及一些需要修复的小错误。 但是，如果我继续添加我想到的每个新功能，我将永远不会启动！ 该网站可以正常使用，并且已经准备就绪，因此我将其启用。 我知道这个网站可能会更好吗？ 当然。 但是通过启用该站点，我能够获得一些反馈，并根据该反馈进行更改/添加了新功能。 实际上，在启动后的前三个小时内，我对GitHub进行了5次提交，而直到今天我仍在进行多次提交！

If you are not embarrassed by the first version of your product, you’ve launched too late. — Reid Hoffman

如果您对产品的第一个版本不感到尴尬，那么您上手太晚了。 —里德霍夫曼

That’s it for this article. I hope you enjoyed and be sure to check out some of my other articles and subscribe to me on YouTube to learn about all things computer science!

本文就是这样。 希望您喜欢并一定要阅读我的其他文章，并在YouTube上订阅我，以了解计算机科学的所有知识！