Strapi Photos App Frontend

The Strapi Photos App Frontend is a Nuxt 3 example project that demonstrates a photo sharing application frontend backed by Strapi, GraphQL, Postgres, and Cloudinary.

What is the Strapi Photos App Frontend?

This is a Nuxt 3 frontend starter that serves as a reference implementation for building photo sharing platforms. It consumes a Strapi-powered API through GraphQL, stores metadata in Postgres, and manages photos with Cloudinary. The repository follows the standard Nuxt 3 structure so you can adapt it into a larger application. Input requires a Strapi GraphQL endpoint and Cloudinary credentials; output is a runnable photo gallery frontend.

Key Features

• Nuxt 3 framework — built on Vue 3 with file-based routing, auto-imports, and server-side rendering.
• GraphQL integration — connects to a Strapi backend through GraphQL queries for fetching photo data.
• Postgres database — the reference backend uses PostgreSQL for storage of application data.
• Cloudinary image hosting — photo uploads and delivery are handled via Cloudinary's CDN and transformation APIs.
• Multiple package managers — setup instructions cover yarn, npm, and pnpm installation.
• Development server — run npm run dev for hot-reload at http://localhost:3000.
• Production build — npm run build creates a production bundle; npm run preview tests it locally.

Who is it for?

• Nuxt developers learning full-stack integration: study how a Vue frontend talks to a headless CMS via GraphQL.
• Strapi users who need a ready-made frontend to pair with their Strapi photo backend.
• Photo sharing startups looking for a minimal starter to adapt into their own gallery application.

What can you do with it?

• Frontend developers: scaffold a photo gallery interface and wire it to Strapi's GraphQL API.
• Strapi backend developers: verify a Strapi API by viewing it from a modern Nuxt frontend.
• Hobbyists: quickly set up a photo sharing site using a modern Vue stack with cloud storage.

How does it work?

1. Install dependencies with your preferred package manager (yarn install, npm install, or pnpm install --shamefully-hoist).
2. Start the development server with npm run dev, which serves the app at http://localhost:3000.
3. For production, run npm run build and then npm run preview to access the compiled app locally.

FAQ

What tech stack does this template use?

The frontend is Nuxt 3 built on Vue 3. The reference backend uses Strapi as a headless CMS, GraphQL for queries, PostgreSQL for the database, and Cloudinary for image handling.

How do I install and run it?

Clone the repository, then install dependencies with yarn install, npm install, or pnpm install --shamefully-hoist. Start the dev server with npm run dev on http://localhost:3000.

Is this a full-stack template?

No, it is the frontend only. The repository description indicates the complete example uses a separate Strapi backend with GraphQL, Postgres, and Cloudinary, which you would need to set up yourself.

Does it require Cloudinary credentials?

Yes, a functional deployment would need Cloudinary account credentials and a Strapi endpoint. The readme does not include configuration steps for these, so you may need to consult Strapi and Cloudinary documentation.