This is a simple web blog application built with:
- React (latest version)
- Tailwind CSS for styling
- Supabase for backend services (database and authentication)
The application allows users to perform CRUD (Create, Read, Update, Delete) operations on blog posts.
-
- Sign up and login functionality
- Protected routes for authenticated users
-
- Create new blog posts
- View all blog posts with pagination
- Update existing blog posts
- Delete a blog posts
-
- Mobile-friendly interface using Tailwind CSS
Before you begin, ensure you have the following installed:
- Node.js (v16 or later)
- npm or yarn
- A Supabase account (free tier available)
git clone https://github.com/Zier0Code/simple-web-blog.git
cd simple-web-blog
npm install
# or
yarn install
- Go to Supabase and create a new project
- Set your environment variables PRIVATE URL and API KEY in
.env
VITE_SUPABASE_URL=your-supabase-url
VITE_SUPABASE_ANON_KEY=your-supabase-anon-key
- Install supabase in your working space
npm install @supabase/supabase-js
- Create a table for your blog posts with the following SQL:
create table posts (
id bigint generated by default as identity primary key,
title text not null,
content text not null,
created_at timestamp with time zone default timezone('utc'::text, now()) not null,
);
- Enable Row Level Security (RLS) and create policies for your table
- Note down your Supabase URL and public anon key
npm run dev
# or
yarn dev
# or
bun run dev
The application should now be running on http://localhost:3000
src/
├── components/ # Reusable components
├── pages/ # Page components
├── App.css # Main application component
├── App.tsx # Main application component
└── main.tsx # Application entry point