Creating MongoDB API with Prisma for Contact Form

I'll create a complete API solution for your contact form using Prisma with MongoDB as the database and Next.js API routes. Let's implement this step by step.

Setting Up Your MongoDB Database

Before you can use the API, you need to set up your MongoDB database and configure Prisma:

1. First, create a MongoDB database (you can use MongoDB Atlas for a free cloud database)
2. Create a .env file in your project root with your MongoDB connection string:

3. Initialize Prisma and generate the client:

How the API Works

I've created a complete API solution for your contact form with the following components:

1. Prisma Schema: Defines the MongoDB model for storing form submissions

2. API Routes:

   • POST /api/contact - Creates a new form submission
   • GET /api/contact - Gets all submissions (for admin purposes)
   • GET /api/contact/[id] - Gets a specific submission by ID
   • DELETE /api/contact/[id] - Deletes a specific submission
   • GET /api/contact/admin - Admin endpoint to get all submissions
   • GET /api/contact/count - Gets submission statistics

3. Form Integration: I've updated your contact form component to:

   • Send form data to the API
   • Handle loading states
   • Display success and error messages
   • Use toast notifications

Using the API

The form now submits data to your MongoDB database through the Prisma ORM. When a user submits the form:

1. The client-side validation occurs first (using Zod)
2. If valid, the data is sent to the /api/contact endpoint
3. The server validates the data again
4. The data is stored in MongoDB
5. A success response is returned to the client

Error Handling

The API includes comprehensive error handling:

• Validation errors are returned with specific messages
• Database errors are caught and logged
• Client-side error display shows user-friendly messages

Admin Functionality

I've included basic admin endpoints to:

• View all submissions
• Get submission statistics
• Delete submissions

In a production environment, you would want to add authentication to these endpoints.

Next Steps

1. Deploy your application with the MongoDB connection string as an environment variable
2. Consider adding authentication for admin routes
3. You might want to add email notifications when new submissions are received

This implementation follows best practices for Next.js API routes with Prisma and MongoDB 1, including proper validation, error handling, and database connection management.