--- title: "Build your first feature" description: "Build a Projects feature with persistent data, account ownership, and a React UI, on your own or with a coding agent." url: "https://www.beignetjs.com/learn" markdown_url: "https://www.beignetjs.com/markdown/learn.md" framework_version: "0.0.65" documentation_scope: "current-checkout" source_revision: "f27ffc691ada2988ce24a71558d3c529d53a9c1d" source_modified: true --- # Build your first feature Build a Projects feature that lets signed-in users create, list, edit, and delete their own projects. Follow the same feature from its HTTP API to its database, ownership rules, and React UI. You can work through the tutorial yourself or with a coding agent. Both paths use the same application, conventions, and checks. [![The finished Projects screen, with Name and Description fields, a Create project button, and three saved projects: Launch checklist, Customer portal, and Website refresh.](https://www.beignetjs.com/projects-tutorial.png)](https://www.beignetjs.com/projects-tutorial.png "View the finished Projects screen at full size") Your Projects screen after chapter 3, with a create form and saved projects. Select the image to view it at full size. ## Get an app running Start with the full-stack Next.js starter and the default SQLite database. The tutorial uses its authentication setup and React Query provider; you do not need to choose or install additional integrations. - **Build it yourself:** follow the [quickstart](https://www.beignetjs.com/markdown/getting-started.md), sign up, and make the first validation change. - **Build with an agent:** use the [agent quickstart](https://www.beignetjs.com/markdown/getting-started/agents.md) to create and inspect the same starter. Already have that starter running? Begin with [Build the API](https://www.beignetjs.com/markdown/build-first-resource.md). Keep the same app directory, account, and database through all three chapters. Run commands from the app root. Use a second terminal for commands while `bun run dev` is running. ## Follow one feature through three chapters | Chapter | What you will do | How you will check it | | ---------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- | ---------------------------------------------------------------------- | | [1. Build the API](https://www.beignetjs.com/markdown/build-first-resource.md) | Generate a Projects resource, add a description, and persist it with Drizzle | Apply migrations and create and read projects over HTTP | | [2. Add ownership](https://www.beignetjs.com/markdown/build-first-resource/ownership.md) | Use the signed-in account to enforce access to projects | Test that one account cannot read or change another account's projects | | [3. Connect the UI](https://www.beignetjs.com/markdown/build-first-resource/ui.md) | Add forms, a paginated list, detail and edit pages, and cache refreshes | Try forms, conflicting edits, and account switching in the browser | The first chapter is a local API exercise. Complete the ownership chapter before making the feature available to users. Use the chapter links at the top of each page to move between the API, ownership, and UI chapters. The highlighted chapter shows your current place. ## Read the examples Each chapter begins with the files you will work on and ends with a checkpoint. Finish that checkpoint before moving to the next chapter. - **File explorers** show the files for each edit. Select the filename when a step changes multiple files, then choose one to review its changes or complete source. **Copy** copies the complete source for that step without diff markers. Work through every file before continuing. - **Diffs** show edits to existing files. In Markdown, the `---` and `+++` lines name the file, `-` marks a removed line, and `+` marks an added line. Make those edits without copying the markers or `@@` line numbers into your source. - **Complete files in Markdown** begin with a comment naming their destination. Create the directory if needed, then add or replace that file as instructed. - **Excerpts** explain generated code. Read them in the named file; you do not need to paste them. The Markdown version of each page contains the same code examples as the explorers. ## Follow along with your agent Give your coding agent this prompt from the starter's directory: ```text Read https://beignetjs.com/markdown/agent-instructions.md and this app's AGENTS.md or CLAUDE.md. Follow the Projects tutorial starting at https://beignetjs.com/markdown/build-first-resource.md, then complete the ownership and UI chapters linked there. Work through the chapters in order. Use the documented generator, make the chapter's edits, and run its checks before continuing. Preserve existing application work. If the installed version differs from the web docs, resolve the difference using the installed package guidance and changelog. At the end, report the files changed, checks run, failures or skipped checks, and how I can try creating and editing a project in the browser. ``` Read each chapter alongside the changes. The explanations connect generated files to the behavior you are building, so you can review the agent's work. ## Keep the reference nearby Use [Mental model](https://www.beignetjs.com/markdown/concepts.md) for framework vocabulary and [App architecture](https://www.beignetjs.com/markdown/app-architecture.md) for folder responsibilities. The [CLI reference](https://www.beignetjs.com/markdown/cli.md) explains generator options and diagnostic commands. When the feature works, choose a task from [Guides](https://www.beignetjs.com/markdown/guides.md). Start with [Run a background job](https://www.beignetjs.com/markdown/guides/background-jobs.md) to save and deliver work after creating a project. Use [Testing](https://www.beignetjs.com/markdown/testing.md) to extend coverage and [Deployment](https://www.beignetjs.com/markdown/deployment.md) to prepare the application for a hosted environment.