Mac 239 setup resend emails #17
Conversation
…shcoding/monashcoding-site into mac-239-setup-resend-emails
…shcoding/monashcoding-site into mac-239-setup-resend-emails
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Pull request overview
This PR wires up a new contact form to send emails via Resend, adds a styled email template, and introduces the necessary environment/configuration changes. It also tweaks the visual styling of the contact page and social/contact cards.
Changes:
- Add Resend, React Email-related dependencies, and supporting packages to
package.json/package-lock.json. - Introduce an
EmailTemplateReact component used by a new/api/sendroute that sends contact form submissions via Resend. - Enhance
ContactPageClientwith a client-side validated contact form that posts to/api/send, and adjust styling for contact methods/social links.
Reviewed changes
Copilot reviewed 5 out of 6 changed files in this pull request and generated 11 comments.
Show a summary per file
| File | Description |
|---|---|
package.json |
Adds @react-email/components, @react-email/render, and resend dependencies to support server-side email rendering and delivery. |
package-lock.json |
Locks the dependency tree for the new email-related packages and their transitive dependencies. |
components/EmailTemplate.tsx |
New HTML table-based email layout for incoming contact form messages, used as the React template passed to Resend. |
components/ContactPageClient.tsx |
Implements the contact form UI, client-side validation, POST to /api/send, and some updated styling for contact blocks and social icons. |
app/api/send/route.ts |
New API route that reads form JSON, instantiates Resend with RESEND_API_KEY, and sends an email using EmailTemplate. |
.env.example |
Documents the new RESEND_API_KEY configuration variable required for the email feature. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
app/api/send/route.ts
Outdated
| import { EmailTemplate } from '../../../components/EmailTemplate'; | ||
| import { Resend } from 'resend'; | ||
|
|
||
| const resend = new Resend(process.env.RESEND_API_KEY); |
There was a problem hiding this comment.
RESEND_API_KEY is read directly from process.env when constructing the Resend client, but there is no guard for the case where it is missing or empty; this will cause failures that may be hard to diagnose. Consider explicitly checking for a defined API key and returning a clear 500 response (or throwing during startup) with a descriptive error message when it is not configured.
There was a problem hiding this comment.
This is correct, @stevenphanny
I've added a check in my most recent commit. Should now alert on startup.
| "postprocessing": "^6.38.2", | ||
| "react": "^19.2.0", | ||
| "react-dom": "^19.2.0", | ||
| "resend": "^6.7.0", |
There was a problem hiding this comment.
Adding the resend dependency at this version pulls in packages whose engines fields require Node.js >= 20 (see package-lock.json), which effectively raises the minimum supported Node version for the app. Please confirm that your deployment and local environments are on Node 20+ or consider pinning to a compatible version if you need to support older Node runtimes.
There was a problem hiding this comment.
@Swofty-Developments is this fine to leave added in?
Currently it doesn't compile
|
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
mb didn't add the API key to vercel. Just added it. Should work now? |
2 participants
To be changed: