Over the past few weeks, I built and deployed LexaChat, a full-stack AI chat platform designed with modern architecture, secure authentication, and production-level deployment practices.
This project helped me understand how real SaaS applications are built, deployed, and secured.
Live: https://www.lexachat.online
Tech Stack
Frontend
React (Vite)
Tailwind CSS
Axios
React Router
Backend
Node.js
Express.js
MongoDB Atlas
JWT Authentication
Deployment
Vercel (Frontend)
Render (Backend)
Email Service
Resend (for password reset emails)
Features
Secure Authentication
User signup and login
Password hashing using bcrypt
JWT-based authentication
Protected routes
Forgot & Reset Password
Secure reset tokens
Email delivery using Resend
Token expiration handling
Production-grade reset flow
Modern UI
Clean dark theme interface
Responsive design
Fast and minimal experience
Production Deployment
Frontend deployed on Vercel
Backend deployed on Render
Environment variables properly configured
Custom domain setup
Architecture Overview
Frontend → Vercel
Backend → Render
Database → MongoDB Atlas
Email → Resend
Domain → GoDaddy
This architecture is commonly used in modern SaaS applications.
Biggest Challenges I Faced
Email Delivery Issues
Initially, SMTP caused timeout issues on Render.
I solved this by integrating Resend and verifying my domain, which provided reliable email delivery.
Reset Password Routing (Vercel 404)
Direct reset links caused 404 errors because Vercel didn’t recognize React routes.
Solution: Added vercel.json rewrite configuration.
Environment Variables and Deployment Debugging
Managing environment variables correctly between local and production environments was critical.
What I Learned
This project taught me how to:
Build a production-ready MERN application
Implement secure authentication systems
Deploy frontend and backend separately
Handle real-world debugging scenarios
Integrate third-party services like Resend
Manage domain and DNS configuration
Most importantly, I learned how to take a project from idea → production.
Why I Built LexaChat
My goal was to understand how real AI and SaaS applications are built and deployed, not just locally but in a production environment with real infrastructure.
This project is a foundation for adding more advanced AI features in the future.
Try it Yourself
Live app:
https://www.lexachat.online
What’s Next
Planned features include:
AI chat integration
Real-time messaging
User profiles
Persistent chat history
Advanced AI assistant features
Final Thoughts
Building and deploying LexaChat gave me valuable real-world experience in full-stack development.
If you're learning full-stack development, I highly recommend building and deploying your own project. Deployment teaches lessons you won’t learn from tutorials alone.
Top comments (0)