Introduction

As developers, We often need to build content-driven websites like blogs, portfolios, or showcases, whether for personal use or clients. Most backend solutions are bloated. They require long setups, endless tutorials, and unnecessary complexity just to get started.

Building a modern portfolio with content management shouldn’t be a burden.

Manifest fixes this. No over-engineering, no wasted time. Just a backend that works instantly.

Prerequisites

Before getting started, make sure you have Node.js and npm installed on your machine.

Used Tools

Here’s an overview of the tools We’ll be working with:

1. Bolt.new: To generate a portfolio frontend from a simple prompt.
2. Manifest: To generate a complete backend. It includes a documented API, a database, an admin panel with authentication, and storage for images, and much more.

Setting Up the Project

The goal here is to show you how to easily add a backend to any frontend. I won’t go into too much detail on frontend development. Instead, I’ll simply add a backend to a random portfolio frontend generated by Bolt.new.

Initializing the Frontend with Bolt.new

1. Let's start by generating the frontend. Head over to bolt.new and enter a prompt. I used: 'Create a beautiful one-page portfolio with a contact form.'
2. Bolt will then generate a set of specs. We can iterate on them until we're happy with the proposed frontend.

Overview of our portfolio

After a few iterations, I ended up with the following portfolio.

Let’s take a look at the project’s code. The generated structure is clean, with each section of the site having its own .tsx component.

These files handle only the frontend. There's no business logic yet. We'll use Manifest to add a backend and make the projects dynamic.

Bolt doesn't yet have direct integration with Manifest, but adding it manually is still quick and easy. ⚡

Initialize the backend with manifest

Still from bolt.new, we'll open a second terminal and install manifest using the following command:

After installing the backend, a Manifest repository appears at the root of the project.

Now, let’s define our data model. Since projects are defined by the following fields: