Part 8: Enhancing Your Next.js Application with CRUD Operations for API Keys

Enhancing Your Next.js Application with CRUD Operations for API Keys

Welcome back! In this post, we'll add some logic to our user interface to manage API keys. We'll be implementing a user interface for CRUD operations—creating, reading, updating, and deleting API keys. Let's dive right in and let our AI assistant do its magic.

Adding CRUD Logic to Your Interface

First, we need to update our pages/index.js file to include CRUD functionality for managing API keys. Using our AI assistant, we can quickly generate the necessary code.

Generating CRUD Operations

We prompt our AI assistant with the following:

Implement a user interface for CRUD operations to manage API keys.

After a brief wait, the AI assistant generates the code. We apply the changes and see the following additions:

• Mock API keys for display.

• A create API key function that generates a simple API key with a prefix and the current date.

• Basic CRUD operations: create, read, update, and delete.

Here's an example of the generated code:

import { useState } from 'react';

export default function Home() {
  const [apiKeys, setApiKeys] = useState([
    { id: 1, key: 'AK_20230101' },
    { id: 2, key: 'AK_20230102' },
  ]);

  const createApiKey = async () => {
    const newKey = `AK_${new Date().toISOString().slice(0, 10)}`;
    setApiKeys([...apiKeys, { id: apiKeys.length + 1, key: newKey }]);
  };

  const deleteApiKey = (id) => {
    setApiKeys(apiKeys.filter(key => key.id !== id));
  };

  return (
    <div>
      <h1>Manage API Keys</h1>
      <button onClick={createApiKey}>Create API Key</button>
      <ul>
        {apiKeys.map(key => (
          <li key={key.id}>
            {key.key}
            <button onClick={() => deleteApiKey(key.id)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

Enhancing the User Interface

Although functional, the interface is quite basic. To improve its appearance, we can draw inspiration from well-designed dashboards.

For example, we can enhance the user interface by implementing a gradient background and adding icons. To do this, we take a screenshot of an inspiring design and prompt our AI assistant:

Make the design look like this.

The AI assistant generates a more visually appealing interface, including a gradient and icons. Here’s an example update:

import { useState } from 'react';
import { PlusIcon, TrashIcon, EyeIcon } from '@heroicons/react/solid';

export default function Home() {
  const [apiKeys, setApiKeys] = useState([
    { id: 1, key: 'AK_20230101' },
    { id: 2, key: 'AK_20230102' },
  ]);

  const createApiKey = async () => {
    const newKey = `AK_${new Date().toISOString().slice(0, 10)}`;
    setApiKeys([...apiKeys, { id: apiKeys.length + 1, key: newKey }]);
  };

  const deleteApiKey = (id) => {
    setApiKeys(apiKeys.filter(key => key.id !== id));
  };

  return (
    <div className="bg-gradient-to-r from-purple-400 via-pink-500 to-red-500 min-h-screen flex flex-col items-center justify-center text-white">
      <h1 className="text-4xl mb-4">Manage API Keys</h1>
      <button onClick={createApiKey} className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded flex items-center">
        <PlusIcon className="h-5 w-5 mr-2" /> Create API Key
      </button>
      <ul className="mt-4">
        {apiKeys.map(key => (
          <li key={key.id} className="flex items-center mt-2">
            <span>{key.key}</span>
            <button onClick={() => deleteApiKey(key.id)} className="ml-4 text-red-500">
              <TrashIcon className="h-5 w-5" />
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
}

Handling Errors

If you encounter an error like module not found for a specific package, install the required package by running:

npm install @heroicons/react

Restart your development server:

npm run dev

Conclusion

You've successfully enhanced your Next.js application with CRUD operations for managing API keys. We utilized an AI assistant to generate and refine our code, making the development process much smoother. This approach allows for rapid prototyping and testing, enabling you to focus on building features and improving user experience.

Stay tuned for more tutorials on how to further enhance your application. Happy coding!