Previously, on Day 48, I deployed the backend of the auth system on Vercel. For today, Day 49, the goal was to deploy the frontend of the auth system.
The thing is, deploying the frontend on Vercel is a very easy process compared to the backend deployment
Step 1: Create .env file
VITE_API_URL=Backend_API
This will store the URL of your deployed backend.
Step 2: Change the URL in the App.tsx
const API_URL = import.meta.env.VITE_API_URL;
Why import.meta.env?
import.meta is a JavaScript ES module feature that contains metadata about the current module.
In Vite:
-
import.meta.env→ holds all environment variables - Only variables prefixed with
VITE_are exposed to the frontend
So:
-
import.meta→ module metadata -
.env→ environment variables -
.VITE_API_URL→ your custom variable
👉 During npm run build, Vite replaces this with the actual value.
It’s basically Vite’s version of:
process.env.YOUR_VARIABLE
Step 3: Deploy on Vercel
- After pushing the repo to GitHub, go to Vercel
- Click Add New → Project
- Import your GitHub repository
No additional configuration is needed before deployment since Vercel takes care of it.
Step 4: Add Environment Variables
Before deploying:
- Go to Environment Variables
- Add all values from your
.envfile
Important: If you skip this step, your API calls won’t work.
Step 6: Deploy
Click Deploy and let Vercel handle the rest.
After deployment:
- You’ll get a live URL
- The frontend is now publicly accessible
Live Demo
The frontend is live on this link.
Try this flow:
- Register a new user
- Log in
- View the dashboard with logged-in users
Final Thoughts
Looking back at the journey so far, this deployment feels like everything is finally coming together.
I started by learning the frontend using React, then improved it with TypeScript to make the code more structured and reliable. After that, I moved into backend development with Node.js and Express.js, where things started to feel more “real”; handling routes, structuring controllers, adding middleware, and implementing authentication.
Then came the database layer with MongoDB and Mongoose, where the app actually started storing and managing real user data.
And now, with both the frontend and backend deployed, all those pieces are no longer separate concepts; they’re connected parts of one complete, working system.
This wasn’t just about learning individual technologies. It was about understanding how everything fits together:
- Frontend talks to backend
- Backend handles logic and authentication
- Database persists the data
- Deployment makes it all accessible to the world
Reaching this point makes the whole journey feel worth it. It’s no longer just “practice projects” — it’s a real, live application.
Thanks for reading. Feel free to share your thoughts!
