Non Solo Poesia

Website for Non Solo Poesia, a blog built with Next.js, TipTap, Clerk and Neon DB that allows the authors to create blog posts with rich text formatting.

Website

• nonsolopoesia.it

Getting Started

• Clone the repository
• cd into the project directory
• Install dependencies with npm install --legacy-peer-deps
• Go to the Clerk console and create a new project
• Go to the Neon console and create a new project
• Go to the Neon SQL editor and run the following SQL query to create a posts table:

CREATE TABLE IF NOT EXISTS posts(
  id UUID PRIMARY KEY,
  slug TEXT NOT NULL UNIQUE,
  title TEXT NOT NULL,
  description TEXT NOT NULL,
  cover_image TEXT DEFAULT '',
  cover_image_cloudinary TEXT DEFAULT '',
  content TEXT NOT NULL,
  author TEXT NOT NULL,
  category TEXT DEFAULT '',
  published_at TIMESTAMP WITH TIME ZONE NOT NULL,
  updated_at TIMESTAMP WITH TIME ZONE,
  views INTEGER DEFAULT 0
)

• Also create an index on the slug and category columns to speed up queries (run this in the Neon SQL editor):

CREATE INDEX idx_slug ON posts(slug);
CREATE INDEX idx_category ON posts(category);

• Create a new table called subscribers to store email addresses of users who subscribe to the blog:

CREATE TABLE subscribers (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  email TEXT UNIQUE NOT NULL,
  subscribed_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

• Create a .env.local file in the root of the project and add the following environment variables:

# Clerk configuration
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY= # Go to your Clerk console
CLERK_SECRET_KEY= # Go to your Clerk console

# Clerk user IDs to assign roles (you will get these after each user signs up)
NEXT_PUBLIC_ADMIN_ID= # This is the admin of the blog
NEXT_PUBLIC_AUTHOR_ID= # This is the author of the blog

# Cloudinary configuration
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME= # Go to your Cloudinary console
NEXT_PUBLIC_CLOUDINARY_API_KEY= # Go to your Cloudinary console
CLOUDINARY_API_SECRET= # Go to your Cloudinary console

# Neon database URL
DATABASE_URL= # Go to your neon project console and copy the DATABASE_URL

• Run the development server:

npm run dev

• Open http://localhost:3000 with your browser to see the result.

Tech Stack

• Next.js
• React
• TypeScript
• Tailwind CSS
• TipTap (Rich Text Editor)
• Clerk (Authentication)
• Neon (Database)
• Headless UI (Popover)
• Vercel (Deployment)

Resources

• Setup Jest with Next.js 15
• Next.js Documentation
• React Documentation
• TypeScript Documentation
• Tailwind CSS Documentation
• TipTap Documentation
• Clerk Documentation
• Neon Documentation
• Headless UI Documentation

License

• MIT