Project Overview
The Benison Web App was developed as a robust, interactive platform aimed at enhancing both the user experience and the admin's ability to manage leads and performance insights effectively. Built with Next.js and Tailwind CSS, the application combines sleek, responsive design with powerful backend integrations and a custom analytics dashboard.
Tech Stack
Frontend: Next.js, Tailwind CSS, GSAP (for animation)Backend: Node.js (via Next API routes), Nodemailer, Brevo SMTPAuthentication: NextAuth with OAuthAnalytics & Data: Chart.js, Google Analytics API, Google Sheets API Core Features
1. Beautiful, Animated Frontend
The website's frontend features a clean layout styled with Tailwind CSS and enhanced with subtle animations using GSAP. These animations help guide user interaction and bring the interface to life without overwhelming functionality.
2. Form Integration with Google Sheets
All form submissions on the site are dynamically routed to a Google Spreadsheet using the Google Sheets API, enabling seamless, low-maintenance data collection. This integration gives the Benison team an organized, real-time overview of user inputs and contact requests.
3. Email Notifications via Nodemailer & Brevo SMTP
Whenever a user submits a form, the admin receives an instant email notification using Nodemailer and Brevo's SMTP service. This ensures timely follow-ups and reduces lead response time.
4. Custom Admin Dashboard
A dedicated admin panel was built into the application, protected by secure login via NextAuth and OAuth. The dashboard offers:
Website Analytics: Fetched in real-time from the Google Analytics API, displaying traffic metrics and user behaviorForm Submissions: Displayed directly from the connected Google Spreadsheet, with filtering and sorting options5. Authentication & Security
Access to the dashboard is protected by NextAuth, leveraging OAuth providers for secure login. This ensures only authorized users can view sensitive data and analytics.
