Skip to content

jj5u/my-blog

Repository files navigation

my-blog

🚀 Tech Blog Built with Vite, React, TypeScript, Supabase, and Drizzle ORM

This is a personal tech blog designed to showcase projects, share technical articles, and experiment with new ideas. Built with modern web technologies for fast performance, easy maintenance, and scalability.


📚 Features

  • ⚡️ Fast and responsive design with Vite and React
  • 🔒 Secure authentication and authorization with Supabase
  • ✍️ CRUD functionality for blog posts using Drizzle ORM
  • 📝 Markdown support for writing technical articles
  • 🏷️ Tagging system for easy categorization
  • 🔗 Social media sharing integration
  • ♻️ Modular and maintainable code structure

⚙️ Tech Stack

  • Frontend: Vite, React, TypeScript
  • Database: Supabase (PostgreSQL)
  • ORM: Drizzle ORM
  • State Management: React Query (@tanstack/react-query)
  • Styling: Tailwind CSS
  • Deployment: Vercel (Frontend) and Supabase (Database)

📂 Project Structure

src/
├── assets/           # Static assets like images and fonts
├── components/       # Reusable UI components
├── pages/            # Page components (Index, Blog, Project)
├── db/               # Drizzle schema and database queries
├── hooks/            # Custom React hooks
└── styles/           # Tailwind CSS and global styles

🚀 Getting Started

Prerequisites

  • Node.js (>= 18.x)
  • Yarn (Recommended for package management)
  • Supabase Account (for database and authentication)

Installation

# Clone the repository
git clone https://github.com/yourusername/my-blog.git

# Navigate to the project directory
cd my-blog

# Install dependencies
yarn

Environment Variables

Create a .env file in the root directory and add the following:

VITE_SUPABASE_URL=your_supabase_url
VITE_SUPABASE_KEY=your_supabase_key

Start the Development Server

yarn dev

Visit http://localhost:5173 to see the project running locally.


📦 Build and Deployment

Build for Production

yarn build

The production-ready files will be in the dist folder.

Deploy to Vercel

  1. Push the repository to GitHub.
  2. Connect the repository to Vercel.
  3. Set up the environment variables in Vercel dashboard.
  4. Deploy with a single click!

🔨 Scripts

  • yarn dev - Run the development server
  • yarn build - Build the project for production
  • yarn preview - Preview the production build locally
  • yarn lint - Lint the codebase
  • yarn format - Format the code with Prettier

Planned Features

  • 💬 Commenting system for blog posts
  • 🔍 Search functionality with filtering by tags
  • 📊 Analytics dashboard for user engagement insights
  • 📱 Progressive Web App (PWA) support

🤝 Contributing

Contributions, issues, and feature requests are welcome!
Feel free to check out the issues page.


📄 License

This project is licensed under the MIT License.
See the LICENSE file for more details.


🌐 Connect with Me


Show Your Support

If you like this project, please give it a ⭐ on GitHub!
Feel free to share your feedback and suggestions.


📌 Notes

  • This project is a work in progress and is continuously evolving.
  • Feedback and suggestions are always appreciated!

About

Tech Blog Built with Vite, React, TypeScript, Supabase, and Drizzle ORM

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors