I'll help you implement a dynamic QR code system with MongoDB that can be hosted on Vercel. Let's create a server with the necessary endpoints for redirecting users and updating links.

Setup Instructions

1. Environment Variables

Set up these environment variables in your Vercel project:

• MONGODB_URI: Your MongoDB connection string (e.g., mongodb+srv://username:password@cluster.mongodb.net/)
• SECRET_KEY: A strong secret key for authentication when updating the link

2. MongoDB Setup

1. Create a database named qr in your MongoDB Atlas cluster
2. Create a collection named links
3. The system will automatically create a document with _id: 'current' when you first update the link

3. How to Use

Redirecting Users

When someone scans your QR code (which should point to /api/redirect), they'll be redirected to the URL stored in your MongoDB database.

Updating the Link

To update the link, send a POST request to /api/update-link with this JSON body:

You can use tools like Postman, curl, or create a simple admin interface to update the link.

4. Testing

1. Deploy your app to Vercel
2. Visit /api/redirect - it should redirect to your default link (or show "No link found" if none exists yet)
3. Send a POST request to update the link
4. Visit /api/redirect again to verify the redirection works

This implementation uses Next.js App Router with TypeScript for type safety and better developer experience. The MongoDB client connects to your database to store and retrieve the current URL.

Please make sure to add the following environment variables to your project:

Great! Now that you've added the environment variables to your Vercel project, your dynamic QR code system should be ready to use. Let's go through the next steps to get everything working.

Next Steps

1. Generate a QR Code

You'll need to generate a QR code that points to your redirect endpoint. Here's a simple way to create one:

How to Use Your Dynamic QR Code System

1. Deploy to Vercel

If you haven't already, deploy your project to Vercel. The environment variables you've added will be used by the application.

2. Generate and Share Your QR Code

1. Visit the /generate page on your deployed site
2. The page will automatically generate a QR code that points to your /api/redirect endpoint
3. Download the QR code image and use it in your marketing materials, print it, or share it digitally

3. Update the Redirect URL

1. Visit the /admin page on your deployed site
2. Enter the new URL you want the QR code to redirect to
3. Enter your secret key (the one you set in your environment variables)
4. Click "Update Link"

4. Test the System

1. Scan the QR code with your phone's camera or a QR code scanner app
2. You should be redirected to the URL you set in the admin panel
3. Go back to the admin panel and change the URL
4. Scan the same QR code again - you should now be redirected to the new URL

Security Considerations

1. Keep your SECRET_KEY secure: Don't share it with unauthorized users
2. Consider adding authentication: For a more secure admin panel, you might want to add user authentication
3. Rate limiting: Consider adding rate limiting to prevent abuse of your API endpoints
4. Logging: Add logging to track who is updating the links and when

Extending the System

Here are some ideas for extending your dynamic QR code system:

1. Multiple QR codes: Modify the system to support multiple QR codes with different IDs
2. Analytics: Add tracking to see how many times each QR code is scanned
3. Expiration dates: Add the ability to set expiration dates for links
4. A/B testing: Randomly redirect users to different URLs to test effectiveness

Let me know if you need any clarification or have questions about implementing any of these features!