Day 60 of #100DaysOfCode — Deploying the Task App

#webdev #programming #tutorial #100daysofcode

Over the past two days, I built and styled a Task Manager app with Next.js, MongoDB, and Shadcn UI. Today was the final step: getting it live on Vercel.

Why Vercel?

Vercel is made by the same team behind Next.js, so deployment is essentially zero-config. No server setup, no CI/CD pipeline to configure, just connect your repo and push.

Steps Followed

1. Push code to GitHub
Make sure your project is in a GitHub repo before anything else.

2. Import the project on Vercel
Go to vercel.com → New Project → Import your GitHub repo. Vercel auto-detects it's a Next.js app.

3. Add Environment Variables
This is the most important step. Your .env.local file doesn't get pushed to GitHub, so you need to add your variables manually in Vercel:

MONGODB_URI=your_mongodb_connection_string

Go to: Project Settings → Environment Variables → add them there.

4. Deploy
Hit deploy. That's it. Vercel builds and hosts it automatically.

Every git push to your main branch triggers a new deployment going forward.

Gotcha: MongoDB Atlas Network Access

If your app connected fine locally but throws errors in production, check MongoDB Atlas → Network Access. You need to allow connections from anywhere (0.0.0.0/0) since Vercel uses dynamic IPs.

What I Learned

Environment variables must be added manually on Vercel — don't assume they carry over
Vercel's build logs are really useful for debugging deployment errors
Going from local to live took less than 5 minutes with Next.js + Vercel