Simple Blog with React and PocketBase

A lightweight, modern blog application built with React frontend and PocketBase backend for effortless content management. This project demonstrates a clean, minimalist approach to building a blog with responsive design.

⚠️ Important Notice: This project was created as a learning exercise to practice React and TypeScript. While functional, some implementations may not follow production-best practices. Please review the code carefully and understand the architecture before using in production environments.

🌟 Features

• Modern React Frontend - Built with the latest React features and hooks
• PocketBase Backend - Lightweight, file-based database with built-in admin UI
• Responsive Design - Clean, card-based layout that works on all devices
• Minimalist UI - Focus on content readability and user experience
• Easy Content Management - Add, edit, and manage articles through PocketBase
• Rich Text Styling - Create custom styling in PocketBase's rich editor including text formatting, colors, bold fonts, and more (similar to Microsoft Word), with results displayed seamlessly on the blog page

🛠️ Tech Stack

Frontend

• React - JavaScript library for building user interfaces
• Vite - Next-generation frontend tooling with lightning-fast HMR (Hot Module Replacement)
• TypeScript - Strongly typed programming language that builds on JavaScript, providing better tooling and error detection
• ShadcnUI & Font Awesome - Modern UI component library (ShadcnUI) combined with comprehensive icon library (Font Awesome) for beautiful, accessible interface elements

Backend

• PocketBase - Open-source backend with database, auth, and real-time features
• SQLite - Embedded database (handled by PocketBase)

📋 Prerequisites

Before running this project, make sure you have:

• Node.js
• npm
• PocketBase

⚡ Quick Start

1. Clone the Repository

git clone https://github.com/baidys/react-pocketbase-blog.git
cd react-pocketbase-blog

2. Install Dependencies

npm install

3. Set Up PocketBase

1. Download PocketBase from pocketbase.io

2. Extract the executable to your project root

3. Start PocketBase:

   ./pocketbase serve
   

4. Open http://localhost:8090/_/ to access the admin UI

5. Create an admin account when prompted

4. Configure Database

In the PocketBase admin UI, create a new collection called posts with the following fields:

Important: In the API rules section, make sure to set the List/Search rule to allow public access (change from "superusers only" to empty for public access). The default value restricts access to superusers only.

Field Name	Type	Required	Options
title	Text	✅	-
description	Text	✅	-
content	Rich editor	✅	-
created	Date	✅	Auto-generated
updated	Date	✅	Auto-generated

• API Rules: Configure read permissions to allow public access for the blog to function properly

5. Add Sample Data

You can either:

• Use the PocketBase admin UI to manually add articles
• Import the provided sample data

6. Configure API URL

Update the API endpoint in your React app to match your PocketBase URL:

// src/hooks/usePosts.tsx
const API_BASE_URL = 'http://localhost:8090'

7. Start the Development Server

npm run dev

The app will be available at http://localhost:5173/

🎨 Screenshots

App

The main blog interface showcasing the clean, responsive design with article cards.

PocketBase Admin

The backend administrative interface for content management.

🔧 Customisation

This project is highly customizable! You can extend the PocketBase schema by adding additional fields such as:

• Tags for article categorization
• Author information
• Featured images
• Publication status
• SEO metadata

Important: When you modify the PocketBase schema, make sure to update the usePosts hook in src/hooks/usePosts.tsx to handle the new fields. You can also customize the styling throughout the application to match your design preferences.

For a better understanding of the project architecture, see the next section and refer to the PocketBase documentation.

📁 Project Structure

Based on the Vite + React + TypeScript template, here's the project organization:

react-pocketbase-blog/
├── node_modules/           # Dependencies
├── public/                 # Static assets
├── src/                    # Source code
│   ├── components/         # React components
│   │   └── ui/            # UI components (ShadcnUI)
│   │       ├── ErrorElement.tsx
│   │       ├── Home.tsx
│   │       ├── Navbar.tsx
│   │       └── PostPage.tsx
│   ├── hooks/              # Custom React hooks
│   │   └── usePosts.tsx    # PocketBase data fetching
│   ├── lib/                # Utility libraries
│   ├── AppRouter.tsx       # Route configuration
│   ├── index.css           # Global styles
│   └── main.tsx            # Application entry point
├── .gitignore              # Git ignore rules
├── components.json         # ShadcnUI configuration
├── eslint.config.js        # ESLint configuration
├── index.html              # HTML template
├── package.json            # Project dependencies
├── package-lock.json       # Dependency lock file
├── README.md               # This file
├── tsconfig.app.json       # TypeScript config (app)
├── tsconfig.json           # TypeScript config (root)
├── tsconfig.node.json      # TypeScript config (Node)
└── vite.config.ts          # Vite configuration

🚀 Deployment

⚠️ Development Project Warning: This project is a learning exercise for practicing React and TypeScript. Some implementations may not follow production best practices. Please review the code thoroughly and ensure you understand the architecture before deploying to production environments.

Frontend Deployment

1. Build the React app:

npm run build

2. Deploy the dist folder to your favorite hosting provider

Backend Deployment

Deploy PocketBase to your preferred hosting service and update the API URL in src/hooks/usePosts.tsx with your production PocketBase URL.

🤝 Contributing

Contributions are welcome! Here's how you can help:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Development Guidelines

• Follow React best practices and hooks patterns
• Keep components small and focused
• Use semantic HTML and accessible markup
• Write clean, readable code (consider using code formatters like Prettier)
• Test your changes across different screen sizes
• Ensure TypeScript types are properly defined

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🛠️ Built With Vite

This project was bootstrapped with Vite's React + TypeScript template. For more information about the base configuration, see below:

Vite Template Information

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

For production applications, consider updating the ESLint configuration to enable type-aware lint rules as detailed in the original Vite documentation.

---

⭐ Star this repo if you found it helpful!

Made with ❤️ by baidys