/sample-nextjs-chakra-gallery-app

Gallery application built with Xata, Next.js and Chakra UI

Primary LanguageTypeScript

Live demo

A live demo of this application is available at https://xata-gallery.vercel.app. The demo turns off the ability to upload and delete images. For local or forked versions, set the .env setting READ_ONLY=false.

Sample gallery app powered by Xata

A small example Xata application built with Next.js & Chakra UI.

image

This app showcases serveral Xata features including:

  • Offset based pagination
  • Form management and submission
  • Search
  • Aggregations
  • Summaries
  • Image transformations
  • Queries using junction tables and links
  • Proper Next.js + Xata TypeScript patterns

To run this example locally with your own database

You'll need to install Xata before performing these steps.

  • git clone git@github.com:xataio/sample-nextjs-chakra-gallery-app.git
  • cd sample-nextjs-chakra-gallery-app
  • Remove the Xata files that point to our database
    • rm -rf .xata utils/xata.ts .xatarc
  • pnpm install
  • Run xata init --schema schema.json to create a new database with the necessary schema
  • pnpm run dev to load the site at http://localhost:3000
  • Add images either through the application, or through your database UI at https://app.xata.io

Environment variables

After you run init, your .env file should look like this

# Xata credentials
XATA_BRANCH=main
XATA_API_KEY=

# Setting to true will disable API / UI to write to the database
READ_ONLY=false