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.
- ⚡️ 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
- 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)
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
- Node.js (>= 18.x)
- Yarn (Recommended for package management)
- Supabase Account (for database and authentication)
# Clone the repository
git clone https://github.com/yourusername/my-blog.git
# Navigate to the project directory
cd my-blog
# Install dependencies
yarnCreate a .env file in the root directory and add the following:
VITE_SUPABASE_URL=your_supabase_url
VITE_SUPABASE_KEY=your_supabase_keyyarn devVisit http://localhost:5173 to see the project running locally.
yarn buildThe production-ready files will be in the dist folder.
- Push the repository to GitHub.
- Connect the repository to Vercel.
- Set up the environment variables in Vercel dashboard.
- Deploy with a single click!
yarn dev- Run the development serveryarn build- Build the project for productionyarn preview- Preview the production build locallyyarn lint- Lint the codebaseyarn format- Format the code with Prettier
- 💬 Commenting system for blog posts
- 🔍 Search functionality with filtering by tags
- 📊 Analytics dashboard for user engagement insights
- 📱 Progressive Web App (PWA) support
Contributions, issues, and feature requests are welcome!
Feel free to check out the issues page.
This project is licensed under the MIT License.
See the LICENSE file for more details.
- GitHub: Jahye Hwang
- LinkedIn: Jahye Hwang
If you like this project, please give it a ⭐ on GitHub!
Feel free to share your feedback and suggestions.
- This project is a work in progress and is continuously evolving.
- Feedback and suggestions are always appreciated!