Set up the development environment and create the basic Next.js application structure for a Cardano escrow application.
Introduction
In this first part, we'll create a Next.js application as the foundation for our Cardano escrow application. We'll focus on setting up the initial project structure and essential dependencies needed for the wallet integration we'll implement in Part 2.
Prerequisites
Before you begin, ensure you have:
Node.js 18+ installed
Basic familiarity with React and Next.js
A code editor (like VS Code)
Steps
1. Create a new Next.js project
Start by creating a new Next.js application using create-next-app:
For now, we'll only install the essential dependencies needed for our wallet integration:
This installs:
@ada-anvil/weld: For Cardano wallet integration. This allows you to connect to a CIP-30 compatible browser wallet (e.g., Eternl, Lace, etc.)
@tanstack/react-query: For data fetching and caching
better-sqlite3: For local database storage
3. Environment Variables
Create a .env.example file at the root of your project and populate it with the following:
Copy .env.example to .env.local and fill in your actual values. Don't worry about the actual WEBHOOK_SECRET value for now, we'll fill it in later. Make sure to never commit .env.local—add it to your .gitignore.
4. Project Structure
Below is the complete directory structure you'll build throughout this guide series. This provides a roadmap of what we'll be creating:
5. Update Global Styles
Update the global CSS file with some basic styles we'll use throughout the application src/globals.css:
The CSS details are not important for the guide. This just helps with the styling of the components we'll build.
6. Configure Root Layout
Create a basic root layout component src/app/layout.tsx:
7. Create Basic Home Page
Create a simple home page as a placeholder src/app/page.tsx:
Testing Your Setup
Let's make sure your basic setup is working correctly:
Start your development server:
Navigate to http://localhost:3000 in your browser
You should see the placeholder home page with the title "Cardano Escrow"
Congratulations! You've completed Part 1 of the guide. You now have a basic Next.js project set up for our Cardano escrow application.
// src/app/layout.tsx
import './globals.css';
import type { Metadata } from 'next';
export const metadata: Metadata = {
title: 'Cardano Escrow',
description: 'Lock and unlock funds securely on the Cardano blockchain',
};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}
// src/app/page.tsx
export default function Page() {
return (
<main className="container mx-auto p-6 max-w-3xl">
<h1 className="text-3xl font-bold mb-6 text-black">Cardano Escrow</h1>
{/* Wallet connector will go here in Part 2 */}
{/* Fund locking will go here in Part 3 */}
{/* Transaction dashboard will go here in Part 4 */}
</main>
);
}
