🚀 HackerBlog - Frontend

A modern, developer-focused blogging platform where coders share stories, insights, and knowledge - no cap! 🔥

✨ About HackerBlog

HackerBlog is a developer-centric blogging platform designed for the modern coding community. Whether you're documenting your coding journey, sharing breakthrough moments, or spilling the tea on programming concepts, HackerBlog provides a sleek, terminal-inspired interface that speaks your language.

🎯 Key Features

• 🌓 Dark Terminal Theme: Beautiful terminal-inspired UI with MS-DOS style cursors and typewriter animations
• 💜 Modern Purple/Blue Aesthetic: Custom color scheme with rgb(160, 160, 255) accents
• 📱 Fully Responsive: Seamless experience across desktop, tablet, and mobile devices
• 🔐 Authentication System: Secure login/register with form validation
• ⚡ Lightning Fast: Built with Vite for optimal development and production performance
• 🎨 Interactive Animations: Smooth typewriter effects and hover animations
• 🔥 Gen-Z Friendly: UI copy that actually gets developers and their vibe

🛠 Tech Stack

Technology	Purpose	Version
React	Frontend Framework	19.1.1+
Vite	Build Tool & Dev Server	7.1.6+
React Router	Client-side Routing	7.9.3+
React Icons	Icon Library	5.5.0+
Axios	HTTP Client	1.12.2+
Tailwind CSS	Utility-First CSS	Latest
ESLint	Code Linting	9.35.0+

🚀 Getting Started

Prerequisites

• Node.js (v18+ recommended)
• npm or yarn
• Git

📦 Installation

1. Clone the repository

   git clone https://github.com/HacktoberBlog/hackerblog-frontend.git
   cd hackerblog-frontend

2. Install dependencies

   npm install # or npm i

3. Start development server

   npm run dev

4. Open your browser Navigate to http://localhost:5173 (or the port shown in your terminal)

   🐳 Running HackerBlog Frontend with Docker Compose

   You can run the HackerBlog frontend locally or inside Docker using Docker Compose.

   Prerequisites

   • Docker installed

5. Clone the repository

git clone https://github.com/HacktoberBlog/hackerblog-frontend.git
cd hackerblog-frontend

2. Copy the environment Variables

cp .\.env.example .\.env

3. Build and Start with Docker Compose

docker compose up

🏗 Available Scripts

Command	Description
npm run dev	Start development server with hot reload
npm run dev:docker	Start development server with --host flag
npm run build	Build for production
npm run preview	Preview production build locally
npm run lint	Run ESLint code analysis

🎨 Project Structure

src/
├── components/          # Reusable UI components
│   ├── TopBar.jsx      # Navigation header
│   └── TopBar.css      # TopBar styling
├── pages/              # Page components
│   ├── LandingPage.jsx # Main landing page
│   ├── LandingPage.css # Landing page styles
│   ├── LoginPage.jsx   # User authentication
│   ├── RegisterPage.jsx# User registration
│   └── AuthPages.css   # Auth pages styling
├── routes/             # Route protection
│   ├── ProtectedRoute.jsx
│   └── PublicRoute.jsx
├── context/            # React Context
│   └── MyContext.jsx   # Global state management
├── api/                # API integration
│   ├── api.config.js   # Axios configuration
│   ├── api.intercepter.js
│   └── auth/           # Authentication APIs
├── utils/              # Utility functions
└── assets/             # Static assets

🎭 Features Showcase

🖥 Terminal-Inspired Landing Page

• Authentic terminal window design with macOS-style controls
• Typewriter animations with chunky MS-DOS cursors
• Command-line interface aesthetics for that authentic dev feel
• Hacktoberfest 2025 integration with contribution opportunities

🔐 Modern Authentication

• Sleek login/register forms with purple/blue theme
• Real-time form validation with helpful error messages
• Responsive design that works on all devices
• Context-based user management for seamless UX

🎨 Custom Design System

• Consistent purple/blue color palette
• Inter font family for modern typography
• Gradient backgrounds and smooth transitions
• Hover effects without underlines for clean interactions

🤝 Contributing

We welcome contributors of all skill levels! HackerBlog is participating in Hacktoberfest 2025.

🌟 Contribution Areas

• 🔧 Frontend Development: React components, UI/UX improvements
• 🐛 Bug Fixes: Quality assurance and testing
• 📚 Documentation: README improvements and code comments
• 🎨 Design: Visual enhancements and animations

📋 How to Contribute

Please read our CONTRIBUTING.md for detailed guidelines on how to contribute effectively.

🏷 Issue Labels

• good-first-issue - Perfect for newcomers
• hacktoberfest - Hacktoberfest eligible
• frontend - Frontend-related tasks
• bug - Bug fixes needed
• enhancement - New features or improvements

🔗 Related Repositories

• Backend: HacktoberBlog/SpringBootBackend
• Organization: HacktoberBlog

📄 License

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

🙏 Acknowledgments

• React Team for the amazing frontend framework
• Vite Team for the lightning-fast build tool
• Hacktoberfest for promoting open source contributions
• All Contributors who make this project possible

📞 Support

• Issues: GitHub Issues
• Discussions: GitHub Discussions
• Organization: @HacktoberBlog

---

Made with 💜 by the HackerBlog Community

Where developers share stories, insights, and code - no cap! 🔥