如何使用 shadcn/UI 和 Manifest 在幾分鐘內建立電子報註冊表單

In today’s digital world, being able to quickly test your ideas and interact with your users is crucial, whether you’re building an MVP, launching a startup, or delivering a project on a tight deadline. Creating a newsletter subscription form is often necessary to validate your concept, engage early users, build a community of interested people, and gather feedback.

Turnkey solutions can be costly, while using free tools is still complex and time-consuming.

In this tutorial, I’ll show you how to create a newsletter subscription form in less than 20 minutes. No complex configurations, no headaches. Just a form with a fully functional subscription system!

Stack Used

• shadcn/UI: ready-to-use, beautifully designed components to build the frontend.
• Manifest: The fastest and easiest way to build a complete backend, just by filling a YAML file.

By the end of this tutorial, you’ll have a fully operational form to collect your first subscribers. Ready? Let’s go!

What is Manifest?

Manifest is our open-source Backend-as-a-Service (BaaS). It allows to create a complete backend for your application.

By simply filling in a single YAML file, you generate a backend with a database, an API, and a user-friendly admin panel for non-technical administrators.

This allows you to focus on building your product instead of dealing with backend complexity.

As of today, we’ve just released our MVP, and we’re counting on community feedback to help us evolve the product in the right direction.

Manifest is available on GitHub, so feel free to give it a ⭐ if you like the project!

Planning the interface

Our goal is a single screen displaying a subscription field and notification messages. It's simple, effective, and functional. Here’s what we’ll get:

• The frontend for subscribers
• The admin panel for the administrators

Creating the frontend with shadcn/UI

We’ll start by creating the project with the frontend, i.e., the visual part of our newsletter subscription form.

I chose to use shadcn/UI with Next.js. Run the following command in your terminal:

npx shadcn@latest init -d

You’ll be prompted to start a new Next.js project and name your project. Answer “Y” and call it newsletter-form.

Once the project is created, you should have your frontend ready, with these files:

Start the development server by running: npm run dev.

Click on the provided link in the terminal. It should open the NextJS welcome screen in your default web browser at https://localhost:3000.

Creating the static form

Let’s create our form by editing app/page.tsx. Since shadcn works with TailwindCSS, we’ll use its classes to build the desired interface. Copy the following code:

export default function Home() {
  return (
    <div className="w-full lg:grid lg:grid-cols-5 min-h-screen flex sm:items-center sm:justify-center sm:grid">
      <div className="flex items-center justify-center py-12 col-span-2 px-8">
        <div className="mx-auto grid max-w-[540px] gap-6">
          <div className="grid gap-2 text-left">
            <h1 className="text-3xl font-bold">Subscribe to our Newsletter! ?</h1>
            <p className="text-balance text-muted-foreground">
              Get the latest news, updates, and special offers delivered straight to your inbox.
            </p>
          </div>
          <form className="grid gap-4">{/* Newsletter form here */}</form>
        </div>
      </div>
      <div className="hidden bg-muted lg:block col-span-3 min-h-screen bg-gradient-to-t from-green-50 via-pink-100 to-purple-100"></div>
    </div>
  );
}

You should see a split screen with an area for the form on the left and a gradient space on the right.

Now let’s add the form. It will include the following shadcn components:

• Input
• Button

Install these components via your terminal with the following commands:

npx shadcn@latest add input
npx shadcn@latest add button

Then import the components in your page.tsx file like this:

import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";

Use these two components by adding the following snippet inside the existing

tag:

<form className="grid gap-4">
  <div className="flex w-full max-w-sm items-center space-x-2">
    <Input type="email" placeholder="Email" name="email" />
    <Button type="submit">Subscribe</Button>
  </div>
  <p className="text-sm text-muted-foreground">
    Sent out weekly on Mondays. Always free.
  </p>
</form>

You should have a responsive newsletter form on your frontend. Take a moment to admire your work. And relax, our 20-minute promise is still intact!

Creating the backend with Manifest

Let’s add the backend to store the subscribers and allow administrators to manage them via an admin panel.

Install Manifest at the root of the project with the following command:

npx add-manifest

Once the backend is installed, you should see the following files in your repository:

Now let’s define our data model. Open the backend.yml file and replace the existing code with this one:

name: Newsletter Form

entities:
  Subscriber:
    properties:
      - { name: email, type: email }

Run the following command to start your server:

npm run manifest

Once your backend is running, the terminal will provide two links:

• ?️ Admin panel : http://localhost:1111,
• ? API Doc: http://localhost:1111/api.

Launch the admin panel on your browser and log in with the pre-filled credentials. You should now see an empty list of subscribers.

There we have it! In under 3 minutes, We’ve built a full backend for our newsletter subscription form. ?

Connecting Manifest with our frontend

We’ll use Manifest’s SDK to connect the form and add emails directly to the subscribers list from the frontend.

From your project’s root, install the SDK with:

npm i @mnfst/sdk

Let’s add the newsletter subscription functionality to turn the static form into a dynamic one that stores emails using Manifest.

Next.js treats the files in the app directory as Server Components by default. To use interactive features (like React hooks), we need to mark our component as a Client Component.

Add "use client"; at the top of your Home.tsx file:

'use client';

Next, create the handleSubmit function to capture the email and send it to Manifest:

export default function Home() {
  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();

    const form = e.currentTarget as HTMLFormElement;
    const emailInput = form.querySelector('input[name="email"]') as HTMLInputElement;
    const email = emailInput?.value;

    if (!email) {
      alert('Please enter a valid email.');
      return;
    }

    const manifest = new Manifest();
    manifest
      .from('subscribers')
      .create({ email })
      .then(() => {
        form.reset();
        alert('Successfully subscribed!');
      })
      .catch((error) => {
        console.error('Error adding subscriber:', error);
        alert(`Failed to add subscriber: ${error.message || error}`);
      });
  };

  return (
    // ... Your existing code here>
  );
}

Now, add the onSubmit={handleSubmit} attribute to your tag:

<form onSubmit={handleSubmit} className="grid gap-4">

Testing the form

Time to see our form in action! Enter an email address and hit submit. You should get a confirmation message.

Check the admin panel, and voilà! this email is now in the subscriber list!

Enhancing user experience

Let’s add alerts to indicate whether the subscription was successful or not. We’ll use the ShadUI alert component.

Install the alert component with:

npx shadcn@latest add alert

We can now add the alert function, and integrate it into our form. Here is the final page.tsx page:

'use client'

import { Alert, AlertDescription } from '@/components/ui/alert'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import Manifest from '@mnfst/sdk'
import { useState } from 'react'

export default function Home() {
  const [alertVisible, setAlertVisible] = useState(false) // State to manage alert visibility
  const [alertMessage, setAlertMessage] = useState('') // Message to display in the alert

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()

    // Retrieve email from the input field
    const form = e.currentTarget as HTMLFormElement
    const emailInput = form.querySelector(
      'input[name="email"]'
    ) as HTMLInputElement
    const email = emailInput?.value

    if (!email) {
      setAlertMessage('Please enter a valid email.')
      setAlertVisible(true)
      setTimeout(() => setAlertVisible(false), 3000) // Hide the alert after 3 seconds
      return
    }

    const manifest = new Manifest()
    manifest
      .from('subscribers')
      .create({ email })
      .then(() => {
        form.reset() // Reset the email input field after success
        setAlertMessage(
          'Successfully subscribed! We will contact you if you are selected.'
        )
        setAlertVisible(true) // Show success alert
        setTimeout(() => setAlertVisible(false), 3000) // Hide the alert after 3 seconds
      })
      .catch((error) => {
        setAlertMessage(`Failed to add subscriber: ${error.message || error}`)
        setAlertVisible(true) // Show error alert
        setTimeout(() => setAlertVisible(false), 3000) // Hide the alert after 3 seconds
      })
  }

  return (
    

      

        

          

            

              Subscribe to our Newsletter! ?
            
            

              Get the latest news, updates, and special offers delivered
              straight to your inbox.
            
          
          <form onSubmit={handleSubmit} className="grid gap-4">
            

              
              Subscribe
            
            

              Sent out weekly on Mondays. Always free.
            
          
          {/* Display the alert based on alertVisible state */}
          {alertVisible && (
            
              {alertMessage}
            
          )}
        
      
      

    
  )
}

Let's try the form with the alert by entering a new valid email.

Congratulations! ? You’ve just built a fully functional newsletter subscription application in a flash! ⚡

Conclusion

By leveraging Manifest alongside your favorite frontend tools, you can rapidly create applications with minimal effort. Manifest has been instrumental in speeding up our development process, allowing us to set up a complete backend in just minutes.

I hope this guide was helpful and that you learned how to create a simple and effective newsletter subscription system for your future projects.

If you'd like to access the full project code, you can check out the repository here.

If you liked using Manifest, consider giving us a ⭐ on GitHub to support the project and stay updated!

以上是如何使用 shadcn/UI 和 Manifest 在幾分鐘內建立電子報註冊表單的詳細內容。更多資訊請關注PHP中文網其他相關文章！