SecureBlog

March 27, 2025

Github
SecureBlog

SecureBlog is a blog viewer platform focused on cybersecurity content. Built using Next.js, Supabase, and shadcn/ui, this read-only app allows users to explore curated blog posts with real-time search and seamless infinite scrolling.

🔐 Note: This project is read-only — users cannot post, edit, or delete articles.

Key Features

  • 🔎 Search Blogs by Keyword
    Real-time blog search to help users quickly find relevant cybersecurity content.

  • 🔁 Infinite Scrolling
    Loads more blog posts as the user scrolls, improving user experience and performance.

  • 🎨 Built with shadcn/ui & Tailwind CSS
    Uses accessible and customizable UI components for a clean, responsive interface.

  • ⚡ Supabase Integration
    Pulls real-time blog data from Supabase, making it fast and scalable.

  • 📱 Mobile-Responsive Design
    Optimized for various screen sizes for a great reading experience across devices.

How to Use

  1. Clone the Repository
git clone https://github.com/rushiii3/blog-app.git
cd blog-app
  1. Install Dependencies
npm install
# or
yarn
  1. Configure Environment Variables

Create a .env.local file and add:

NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
  1. Run the Development Server
npm run dev
# or
yarn dev
  1. View & Search Blogs
  • Browse the blog feed on the homepage.
  • Use the search bar to filter posts by title or keywords.
  • Scroll down to load more posts automatically.

Screenshots

Individual Blog View

Tech Stack

  • Frontend: Next.js, React, TypeScript, Tailwind CSS
  • UI: shadcn/ui
  • Database: Supabase (read-only)
  • Deployment: Vercel (suggested)