Hosting an Attendance Tracking App on Vercel

Table of Contents

• What is Vercel
• When should you consider using Vercel
• Key warnings before using Vercel
• Additional pricing info
• How to use Vercel
• Conclusion

Hi. This is kongs from Cloud Solution Group 2.
Usually we have ideas that we wish to develop, or have previous portfolios that we wish to showcase to increase our visibility to the outside world.
Usual website deployment is quite tedious, requiring the use of a hosting service provider, paying for a domain, and figuring out have to setup and manage it long term.
However, with the arrival of a new service provider called Vercel, we can now deploy our projects seamlessly without worrying about the above issues.
Today, I will introduce to everyone what is Vercel and how to use it.

What is Vercel

Vercel is a cloud platform that provides website hosting, mainly those using the React and Next.js frameworks. It allows you to validate project ideas, handles all the cumbersome aspects of hosting a website(having to register a domain, uptime, website traffic etc. ), and allows you to deploy very easily if you use Github.

When should you consider using Vercel

After using deploying a few projects, below are some points that

• You just want to deploy a website to showcase your project of portfolio.
• Your website is mainly frontend only and doesn’t rely on backend operations. (You can have backend features in your website, you just need to use API calls and set those up somewhere else.)
• You just want the website to run when accessed.
• The website will not have high traffic, and you don’t want to pay a lot for dedicated web hosting.

When you should not use Vercel

• You want a full stack deployment with backend included.
• You want to have dedicated hosting, with an actual normal looking domain for your website.
• You anticipate high website traffic, but at the same time do not have the budget to afford such a high usage.

Key warnings before using Vercel

While using Vercel to deploy your web projects is incredibly convenient, there are a few downsides. Below are a few key warnings that you should be mindful of before using Vercel:

• For a website requiring high performance, Vercel is not ideal due to cold start.
• It is recommended to use the Hobby tier for trying things out. If you exceed the usage limit however your website will be temporarily paused until the limit is refreshed or you pay
• High usage of your website when using Vercel can lead to incredibly high costs once you switched to the Pro tier exceed the free tier limit. (100 ~ 200% more expensive than if you hosted it on conventional cloud like AWS)
• Vercel is most certainly not suited for any team based project, as related functionality (such as role management) requires the paid plan.
• CI/CD, analytics and logging features are all locked behind paid plan.

Additional pricing info

Below is a list of key features that require payment to be used:

• Cold start prevention.
• Custom analytics that are not basic insights (such as page performance, Core Web Vitals etc.).
• Team seats and project management (20 US dollars per seat per month).
• Data transfer over 1TB.
• Origin transfer over 100GB.

The Pro tier costs 20 US dollars per month, and usage above the provided free tier limit can escalate quickly and get very expensive. It is recommended not to use Pro tier unless you absolutely need it and do not know how to deploy projects through cloud providers.

The detailed pricing info can be found in the following link:

https://vercel.com/docs/pricing

How to use Vercel

vercel.com

Access the link above. You will be greeted with the following landing page. Proceed with “Start Deploying”.

The easiest way to start hosting your project on Vercel is to have your project already set up on Github as a repository(either public or private). From there, you can directly import your repository for deployment.

https://attendance-app-bice.vercel.app/

The above is a website that I have coded as a demo. It accepts a simple name list in the form of “.docx” file format and displays the option to allow attendance taking. The image of the website itself is as follows:

Deploying the site on Vercel took no more than 5 minutes, from importing the repository to the site becoming visible. This shows how convenient Vercel can be when used for prototyping.

Conclusion

With the above example, we can clearly see how Vercel can be a very useful tool for any developer trying to get their ideas running as soon as possible. I encourage any enthusiast developer to try it out and see what great ideas you can create today.