diff --git a/docs/blog/authors.json b/docs/blog/authors.json
new file mode 100644
index 0000000..c633453
--- /dev/null
+++ b/docs/blog/authors.json
@@ -0,0 +1,48 @@
+{
+ "authors": [
+ {
+ "name": "CodeStorm Hub Team",
+ "role": "Core Team",
+ "bio": "The collective voice of the CodeStorm Hub community, sharing updates, announcements, and insights from our open-source journey.",
+ "avatar": "/images/codestorm-logo.png",
+ "social": {
+ "github": "https://github.com/CodeStorm-Hub",
+ "twitter": "#",
+ "linkedin": "#"
+ }
+ },
+ {
+ "name": "Syed Salman Reza",
+ "role": "Founder & Lead Developer",
+ "bio": "Full-stack developer passionate about building scalable web applications and fostering open-source communities.",
+ "avatar": "/team-members/syed-salman-reza.jpg",
+ "social": {
+ "github": "https://github.com/syed-reza98",
+ "linkedin": "https://www.linkedin.com/in/salman-reza",
+ "twitter": "#"
+ }
+ },
+ {
+ "name": "Development Team",
+ "role": "Technical Writers",
+ "bio": "Our development team shares technical insights, tutorials, and best practices from building modern web applications.",
+ "avatar": "/images/team-avatar.png",
+ "social": {
+ "github": "https://github.com/CodeStorm-Hub",
+ "twitter": "#",
+ "linkedin": "#"
+ }
+ },
+ {
+ "name": "Community Team",
+ "role": "Community Managers",
+ "bio": "Dedicated to building and nurturing our open-source community through guidelines, support, and engagement.",
+ "avatar": "/images/community-avatar.png",
+ "social": {
+ "github": "https://github.com/CodeStorm-Hub",
+ "twitter": "#",
+ "linkedin": "#"
+ }
+ }
+ ]
+}
diff --git a/docs/blog/posts/getting-started-nextjs-radix.md b/docs/blog/posts/getting-started-nextjs-radix.md
new file mode 100644
index 0000000..e892faa
--- /dev/null
+++ b/docs/blog/posts/getting-started-nextjs-radix.md
@@ -0,0 +1,443 @@
+---
+title: "Getting Started with Next.js 15 and Radix UI: A Modern Web Development Stack"
+description: "Learn how to build accessible, performant web applications using Next.js 15 and Radix UI - the stack powering CodeStorm Hub."
+author: "Development Team"
+date: "2025-10-13"
+category: "Technical"
+tags: ["nextjs", "radix-ui", "tutorial", "react", "web-development", "accessibility"]
+featured: false
+published: true
+---
+
+# Getting Started with Next.js 15 and Radix UI
+
+At CodeStorm Hub, we're always exploring modern technologies that help us build better applications. For our portfolio website, we chose Next.js 15 and Radix UI - a powerful combination that delivers excellent performance, developer experience, and accessibility.
+
+In this guide, we'll walk you through why we chose this stack and how to get started with it.
+
+## Why Next.js 15?
+
+Next.js has become the go-to framework for React applications, and version 15 brings significant improvements:
+
+### 1. App Router (Stable)
+The App Router provides a new way to build applications with:
+- Server Components by default for better performance
+- Improved routing with layouts and templates
+- Built-in loading and error states
+- Streaming and Suspense support
+
+### 2. Turbopack
+Next.js 15 includes Turbopack, a new bundler that's:
+- Significantly faster than Webpack
+- Optimized for both development and production
+- Compatible with the existing Next.js ecosystem
+
+### 3. Enhanced Performance
+- Improved image optimization
+- Better font loading strategies
+- Automatic static optimization
+- Enhanced caching mechanisms
+
+### 4. Server Actions
+Built-in support for server mutations without API routes:
+```typescript
+async function submitForm(formData: FormData) {
+ 'use server'
+ // Handle form submission
+}
+```
+
+## Why Radix UI?
+
+Radix UI is a low-level UI component library that provides:
+
+### Unstyled Components
+Components come without styling, giving you complete control over the design while maintaining excellent functionality and accessibility.
+
+### Accessibility Built-In
+Every component follows WCAG guidelines and includes:
+- Proper ARIA attributes
+- Keyboard navigation
+- Screen reader support
+- Focus management
+
+### Composability
+Build complex components by composing primitives:
+```tsx
+
+
+
+
+
+
+
+
+
+
+
+```
+
+### TypeScript Support
+Full TypeScript support with excellent type definitions.
+
+## Setting Up Your Project
+
+Let's create a new project with Next.js 15 and Radix UI:
+
+### Step 1: Create a Next.js Application
+
+```bash
+npx create-next-app@latest my-app
+```
+
+Select these options:
+- TypeScript: Yes
+- ESLint: Yes
+- Tailwind CSS: Yes
+- App Router: Yes
+- Import alias: Yes (@/*)
+
+### Step 2: Install Radix UI
+
+Install the Radix UI components you need:
+
+```bash
+npm install @radix-ui/react-dialog
+npm install @radix-ui/react-dropdown-menu
+npm install @radix-ui/react-navigation-menu
+npm install @radix-ui/react-toast
+```
+
+### Step 3: Set Up Tailwind CSS
+
+Configure Tailwind for optimal styling:
+
+```typescript
+// tailwind.config.ts
+import type { Config } from 'tailwindcss'
+
+const config: Config = {
+ content: [
+ './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
+ './src/components/**/*.{js,ts,jsx,tsx,mdx}',
+ './src/app/**/*.{js,ts,jsx,tsx,mdx}',
+ ],
+ theme: {
+ extend: {
+ colors: {
+ border: 'hsl(var(--border))',
+ input: 'hsl(var(--input))',
+ ring: 'hsl(var(--ring))',
+ background: 'hsl(var(--background))',
+ foreground: 'hsl(var(--foreground))',
+ },
+ borderRadius: {
+ lg: 'var(--radius)',
+ md: 'calc(var(--radius) - 2px)',
+ sm: 'calc(var(--radius) - 4px)',
+ },
+ },
+ },
+ plugins: [],
+}
+export default config
+```
+
+## Building Components with Radix UI
+
+Let's build a reusable dialog component:
+
+### Dialog Component
+
+```tsx
+// components/ui/dialog.tsx
+import * as DialogPrimitive from '@radix-ui/react-dialog'
+import { cn } from '@/lib/utils'
+
+export function Dialog({ children, ...props }: DialogPrimitive.DialogProps) {
+ return (
+
+ {children}
+
+ )
+}
+
+export function DialogTrigger({ className, ...props }: DialogPrimitive.DialogTriggerProps) {
+ return (
+
+ )
+}
+
+export function DialogContent({ className, children, ...props }: DialogPrimitive.DialogContentProps) {
+ return (
+
+
+
+ {children}
+
+
+ )
+}
+```
+
+### Using the Dialog
+
+```tsx
+// app/page.tsx
+import { Dialog, DialogTrigger, DialogContent } from '@/components/ui/dialog'
+
+export default function Home() {
+ return (
+
+ )
+}
+```
+
+## Best Practices
+
+### 1. Server Components First
+Use Server Components by default and only add 'use client' when needed:
+
+```tsx
+// Server Component (default)
+export default async function Page() {
+ const data = await fetchData()
+ return
{data}
+}
+
+// Client Component (when needed)
+'use client'
+export default function InteractiveComponent() {
+ const [state, setState] = useState()
+ return
+}
+```
+
+### 2. Optimize Images
+
+Always use the Next.js Image component:
+
+```tsx
+import Image from 'next/image'
+
+export function Hero() {
+ return (
+
+ )
+}
+```
+
+### 3. Implement Proper Loading States
+
+Use Suspense and loading.tsx for better UX:
+
+```tsx
+// app/posts/loading.tsx
+export default function Loading() {
+ return
Loading posts...
+}
+
+// app/posts/page.tsx
+import { Suspense } from 'react'
+
+export default function PostsPage() {
+ return (
+ }>
+
+
+ )
+}
+```
+
+### 4. Accessibility Checkers
+
+Add accessibility testing to your development workflow:
+
+```tsx
+// Always provide meaningful alt text
+
+
+// Use semantic HTML
+
+
+// Ensure proper focus management
+
+```
+
+## Performance Optimization Tips
+
+### 1. Dynamic Imports
+
+Split large components:
+
+```tsx
+import dynamic from 'next/dynamic'
+
+const HeavyComponent = dynamic(() => import('./HeavyComponent'), {
+ loading: () =>
Loading...
,
+ ssr: false, // Disable SSR for this component if needed
+})
+```
+
+### 2. Metadata API
+
+Optimize SEO with the Metadata API:
+
+```tsx
+import type { Metadata } from 'next'
+
+export const metadata: Metadata = {
+ title: 'My Page',
+ description: 'Page description',
+ openGraph: {
+ title: 'My Page',
+ description: 'Page description',
+ images: ['/og-image.jpg'],
+ },
+}
+```
+
+### 3. Font Optimization
+
+Use next/font for optimal font loading:
+
+```tsx
+import { Inter } from 'next/font/google'
+
+const inter = Inter({
+ subsets: ['latin'],
+ display: 'swap',
+})
+
+export default function RootLayout({ children }) {
+ return (
+
+ {children}
+
+ )
+}
+```
+
+## Common Patterns
+
+### Form Handling with Server Actions
+
+```tsx
+async function createPost(formData: FormData) {
+ 'use server'
+
+ const title = formData.get('title')
+ const content = formData.get('content')
+
+ // Save to database
+ await db.posts.create({ title, content })
+
+ revalidatePath('/posts')
+ redirect('/posts')
+}
+
+export function NewPostForm() {
+ return (
+
+ )
+}
+```
+
+### Data Fetching
+
+```tsx
+// Server Component with async/await
+export default async function PostsPage() {
+ const posts = await fetch('https://api.example.com/posts', {
+ next: { revalidate: 3600 } // Cache for 1 hour
+ }).then(res => res.json())
+
+ return (
+
+ {posts.map(post => (
+
+
{post.title}
+
{post.excerpt}
+
+ ))}
+
+ )
+}
+```
+
+## Deployment
+
+Deploy to Vercel for the best Next.js experience:
+
+```bash
+# Install Vercel CLI
+npm i -g vercel
+
+# Deploy
+vercel
+```
+
+Or use the Vercel GitHub integration for automatic deployments on push.
+
+## Resources
+
+- [Next.js Documentation](https://nextjs.org/docs)
+- [Radix UI Documentation](https://www.radix-ui.com)
+- [Next.js App Router Guide](https://nextjs.org/docs/app)
+- [Radix UI Primitives](https://www.radix-ui.com/primitives)
+
+## Conclusion
+
+Next.js 15 and Radix UI provide a powerful foundation for building modern web applications. The combination offers:
+
+- Excellent performance out of the box
+- Built-in accessibility
+- Great developer experience
+- Production-ready features
+- Active communities and documentation
+
+At CodeStorm Hub, this stack has enabled us to build a fast, accessible, and maintainable website. We encourage you to explore these technologies and see how they can improve your projects.
+
+---
+
+*Have questions about Next.js or Radix UI? Join the discussion on our [GitHub repository](https://github.com/CodeStorm-Hub) or check out our other [technical articles](/blog).*
diff --git a/docs/blog/posts/open-source-best-practices.md b/docs/blog/posts/open-source-best-practices.md
new file mode 100644
index 0000000..070db79
--- /dev/null
+++ b/docs/blog/posts/open-source-best-practices.md
@@ -0,0 +1,522 @@
+---
+title: "Open Source Best Practices: A Guide for Contributors and Maintainers"
+description: "Essential guidelines and best practices for contributing to and maintaining open-source projects, from code quality to community engagement."
+author: "Community Team"
+date: "2025-10-12"
+category: "Community"
+tags: ["open-source", "best-practices", "guidelines", "community", "git", "github"]
+featured: false
+published: true
+---
+
+# Open Source Best Practices: A Guide for Contributors and Maintainers
+
+Open-source software powers much of the modern web, and at CodeStorm Hub, we're committed to fostering a healthy, productive open-source community. Whether you're making your first contribution or maintaining a project, following best practices ensures a positive experience for everyone involved.
+
+## For Contributors
+
+### Before You Contribute
+
+#### 1. Read the Documentation
+
+Always start by reading:
+- **README.md**: Understand what the project does
+- **CONTRIBUTING.md**: Learn the contribution process
+- **CODE_OF_CONDUCT.md**: Understand community expectations
+- **License**: Know the terms under which the code is shared
+
+#### 2. Set Up Your Environment
+
+Follow the setup instructions carefully:
+
+```bash
+# Fork the repository on GitHub
+# Clone your fork
+git clone https://github.com/YOUR_USERNAME/repository-name.git
+
+# Add upstream remote
+git remote add upstream https://github.com/ORIGINAL_OWNER/repository-name.git
+
+# Install dependencies
+npm install # or yarn install, pip install, etc.
+
+# Run tests to ensure everything works
+npm test
+```
+
+#### 3. Choose the Right Issue
+
+Look for issues labeled:
+- `good first issue` - Perfect for newcomers
+- `help wanted` - Maintainers are looking for help
+- `beginner friendly` - Suitable for those learning
+
+### Making Your Contribution
+
+#### 1. Create a Feature Branch
+
+Always work on a separate branch:
+
+```bash
+# Update your main branch
+git checkout main
+git pull upstream main
+
+# Create a feature branch
+git checkout -b feature/your-feature-name
+# or
+git checkout -b fix/issue-number-description
+```
+
+#### 2. Write Quality Code
+
+**Follow the Project's Style**
+```javascript
+// Use the project's existing patterns
+// If they use semicolons, you use semicolons
+// If they use TypeScript, type everything properly
+
+// Good - matches project style
+export function calculateTotal(items: Item[]): number {
+ return items.reduce((sum, item) => sum + item.price, 0);
+}
+
+// Bad - inconsistent with project
+export function calculateTotal(items) {
+ return items.reduce((sum, item) => sum + item.price, 0)
+}
+```
+
+**Write Clear, Self-Documenting Code**
+```typescript
+// Good - clear and self-explanatory
+function isUserEligibleForDiscount(user: User, purchaseAmount: number): boolean {
+ const hasValidMembership = user.membershipExpiry > new Date();
+ const meetsMinimumPurchase = purchaseAmount >= 100;
+ return hasValidMembership && meetsMinimumPurchase;
+}
+
+// Bad - unclear logic
+function check(u, amt) {
+ return u.exp > new Date() && amt >= 100;
+}
+```
+
+#### 3. Test Your Changes
+
+Always test before submitting:
+
+```bash
+# Run existing tests
+npm test
+
+# Run linter
+npm run lint
+
+# Test manually
+npm run dev # or npm start
+```
+
+Add tests for new features:
+
+```typescript
+describe('calculateTotal', () => {
+ it('should sum item prices correctly', () => {
+ const items = [
+ { name: 'Item 1', price: 10 },
+ { name: 'Item 2', price: 20 },
+ ];
+ expect(calculateTotal(items)).toBe(30);
+ });
+
+ it('should return 0 for empty array', () => {
+ expect(calculateTotal([])).toBe(0);
+ });
+});
+```
+
+#### 4. Write Good Commit Messages
+
+Follow conventional commits:
+
+```bash
+# Format: ():
+
+# Good examples
+git commit -m "feat(auth): add OAuth2 login support"
+git commit -m "fix(api): handle null response in user endpoint"
+git commit -m "docs(readme): update installation instructions"
+git commit -m "refactor(utils): simplify date formatting logic"
+
+# Types:
+# feat: New feature
+# fix: Bug fix
+# docs: Documentation changes
+# style: Code style changes (formatting)
+# refactor: Code refactoring
+# test: Adding tests
+# chore: Maintenance tasks
+```
+
+**Commit Message Best Practices:**
+- Use present tense ("add feature" not "added feature")
+- Keep the subject line under 50 characters
+- Add detailed description if needed
+- Reference issues: "fixes #123" or "closes #456"
+
+#### 5. Submit a Quality Pull Request
+
+**PR Title**: Clear and descriptive
+```
+Good: "Add dark mode support for dashboard"
+Bad: "Update files"
+```
+
+**PR Description Template:**
+```markdown
+## Description
+Brief description of changes
+
+## Type of Change
+- [ ] Bug fix
+- [ ] New feature
+- [ ] Breaking change
+- [ ] Documentation update
+
+## Related Issues
+Closes #123
+
+## Changes Made
+- Added dark mode toggle component
+- Updated theme context
+- Added dark mode styles for dashboard
+
+## Testing
+- [ ] Tested locally
+- [ ] All tests pass
+- [ ] Added new tests
+
+## Screenshots (if applicable)
+[Add screenshots here]
+
+## Checklist
+- [ ] My code follows the project's style guidelines
+- [ ] I have performed a self-review
+- [ ] I have commented my code where needed
+- [ ] I have updated the documentation
+- [ ] My changes generate no new warnings
+- [ ] I have added tests that prove my fix/feature works
+```
+
+#### 6. Respond to Feedback
+
+Be open to suggestions:
+
+```markdown
+# Good response
+"Thanks for the feedback! You're right about the error handling.
+I'll add try-catch blocks and update the PR shortly."
+
+# Not ideal
+"This works fine on my machine."
+```
+
+### Communication Best Practices
+
+#### Be Respectful and Professional
+- Assume good intentions
+- Be patient with maintainers (they're often volunteers)
+- Accept constructive criticism gracefully
+- Thank people for their time and feedback
+
+#### Ask Questions Effectively
+```markdown
+# Good question
+"I'm trying to implement feature X as described in issue #123.
+I've reviewed the codebase and I'm unsure about the best approach
+for Y. Should I use pattern A or pattern B? Here's what I've
+considered: [details]"
+
+# Less helpful
+"How do I do this?"
+```
+
+## For Maintainers
+
+### Project Setup
+
+#### 1. Create Clear Documentation
+
+**README.md should include:**
+```markdown
+# Project Name
+
+Brief description of what the project does
+
+## Features
+- Feature 1
+- Feature 2
+
+## Installation
+```bash
+npm install project-name
+```
+
+## Quick Start
+```javascript
+// Example usage
+```
+
+## Documentation
+Link to full documentation
+
+## Contributing
+See [CONTRIBUTING.md](CONTRIBUTING.md)
+
+## License
+MIT License
+```
+
+#### 2. Define Contribution Guidelines
+
+**CONTRIBUTING.md template:**
+```markdown
+# Contributing Guide
+
+## Getting Started
+1. Fork the repository
+2. Clone your fork
+3. Install dependencies
+4. Create a branch
+
+## Development Process
+1. Pick an issue
+2. Make changes
+3. Test thoroughly
+4. Submit PR
+
+## Code Style
+- Use ESLint configuration
+- Follow existing patterns
+- Add tests for new features
+
+## Pull Request Process
+1. Update documentation
+2. Add tests
+3. Ensure CI passes
+4. Wait for review
+```
+
+#### 3. Set Up Issue Templates
+
+**.github/ISSUE_TEMPLATE/bug_report.md:**
+```markdown
+---
+name: Bug Report
+about: Report a bug
+---
+
+## Description
+A clear description of the bug
+
+## Steps to Reproduce
+1. Go to '...'
+2. Click on '...'
+3. See error
+
+## Expected Behavior
+What should happen
+
+## Actual Behavior
+What actually happens
+
+## Environment
+- OS: [e.g., macOS, Windows]
+- Browser: [e.g., Chrome 96]
+- Version: [e.g., 1.0.0]
+```
+
+### Managing Contributions
+
+#### 1. Label Issues Appropriately
+
+Use clear, consistent labels:
+- `good first issue` - Easy for newcomers
+- `help wanted` - Need community help
+- `bug` - Something isn't working
+- `enhancement` - New feature or improvement
+- `documentation` - Documentation improvements
+- `question` - Further information requested
+- `priority: high` - Needs immediate attention
+
+#### 2. Review PRs Constructively
+
+**Good review comments:**
+```markdown
+✅ "Great work! This implementation is clean. One suggestion:
+consider extracting the validation logic into a separate
+function for better testability. What do you think?"
+
+✅ "Thanks for the PR! Could you add a test case for when
+the user is null? Here's an example: [code example]"
+
+❌ "This is wrong."
+❌ "Did you even test this?"
+```
+
+**Review checklist:**
+- [ ] Code follows project style
+- [ ] Tests are included and pass
+- [ ] Documentation is updated
+- [ ] No breaking changes (or properly documented)
+- [ ] No security vulnerabilities
+- [ ] Performance implications considered
+
+#### 3. Communicate Regularly
+
+- Acknowledge issues/PRs within 48 hours
+- Set expectations for review timelines
+- Explain decisions clearly
+- Thank contributors
+
+### Building Community
+
+#### 1. Welcome New Contributors
+
+```markdown
+# Example first-time contributor message
+"Thanks for your first contribution to [Project]! 🎉
+We appreciate you taking the time to help improve the project.
+A maintainer will review your PR soon. If you have questions,
+feel free to ask!"
+```
+
+#### 2. Recognize Contributions
+
+- Credit contributors in release notes
+- Maintain a CONTRIBUTORS.md file
+- Highlight significant contributions
+- Share success stories
+
+#### 3. Foster Discussion
+
+- Encourage questions and discussions
+- Create a welcoming environment
+- Be patient with learning contributors
+- Share knowledge generously
+
+## Advanced Topics
+
+### Semantic Versioning
+
+Follow semver (MAJOR.MINOR.PATCH):
+
+```
+1.0.0 → 1.0.1 (Patch: Bug fixes)
+1.0.1 → 1.1.0 (Minor: New features, backward compatible)
+1.1.0 → 2.0.0 (Major: Breaking changes)
+```
+
+### Changelog Management
+
+Keep a CHANGELOG.md:
+
+```markdown
+# Changelog
+
+## [Unreleased]
+
+## [1.1.0] - 2025-10-12
+### Added
+- Dark mode support
+- User preferences page
+
+### Fixed
+- Login redirect issue
+- Mobile navigation bug
+
+### Changed
+- Updated dependencies
+
+## [1.0.0] - 2025-10-01
+### Added
+- Initial release
+```
+
+### Release Process
+
+```bash
+# 1. Update version
+npm version minor # or major, patch
+
+# 2. Update CHANGELOG.md
+
+# 3. Commit changes
+git add .
+git commit -m "chore: release v1.1.0"
+
+# 4. Create tag
+git tag -a v1.1.0 -m "Release version 1.1.0"
+
+# 5. Push
+git push origin main --tags
+
+# 6. Create GitHub release
+# Use the GitHub UI or gh CLI
+```
+
+## Common Pitfalls to Avoid
+
+### For Contributors
+❌ Making large PRs that change many things
+✅ Keep PRs focused and small
+
+❌ Not testing before submitting
+✅ Always test your changes
+
+❌ Ignoring code style guidelines
+✅ Follow the project's conventions
+
+❌ Taking feedback personally
+✅ View feedback as learning opportunity
+
+### For Maintainers
+❌ Being dismissive of contributions
+✅ Provide constructive feedback
+
+❌ Inconsistent PR review times
+✅ Set expectations and communicate
+
+❌ Not documenting decisions
+✅ Document architecture decisions
+
+❌ Trying to do everything alone
+✅ Delegate and empower contributors
+
+## Tools and Resources
+
+### Essential Tools
+- **Git**: Version control
+- **GitHub/GitLab**: Code hosting and collaboration
+- **VS Code**: Excellent Git integration
+- **GitHub CLI**: Command-line GitHub operations
+
+### Helpful Resources
+- [Open Source Guides](https://opensource.guide/)
+- [First Contributions](https://firstcontributions.github.io/)
+- [How to Contribute to Open Source](https://opensource.guide/how-to-contribute/)
+- [Conventional Commits](https://www.conventionalcommits.org/)
+
+## Conclusion
+
+Open-source development thrives on collaboration, respect, and shared learning. By following these best practices:
+
+**Contributors** can make meaningful contributions and grow their skills
+**Maintainers** can build healthy, sustainable projects
+**Communities** can flourish and create amazing software together
+
+At CodeStorm Hub, we're committed to these principles. Whether you're contributing to our projects or building your own, we hope this guide helps you create positive open-source experiences.
+
+---
+
+*Ready to contribute? Check out our [projects](/projects) for opportunities, or read our [contribution guidelines](/contributing) to get started. Have questions? Reach out through our [contact page](/contact).*
diff --git a/docs/blog/posts/our-open-source-journey.md b/docs/blog/posts/our-open-source-journey.md
new file mode 100644
index 0000000..6fb4854
--- /dev/null
+++ b/docs/blog/posts/our-open-source-journey.md
@@ -0,0 +1,173 @@
+---
+title: "Our Journey: Building an Open Source Community"
+description: "The story behind CodeStorm Hub - from a small team of passionate developers to a growing open-source community making real impact."
+author: "Syed Salman Reza"
+date: "2025-10-14"
+category: "Community"
+tags: ["community", "story", "open-source", "journey"]
+featured: false
+published: true
+---
+
+# Our Journey: Building an Open Source Community
+
+Every great community starts with a simple idea and a shared passion. This is the story of how CodeStorm Hub came to be, and where we're heading.
+
+## The Beginning
+
+It all started in university, where a group of computer science students found themselves working on various academic and personal projects. We were learning web development, experimenting with new technologies, and facing the challenges that every developer encounters.
+
+What set us apart wasn't our technical skills - we were all learning - but our desire to learn together, share knowledge, and build something meaningful.
+
+## Early Projects
+
+Our first collaborative projects were modest:
+
+- **Academic Management Systems**: Built to solve real problems we faced as students
+- **Wedding Websites**: Custom solutions for friends and family
+- **E-commerce Experiments**: Learning the ropes of online business platforms
+
+Each project taught us valuable lessons:
+
+- The importance of good documentation
+- How to collaborate using Git and GitHub
+- The value of code reviews and pair programming
+- Why testing and quality assurance matter
+
+## The Turning Point
+
+As we graduated and entered the professional world, we realized something important: the collaborative, learning-focused environment we had created was rare and valuable. Many developers, especially those starting out, struggle to find:
+
+- Real-world projects to work on
+- Experienced mentors willing to help
+- A supportive community that values learning over perfection
+- Open-source projects that welcome newcomers
+
+We decided to formalize our group and create a community that could provide these opportunities to others.
+
+## Building the Foundation
+
+Creating CodeStorm Hub required more than just code. We needed:
+
+### Clear Guidelines
+We developed comprehensive contribution guidelines, a code of conduct, and documentation standards to ensure everyone could participate effectively.
+
+### Diverse Projects
+We curated a portfolio of projects spanning different technologies, difficulty levels, and domains so contributors could find work that matched their interests and skills.
+
+### Mentorship Culture
+We committed to providing guidance and support to new contributors, recognizing that everyone starts somewhere.
+
+### Quality Standards
+We established code review processes and best practices to maintain high-quality codebases while still being welcoming to newcomers.
+
+## Our Growth
+
+Today, CodeStorm Hub has:
+
+- **7 Core Team Members**: Each bringing unique expertise and perspectives
+- **32+ Open Source Projects**: Covering web development, e-commerce, enterprise applications, and more
+- **Multiple Technology Stacks**: React, Next.js, Laravel, Django, Vue.js, and more
+- **Growing Contributor Base**: Developers from various backgrounds contributing to our projects
+
+## Key Milestones
+
+**2023**: Founded by university classmates working on academic projects
+
+**2024**: Expanded to include Laravel-based e-commerce platforms and React applications
+
+**Early 2025**: Launched multiple SaaS projects and enterprise solutions
+
+**October 2025**: Official CodeStorm Hub website launch with comprehensive project documentation
+
+## Lessons Learned
+
+Building a community taught us invaluable lessons:
+
+### 1. Communication is Everything
+Clear, respectful communication is more important than technical prowess. We've learned to over-communicate, document decisions, and always assume good intentions.
+
+### 2. Diversity Makes Us Stronger
+Our team brings together different skill levels, backgrounds, and perspectives. This diversity has led to better solutions and a more inclusive community.
+
+### 3. Documentation Matters
+Good documentation isn't just helpful - it's essential. We've made it a priority to document not just code, but also our processes, decisions, and rationale.
+
+### 4. Start Small, Think Big
+We began with simple projects and gradually expanded. This allowed us to establish good practices early and scale them as we grew.
+
+### 5. Celebrate Contributions
+Every contribution matters, from fixing a typo to architecting a major feature. We make sure to recognize and celebrate all contributions.
+
+## Challenges We've Faced
+
+Our journey hasn't been without obstacles:
+
+**Time Management**: Balancing professional work, personal life, and open-source contributions is challenging. We've learned to be realistic about commitments and communicate clearly about availability.
+
+**Maintaining Consistency**: With contributors in different time zones and with varying availability, keeping consistent progress on projects requires good planning and project management.
+
+**Technical Debt**: Early projects accumulated technical debt as we learned. We're now systematically refactoring and improving our older codebases.
+
+**Onboarding**: Making it easy for new contributors to get started is an ongoing challenge. We continuously improve our documentation and onboarding processes.
+
+## Our Community Values
+
+Through our journey, we've solidified the values that define CodeStorm Hub:
+
+**Inclusivity**: Everyone is welcome, regardless of experience level
+**Learning**: We prioritize growth and education over perfection
+**Collaboration**: We believe the best solutions come from working together
+**Quality**: We maintain high standards while remaining approachable
+**Transparency**: We operate openly and share our decision-making processes
+
+## Looking Forward
+
+As we continue to grow, our vision for CodeStorm Hub includes:
+
+### Expanded Project Portfolio
+More projects in emerging technologies like AI/ML, blockchain, and cloud-native applications.
+
+### Educational Content
+Regular tutorials, workshops, and learning resources to help developers grow their skills.
+
+### Global Community
+Building connections with developers worldwide through virtual events, hackathons, and collaborative projects.
+
+### Mentorship Programs
+Formal mentorship opportunities pairing experienced developers with those starting their journey.
+
+### Industry Partnerships
+Collaborations with companies and organizations that share our values and can provide additional opportunities for our community.
+
+## Join Our Journey
+
+CodeStorm Hub's story is still being written, and we want you to be part of it. Whether you're:
+
+- A student looking to build your portfolio
+- A professional wanting to give back to the community
+- Someone transitioning into tech
+- An experienced developer seeking meaningful projects
+
+There's a place for you here.
+
+## Gratitude
+
+This journey wouldn't be possible without:
+
+- **Our Core Team**: Whose dedication and passion drive everything we do
+- **Our Contributors**: Who trust us with their time and talent
+- **Our Users**: Who use our projects and provide valuable feedback
+- **The Open Source Community**: Which inspired and taught us
+
+## Final Thoughts
+
+Building CodeStorm Hub has been one of the most rewarding experiences of our lives. We've learned that creating a successful open-source community isn't about having the perfect code or the most contributors - it's about creating an environment where people feel welcome to learn, contribute, and grow.
+
+Every line of code, every pull request, every discussion contributes to something larger than any individual project. We're building a community that will help shape the next generation of developers.
+
+The journey continues, and we're excited to see where it takes us - and you.
+
+---
+
+*Want to be part of our story? Check out our [contributing guidelines](/contributing) or browse our [projects](/projects) to get started. Have a story to share? We'd love to feature community contributions in future posts!*
diff --git a/docs/blog/posts/upcoming-events-roadmap.md b/docs/blog/posts/upcoming-events-roadmap.md
new file mode 100644
index 0000000..28f3ab1
--- /dev/null
+++ b/docs/blog/posts/upcoming-events-roadmap.md
@@ -0,0 +1,409 @@
+---
+title: "Upcoming Events and Community Roadmap: What's Next for CodeStorm Hub"
+description: "Discover upcoming community events, project milestones, and our roadmap for the next quarter at CodeStorm Hub."
+author: "CodeStorm Hub Team"
+date: "2025-10-16"
+category: "News"
+tags: ["events", "roadmap", "community", "announcements", "planning"]
+featured: true
+published: true
+---
+
+# Upcoming Events and Community Roadmap
+
+We're excited to share what's coming next at CodeStorm Hub! From virtual events to new projects and community initiatives, Q4 2025 is packed with opportunities for learning, collaboration, and growth.
+
+## Upcoming Events
+
+### 🎓 October 2025 Events
+
+#### Open Source Contribution Workshop
+**Date:** October 28, 2025
+**Time:** 2:00 PM - 5:00 PM UTC
+**Format:** Virtual (Zoom)
+**Level:** Beginner to Intermediate
+
+Join us for a hands-on workshop where we'll guide you through making your first open-source contribution. We'll cover:
+- Setting up your development environment
+- Understanding Git and GitHub workflows
+- Finding issues to work on
+- Submitting your first pull request
+- Code review process
+
+**How to Register:** RSVP on our events page or GitHub discussions
+
+#### Tech Talk: Modern Web Architecture
+**Date:** October 30, 2025
+**Time:** 6:00 PM UTC
+**Format:** Virtual (YouTube Live)
+**Level:** All levels
+
+Our lead developers will discuss the architecture behind our latest projects, covering:
+- Next.js 15 App Router patterns
+- Server Components vs Client Components
+- State management strategies
+- Performance optimization techniques
+- Deployment best practices
+
+**No registration required** - just tune in to our YouTube channel!
+
+### 📅 November 2025 Events
+
+#### Hacktoberfest Wrap-Up & Showcase
+**Date:** November 5, 2025
+**Time:** 3:00 PM UTC
+**Format:** Virtual
+**Level:** All levels
+
+Celebrate Hacktoberfest contributions with us! We'll:
+- Showcase top contributions from the community
+- Recognize outstanding contributors
+- Share lessons learned
+- Announce November initiatives
+
+#### Code Review Session: Laravel Best Practices
+**Date:** November 12, 2025
+**Time:** 4:00 PM UTC
+**Format:** Virtual (Live coding)
+**Level:** Intermediate
+
+An interactive session where we'll review Laravel projects and discuss:
+- Clean code principles in PHP
+- Laravel 10 best practices
+- API design patterns
+- Testing strategies
+- Security considerations
+
+#### AI/ML Workshop: Getting Started with AI Integration
+**Date:** November 20, 2025
+**Time:** 2:00 PM UTC
+**Format:** Virtual Workshop
+**Level:** Beginner to Intermediate
+
+Learn how to integrate AI capabilities into your web applications:
+- Introduction to AI APIs (OpenAI, Google AI)
+- Building AI-powered features
+- Best practices for AI integration
+- Cost optimization strategies
+- Ethical AI considerations
+
+**Special Guest:** Our AI/ML specialist will share insights from real-world projects
+
+#### Community Hackathon: Build Something Amazing
+**Dates:** November 24-26, 2025
+**Format:** Virtual (48-hour hackathon)
+**Level:** All levels
+**Prizes:** Recognition, CodeStorm Hub swag, featured projects
+
+Our first community hackathon! Build anything using CodeStorm Hub's tech stack:
+- Theme: "Tools for Developers"
+- Form teams or work solo
+- Mentors available throughout
+- Project showcases on Day 3
+- Prizes for innovation, impact, and collaboration
+
+**Registration opens:** November 1, 2025
+
+### 🎯 December 2025 Events
+
+#### Year in Review: 2025 Retrospective
+**Date:** December 10, 2025
+**Time:** 5:00 PM UTC
+**Format:** Virtual
+**Level:** All levels
+
+Join us as we look back on 2025:
+- Community growth and milestones
+- Project highlights
+- Contributor spotlight
+- Lessons learned
+- Looking ahead to 2026
+
+#### Holiday Code-Along: Build a Holiday Project
+**Date:** December 18, 2025
+**Time:** 3:00 PM UTC
+**Format:** Virtual (Live coding)
+**Level:** Beginner friendly
+
+Build a festive web application together:
+- Real-time collaboration
+- Learn by doing
+- Fun and relaxed atmosphere
+- Perfect for beginners
+
+## Roadmap for Q4 2025 and Beyond
+
+### Project Initiatives
+
+#### Phase 1: Infrastructure & Quality (October 2025)
+**Status:** ✅ In Progress
+
+- [x] Website launch with portfolio and documentation
+- [x] Blog system implementation
+- [ ] Enhanced project documentation (75% complete)
+- [ ] Accessibility improvements (ongoing)
+- [ ] Performance optimization (ongoing)
+
+**Key Deliverables:**
+- Complete standardization of all 32 project documentation
+- WCAG 2.1 AA accessibility compliance
+- Lighthouse score of 90+ across all pages
+
+#### Phase 2: Community Features (November 2025)
+**Status:** 🔄 Upcoming
+
+- [ ] Event calendar and RSVP system
+- [ ] Community discussion forum integration
+- [ ] Contributor recognition system
+- [ ] Project showcase enhancements
+- [ ] Newsletter system
+
+**Key Deliverables:**
+- Interactive event calendar with automated reminders
+- GitHub Discussions integration
+- Contributor leaderboard and badges
+- Monthly project spotlight features
+
+#### Phase 3: Enhanced Tools & Resources (December 2025)
+**Status:** 📋 Planned
+
+- [ ] Project starter templates
+- [ ] Development environment setup guides
+- [ ] Video tutorials and screencasts
+- [ ] API documentation portal
+- [ ] Interactive learning paths
+
+**Key Deliverables:**
+- 5+ project starter templates
+- 10+ video tutorials
+- Comprehensive API documentation
+- Beginner to advanced learning tracks
+
+### New Projects on the Horizon
+
+#### Q4 2025 Project Launches
+
+**1. CodeStorm CLI Tool**
+A command-line interface for CodeStorm Hub operations:
+- Quick project setup
+- Template scaffolding
+- Contribution helpers
+- Local development tools
+
+**Expected Launch:** November 2025
+**Tech Stack:** Node.js, Commander.js
+**Looking for:** CLI enthusiasts, tool developers
+
+**2. Developer Portfolio Template**
+A customizable portfolio template for developers:
+- Built with Next.js 15
+- Multiple themes
+- Blog integration
+- Project showcase
+- Resume/CV builder
+
+**Expected Launch:** December 2025
+**Tech Stack:** Next.js, TypeScript, Tailwind CSS
+**Looking for:** UI/UX designers, frontend developers
+
+**3. Open Source Analytics Dashboard**
+A privacy-friendly analytics solution:
+- Track project metrics
+- Contributor insights
+- Community growth analytics
+- Privacy-first approach
+
+**Expected Launch:** Q1 2026
+**Tech Stack:** Next.js, D3.js, PostgreSQL
+**Looking for:** Data visualization experts, backend developers
+
+#### Long-term Vision (2026)
+
+**AI-Powered Code Review Bot**
+Automated code review assistant:
+- Style checking
+- Best practice suggestions
+- Security vulnerability detection
+- Learning resources
+
+**Community Learning Platform**
+Interactive learning environment:
+- Hands-on coding challenges
+- Project-based courses
+- Peer learning features
+- Certification system
+
+**CodeStorm Marketplace**
+Platform for sharing:
+- Code templates
+- UI components
+- Design assets
+- Learning resources
+
+### Community Growth Initiatives
+
+#### Mentorship Program (Launching November 2025)
+Connecting experienced developers with newcomers:
+- One-on-one mentorship
+- Group learning sessions
+- Project guidance
+- Career advice
+
+**Interested in becoming a mentor?** Sign up through our contact form!
+
+#### Regional Communities
+Building local CodeStorm Hub communities:
+- Regional meetups
+- Local hackathons
+- University partnerships
+- Company collaborations
+
+**Starting with:** Bangladesh, India, Southeast Asia
+**Expanding to:** Global reach by 2026
+
+#### Content Initiatives
+
+**Weekly Blog Posts**
+Regular content covering:
+- Technical tutorials
+- Project updates
+- Community highlights
+- Industry insights
+
+**YouTube Channel**
+Video content including:
+- Coding tutorials
+- Project walkthroughs
+- Event recordings
+- Quick tips and tricks
+
+**Podcast (Coming 2026)**
+Conversations about:
+- Open-source development
+- Career paths in tech
+- Community building
+- Technical deep-dives
+
+## How to Get Involved
+
+### For Contributors
+
+**Beginner Level:**
+1. Browse issues labeled `good first issue`
+2. Join our workshops and learning sessions
+3. Contribute to documentation
+4. Help with testing and bug reports
+
+**Intermediate Level:**
+1. Work on feature development
+2. Review pull requests
+3. Mentor newcomers
+4. Lead small projects
+
+**Advanced Level:**
+1. Architect new features
+2. Lead project initiatives
+3. Mentor teams
+4. Shape technical direction
+
+### For Community Members
+
+**Stay Connected:**
+- Follow our GitHub organization
+- Subscribe to our blog (RSS feed available)
+- Join our events
+- Participate in discussions
+
+**Share Your Ideas:**
+- Suggest new projects
+- Propose events or workshops
+- Share feedback on existing projects
+- Contribute to roadmap planning
+
+**Spread the Word:**
+- Share our projects
+- Write about your experiences
+- Invite others to join
+- Showcase your contributions
+
+## Quarterly Goals (Q4 2025)
+
+### Technical Goals
+- [ ] Achieve 90+ Lighthouse scores on all pages
+- [ ] Complete accessibility audit and fixes
+- [ ] Standardize documentation across all projects
+- [ ] Launch 2 new major projects
+- [ ] Improve test coverage to 80%+
+
+### Community Goals
+- [ ] Reach 100 total contributors
+- [ ] Host 8 community events
+- [ ] Publish 20+ blog posts
+- [ ] Grow newsletter to 200+ subscribers
+- [ ] Establish 3 regional communities
+
+### Content Goals
+- [ ] Create 10 video tutorials
+- [ ] Launch YouTube channel
+- [ ] Publish comprehensive contribution guide
+- [ ] Create 5 project starter templates
+- [ ] Write 15 technical articles
+
+## Measuring Success
+
+We'll track progress through:
+
+**Community Metrics:**
+- Active contributors
+- Event participation
+- Discussion engagement
+- New member onboarding
+
+**Technical Metrics:**
+- Code quality scores
+- Test coverage
+- Performance benchmarks
+- Accessibility compliance
+
+**Content Metrics:**
+- Blog readership
+- Video views
+- Resource downloads
+- Tutorial completions
+
+## Join Us on This Journey
+
+The roadmap you see here is ambitious, and we can't do it alone. Every contribution, whether it's code, documentation, design, or community support, helps us move forward.
+
+**Your input matters!** We'd love to hear:
+- Which events interest you most?
+- What projects would you like to see?
+- What topics should we cover in workshops?
+- How can we better support the community?
+
+**Share your thoughts:**
+- Comment on our GitHub Discussions
+- Fill out our community survey (coming soon)
+- Join our events and provide feedback
+- Reach out through our contact form
+
+## Stay Updated
+
+Don't miss important updates:
+
+📧 **Subscribe to our newsletter** for monthly roundups
+📱 **Follow us on GitHub** for project updates
+📺 **Subscribe on YouTube** for video content (coming soon)
+🔔 **Enable GitHub notifications** for event announcements
+
+## Conclusion
+
+Q4 2025 is shaping up to be an exciting period for CodeStorm Hub. With new events, projects, and initiatives, there are more opportunities than ever to get involved, learn, and make an impact.
+
+Whether you're joining us for your first event, contributing to a project, or helping shape our roadmap, you're part of something special. Together, we're building not just software, but a community that empowers developers and creates lasting value.
+
+We can't wait to see you at our events and in our projects. Let's make Q4 2025 amazing!
+
+---
+
+*Questions about events or the roadmap? Check our [events page](/events) or reach out through our [contact form](/contact). Want to suggest an event or project? Open a discussion on [GitHub](https://github.com/CodeStorm-Hub).*
diff --git a/docs/blog/posts/welcome-to-codestorm-hub.md b/docs/blog/posts/welcome-to-codestorm-hub.md
new file mode 100644
index 0000000..2a037bb
--- /dev/null
+++ b/docs/blog/posts/welcome-to-codestorm-hub.md
@@ -0,0 +1,92 @@
+---
+title: "Welcome to CodeStorm Hub"
+description: "Introducing our new community platform and what we're building together - a vibrant open-source ecosystem for developers."
+author: "CodeStorm Hub Team"
+date: "2025-10-15"
+category: "Announcement"
+tags: ["community", "announcement", "open-source"]
+featured: true
+published: true
+---
+
+# Welcome to CodeStorm Hub
+
+We're thrilled to welcome you to CodeStorm Hub - a vibrant community dedicated to building innovative open-source projects and fostering collaboration among developers of all skill levels.
+
+## Our Mission
+
+At CodeStorm Hub, we believe in the power of open-source collaboration. Our mission is to create a welcoming environment where developers can:
+
+- **Learn** from real-world projects and experienced contributors
+- **Collaborate** on meaningful open-source initiatives
+- **Grow** their skills through hands-on experience
+- **Connect** with like-minded developers from around the world
+
+## What We're Building
+
+CodeStorm Hub is home to a diverse portfolio of projects spanning multiple technologies and domains:
+
+### Web Development
+From modern React and Next.js applications to full-stack solutions using Laravel, Django, and Vue.js, we're building scalable web applications that solve real problems.
+
+### E-Commerce Solutions
+We're developing cutting-edge e-commerce platforms, including SaaS solutions, digital product marketplaces, and custom shopping experiences.
+
+### Enterprise Applications
+Our team works on enterprise-grade systems including Transaction Management Systems (TMS), Employee Management platforms, and business intelligence tools.
+
+### Innovation Projects
+We're exploring emerging technologies including AI/ML applications, IoT solutions, and innovative developer tools.
+
+## Our Values
+
+**Collaboration**: We believe the best solutions come from diverse perspectives working together.
+
+**Quality**: We maintain high standards for code quality, documentation, and user experience.
+
+**Inclusivity**: Everyone is welcome here, regardless of experience level or background.
+
+**Learning**: We're committed to continuous learning and knowledge sharing.
+
+**Transparency**: We operate openly, with clear communication and accessible processes.
+
+## How to Get Involved
+
+Getting started with CodeStorm Hub is easy:
+
+1. **Explore Our Projects**: Browse our portfolio to find projects that interest you
+2. **Read the Guidelines**: Familiarize yourself with our contribution guidelines and code of conduct
+3. **Start Contributing**: Pick an issue labeled "good first issue" and make your first contribution
+4. **Join the Community**: Connect with us on GitHub, participate in discussions, and attend our events
+5. **Share Your Ideas**: Have a project idea? We'd love to hear it!
+
+## What's Next
+
+In the coming weeks and months, you can expect:
+
+- Regular blog posts covering technical tutorials, best practices, and project updates
+- Community events including code reviews, pair programming sessions, and workshops
+- New projects launched in various technology stacks
+- Enhanced documentation and learning resources
+- Recognition programs for outstanding contributors
+
+## Connect With Us
+
+We're building this community together, and your voice matters. Here's how to stay connected:
+
+- **GitHub**: Follow our repositories and participate in discussions
+- **Blog**: Subscribe to our RSS feed for the latest updates
+- **Events**: Join our upcoming virtual and in-person events
+- **Contact**: Reach out through our contact form with questions or suggestions
+
+## Thank You
+
+A special thank you to our founding team members and early contributors who have helped shape CodeStorm Hub into what it is today. Your dedication and passion for open-source development inspire us every day.
+
+Whether you're a seasoned developer or just starting your coding journey, there's a place for you in our community. We can't wait to see what we'll build together.
+
+Welcome aboard, and happy coding!
+
+---
+
+*Have questions or feedback? We'd love to hear from you! Connect with us through our [contact page](/contact) or join the conversation on [GitHub](https://github.com/CodeStorm-Hub).*
diff --git a/package-lock.json b/package-lock.json
index f4226c5..55111c4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -29,6 +29,7 @@
"@types/node": "^20",
"@types/react": "^19",
"@types/react-dom": "^19",
+ "cross-env": "^10.1.0",
"eslint": "^9",
"eslint-config-next": "15.5.4",
"tailwindcss": "^4",
@@ -81,6 +82,13 @@
"tslib": "^2.4.0"
}
},
+ "node_modules/@epic-web/invariant": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/@epic-web/invariant/-/invariant-1.0.0.tgz",
+ "integrity": "sha512-lrTPqgvfFQtR/eY/qkIzp98OGdNJu0m5ji3q/nJI8v3SXkRKEnWiOxMmbvcSoAIzv/cGiuvRy57k4suKQSAdwA==",
+ "dev": true,
+ "license": "MIT"
+ },
"node_modules/@eslint-community/eslint-utils": {
"version": "4.9.0",
"resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.9.0.tgz",
@@ -2047,6 +2055,7 @@
"integrity": "sha512-+kLxJpaJzXybyDyFXYADyP1cznTO8HSuBpenGlnKOAkH4hyNINiywvXS/tGJhsrGGP/gM185RA3xpjY0Yg4erA==",
"devOptional": true,
"license": "MIT",
+ "peer": true,
"dependencies": {
"csstype": "^3.0.2"
}
@@ -2057,6 +2066,7 @@
"integrity": "sha512-qXRuZaOsAdXKFyOhRBg6Lqqc0yay13vN7KrIg4L7N4aaHN68ma9OK3NE1BoDFgFOTfM7zg+3/8+2n8rLUH3OKQ==",
"devOptional": true,
"license": "MIT",
+ "peer": true,
"peerDependencies": {
"@types/react": "^19.0.0"
}
@@ -2107,6 +2117,7 @@
"integrity": "sha512-TGf22kon8KW+DeKaUmOibKWktRY8b2NSAZNdtWh798COm1NWx8+xJ6iFBtk3IvLdv6+LGLJLRlyhrhEDZWargQ==",
"dev": true,
"license": "MIT",
+ "peer": true,
"dependencies": {
"@typescript-eslint/scope-manager": "8.45.0",
"@typescript-eslint/types": "8.45.0",
@@ -2624,6 +2635,7 @@
"integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
"dev": true,
"license": "MIT",
+ "peer": true,
"bin": {
"acorn": "bin/acorn"
},
@@ -3118,6 +3130,24 @@
"dev": true,
"license": "MIT"
},
+ "node_modules/cross-env": {
+ "version": "10.1.0",
+ "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-10.1.0.tgz",
+ "integrity": "sha512-GsYosgnACZTADcmEyJctkJIoqAhHjttw7RsFrVoJNXbsWWqaq6Ym+7kZjq6mS45O0jij6vtiReppKQEtqWy6Dw==",
+ "dev": true,
+ "license": "MIT",
+ "dependencies": {
+ "@epic-web/invariant": "^1.0.0",
+ "cross-spawn": "^7.0.6"
+ },
+ "bin": {
+ "cross-env": "dist/bin/cross-env.js",
+ "cross-env-shell": "dist/bin/cross-env-shell.js"
+ },
+ "engines": {
+ "node": ">=20"
+ }
+ },
"node_modules/cross-spawn": {
"version": "7.0.6",
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -3523,6 +3553,7 @@
"integrity": "sha512-hB4FIzXovouYzwzECDcUkJ4OcfOEkXTv2zRY6B9bkwjx/cprAq0uvm1nl7zvQ0/TsUk0zQiN4uPfJpB9m+rPMQ==",
"dev": true,
"license": "MIT",
+ "peer": true,
"dependencies": {
"@eslint-community/eslint-utils": "^4.8.0",
"@eslint-community/regexpp": "^4.12.1",
@@ -3697,6 +3728,7 @@
"integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
"dev": true,
"license": "MIT",
+ "peer": true,
"dependencies": {
"@rtsao/scc": "^1.1.0",
"array-includes": "^3.1.9",
@@ -5911,6 +5943,7 @@
"resolved": "https://registry.npmjs.org/react/-/react-19.1.0.tgz",
"integrity": "sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==",
"license": "MIT",
+ "peer": true,
"engines": {
"node": ">=0.10.0"
}
@@ -5920,6 +5953,7 @@
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.0.tgz",
"integrity": "sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g==",
"license": "MIT",
+ "peer": true,
"dependencies": {
"scheduler": "^0.26.0"
},
@@ -6720,6 +6754,7 @@
"integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
"dev": true,
"license": "MIT",
+ "peer": true,
"engines": {
"node": ">=12"
},
@@ -6869,6 +6904,7 @@
"integrity": "sha512-CWBzXQrc/qOkhidw1OzBTQuYRbfyxDXJMVJ1XNwUHGROVmuaeiEm3OslpZ1RV96d7SKKjZKrSJu3+t/xlw3R9A==",
"dev": true,
"license": "Apache-2.0",
+ "peer": true,
"bin": {
"tsc": "bin/tsc",
"tsserver": "bin/tsserver"
diff --git a/package.json b/package.json
index 5c27e10..f6b32e3 100644
--- a/package.json
+++ b/package.json
@@ -3,8 +3,8 @@
"version": "0.1.0",
"private": true,
"scripts": {
- "dev": "NEXT_TELEMETRY_DISABLED=1 next dev --turbopack",
- "build": "NEXT_TELEMETRY_DISABLED=1 next build --turbopack",
+ "dev": "cross-env NEXT_TELEMETRY_DISABLED=1 next dev --turbopack",
+ "build": "cross-env NEXT_TELEMETRY_DISABLED=1 next build --turbopack",
"start": "next start",
"lint": "eslint . --ext .ts,.tsx,.js,.jsx --fix",
"type-check": "tsc --noEmit",
@@ -32,6 +32,7 @@
"@types/node": "^20",
"@types/react": "^19",
"@types/react-dom": "^19",
+ "cross-env": "^10.1.0",
"eslint": "^9",
"eslint-config-next": "15.5.4",
"tailwindcss": "^4",
diff --git a/src/app/blog/[slug]/page.tsx b/src/app/blog/[slug]/page.tsx
new file mode 100644
index 0000000..5a5a320
--- /dev/null
+++ b/src/app/blog/[slug]/page.tsx
@@ -0,0 +1,245 @@
+import { Container } from "@/components/ui/container"
+import { Button } from "@/components/ui/button"
+import { CalendarIcon, PersonIcon, ClockIcon, ArrowLeftIcon, ArrowRightIcon } from "@radix-ui/react-icons"
+import type { Metadata } from "next"
+import { getAllBlogPosts, getBlogPostBySlug } from "@/lib/blog-data"
+import { notFound } from "next/navigation"
+import Link from "next/link"
+
+interface BlogPostPageProps {
+ params: Promise<{
+ slug: string
+ }>
+}
+
+// Generate static params for all blog posts
+export async function generateStaticParams() {
+ const posts = getAllBlogPosts()
+ return posts.map((post) => ({
+ slug: post.slug,
+ }))
+}
+
+// Generate metadata for each blog post
+export async function generateMetadata({ params }: BlogPostPageProps): Promise {
+ const { slug } = await params
+ const post = getBlogPostBySlug(slug)
+
+ if (!post) {
+ return {
+ title: "Post Not Found",
+ }
+ }
+
+ return {
+ title: post.title,
+ description: post.description,
+ openGraph: {
+ title: `${post.title} | CodeStorm Hub Blog`,
+ description: post.description,
+ type: "article",
+ publishedTime: post.date,
+ authors: [post.author],
+ },
+ }
+}
+
+export default async function BlogPostPage({ params }: BlogPostPageProps) {
+ const { slug } = await params
+ const post = getBlogPostBySlug(slug)
+
+ if (!post) {
+ notFound()
+ }
+
+ // Get all posts for navigation
+ const allPosts = getAllBlogPosts()
+ const currentIndex = allPosts.findIndex((p) => p.slug === slug)
+ const prevPost = currentIndex > 0 ? allPosts[currentIndex - 1] : null
+ const nextPost = currentIndex < allPosts.length - 1 ? allPosts[currentIndex + 1] : null
+
+ // Get related posts (same category, excluding current post)
+ const relatedPosts = allPosts
+ .filter((p) => p.category === post.category && p.slug !== post.slug)
+ .slice(0, 3)
+
+ return (
+