Building an Advanced Note-Taking App with Wails: Part 1

In this series, we’ll create an advanced, cross-platform note-taking app using the Wails framework. With features like rich text editing, cloud sync, offline mode, and custom themes, this project will show you how to harness Wails to build feature-rich desktop applications. In this first post, we’ll set up the project and implement basic functionality.

Step 1: Setting Up the Project

Install Wails

Ensure you have Go (v1.20+) installed. Then, install Wails with:

go install github.com/wailsapp/wails/v2/cmd/wails@latest

Verify the installation:

wails doctor

This checks your environment and ensures everything is ready to go.

Initialize the Project

Create a new Wails project:

wails init -n Notes

Select your preferred frontend framework. For this tutorial, we’ll use React (TypeScript).

Step 2: Setting Up the Backend

The backend will manage the app’s core logic, including data storage and retrieval.

Create the Main Go File

Open main.go and set up the basic structure:

package main

import (
	"github.com/wailsapp/wails/v2"
	"github.com/wailsapp/wails/v2/pkg/options"
)

type App struct{}

func NewApp() *App {
	return &App{}
}

func (a *App) Greet(name string) string {
	return "Hello, " + name + "!"
}

func main() {
	app := NewApp()
	err := wails.Run(&options.App{
		Title:  "Advanced Note-Taking App",
		Width:  1024,
		Height: 768,
		Bind:   []interface{}{app},
	})

	if err != nil {
		println("Error:", err.Error())
	}
}

This sets up a basic Go backend with a simple Greet method that will later be expanded to manage notes.

Step 3: Setting Up the Frontend

Basic React Component

Navigate to the frontend/src/App.tsx file and replace its contents with a simple form to test the backend:

import React, { useState } from "react";
import { invoke } from "@wailsapp/runtime";

const App: React.FC = () => {
	const [name, setName] = useState("");
	const [message, setMessage] = useState("");

	const greet = async () => {
		const result = await invoke("Greet", { name });
		setMessage(result);
	};

	return (
		<div style={{ padding: "20px" }}>
			<h1>Note-Taking App</h1>
			<input
				type="text"
				placeholder="Enter your name"
				value={name}
				onChange={(e) => setName(e.target.value)}
				style={{ padding: "10px", marginRight: "10px" }}
			/>
			<button onClick={greet} style={{ padding: "10px" }}>
				Greet
			</button>
			<p>{message}</p>
		</div>
	);
};

export default App;

This component demonstrates how the frontend communicates with the backend.

Step 4: Running the Application

Start the development server:

wails dev

Your app will open in a development window. Test the Greet function by entering a name and clicking the button.

Next Steps

In the next post, we’ll expand the backend to handle note storage using SQLite and create a basic database schema. Stay tuned as we build out this feature-rich note-taking app!