{"id":29225690,"url":"https://github.com/halil-yesilyurt/code-and-tech","last_synced_at":"2026-04-12T12:41:33.439Z","repository":{"id":302274320,"uuid":"1009283068","full_name":"halil-yesilyurt/code-and-tech","owner":"halil-yesilyurt","description":"Code \u0026 Tech is a blazing-fast, SEO-optimized tech blog built with Next.js and headless WordPress","archived":false,"fork":false,"pushed_at":"2025-12-07T22:33:53.000Z","size":2511,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-12-09T08:33:05.589Z","etag":null,"topics":["frontend","headless-wordpress","nextjs","react","seo","tailwindcss","tech-blog","wordpress-rest-api"],"latest_commit_sha":null,"homepage":"https://code-and-tech.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/halil-yesilyurt.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-06-26T22:00:27.000Z","updated_at":"2025-12-07T22:33:57.000Z","dependencies_parsed_at":"2026-01-06T13:10:33.086Z","dependency_job_id":null,"html_url":"https://github.com/halil-yesilyurt/code-and-tech","commit_stats":null,"previous_names":["halil-yesilyurt/code-and-tech"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/halil-yesilyurt/code-and-tech","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/halil-yesilyurt%2Fcode-and-tech","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/halil-yesilyurt%2Fcode-and-tech/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/halil-yesilyurt%2Fcode-and-tech/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/halil-yesilyurt%2Fcode-and-tech/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/halil-yesilyurt","download_url":"https://codeload.github.com/halil-yesilyurt/code-and-tech/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/halil-yesilyurt%2Fcode-and-tech/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31715492,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-12T06:22:27.080Z","status":"ssl_error","status_checked_at":"2026-04-12T06:21:52.710Z","response_time":58,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["frontend","headless-wordpress","nextjs","react","seo","tailwindcss","tech-blog","wordpress-rest-api"],"created_at":"2025-07-03T07:37:45.128Z","updated_at":"2026-04-12T12:41:33.432Z","avatar_url":"https://github.com/halil-yesilyurt.png","language":"TypeScript","readme":"# Code \u0026 Tech\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)\n[![Last Commit](https://img.shields.io/github/last-commit/halil-yesilyurt/code-and-tech.svg)](https://github.com/halil-yesilyurt/code-and-tech/commits/main)\n[![GitHub stars](https://img.shields.io/github/stars/halil-yesilyurt/code-and-tech.svg?style=social)](https://github.com/halil-yesilyurt/code-and-tech/stargazers)\n[![Code Size](https://img.shields.io/github/languages/code-size/halil-yesilyurt/code-and-tech.svg)](https://github.com/halil-yesilyurt/code-and-tech)\n[![Top Language](https://img.shields.io/github/languages/top/halil-yesilyurt/code-and-tech.svg)](https://github.com/halil-yesilyurt/code-and-tech)\n\nA modern, high-performance tech blog built with Next.js 16 and headless WordPress. Designed for developers and tech enthusiasts, it offers fast performance, clean UI, and fully decoupled content management.\n\n## 🚀 Live Demo\n\n| Layer             | URL                                                                                                        |\n| ----------------- | ---------------------------------------------------------------------------------------------------------- |\n| **Frontend**      | [https://code-and-tech.halilyesilyurt.com](https://code-and-tech.halilyesilyurt.com)                       |\n| **WordPress API** | [https://code-and-tech-wp.halilyesilyurt.com/wp-json](https://code-and-tech-wp.halilyesilyurt.com/wp-json) |\n\n## 📖 Project Overview\n\n**Code \u0026 Tech** combines:\n\n- A **WordPress backend** for content management and editorial workflow\n- A **Next.js frontend** for modern, fast UI with optimal performance\n- Full **API-driven architecture** for complete decoupling\n\nYou manage posts through WordPress, and every published article automatically appears on the frontend with optimized performance, SEO, and beautiful presentation.\n\n## 🖼️ Screenshots\n\n**Homepage**\n\n\u003cdiv align=\"center\"\u003e\n\n![Homepage](./public/main-page.webp)\n\n\u003c/div\u003e\n\n**Blog Listing Page**\n\n\u003cdiv align=\"center\"\u003e\n\n![Blog Listing Page](./public/blog.webp)\n\n\u003c/div\u003e\n\n**Single Post Page**\n\n\u003cdiv align=\"center\"\u003e\n\n![Single Post Page](./public/post.webp)\n\n\u003c/div\u003e\n\n**Interviews Section**\n\n\u003cdiv align=\"center\"\u003e\n\n![Interviews Section](./public/interviews.webp)\n\n\u003c/div\u003e\n\n**Category Page**\n\n\u003cdiv align=\"center\"\u003e\n\n![Category Page](./public/category.webp)\n\n\u003c/div\u003e\n\n## ✨ Key Features\n\n### Core Features\n\n- ⚡ **Headless Architecture:** Fully decoupled WordPress backend and Next.js frontend\n- 🚀 **SSG \u0026 SSR:** Combines Static Site Generation for pages and Server-Side Rendering for dynamic content\n- 📈 **SEO Optimized:** Automatic meta tags, Open Graph, Twitter cards, sitemaps, RSS feed, and structured data\n- 🎨 **Responsive Design:** Modern UI built with Tailwind CSS 4, fully mobile-friendly\n- ⚛️ **Production-Ready:** Optimized for Vercel deployment with edge caching\n\n### Content Management\n\n- Built on **standard WordPress** features:\n  - Posts\n  - Categories\n  - Tags\n- ✅ **No ACF required**\n- ✅ **No custom post types needed**\n- **Interviews** → simply a category named \"Interviews\"\n- **Advanced Search:** Full-text search with autocomplete suggestions\n- **Category \u0026 Tag Filtering:** Easy browsing with deep linking\n\n### User Experience\n\n- 🎯 **Hero Slider:** Dynamic homepage carousel showcasing featured articles\n- 📁 **Projects Showcase:** Curated portfolio section with dedicated API, separate from WordPress\n- 🎤 **Interviews Section:** Dedicated page filtering posts from \"Interviews\" category\n- 👤 **Author Pages:** Author profiles with bio and post listings\n- 📧 **Contact Form:** Modern, validated form with email integration via Resend\n- 📬 **Newsletter Signup:** Integrated newsletter form for audience growth\n- 🔗 **Social Sharing:** Share articles on Twitter, LinkedIn, and Facebook\n\n### Technical Features\n\n- 🔒 **Rate Limiting:** Built-in API rate limiting for spam protection\n- 🛡️ **Error Boundaries:** Graceful error handling with React Error Boundaries\n- ⏳ **Loading States:** Skeleton screens and loading indicators\n- 🖼️ **Optimized Images:** Smart image loading with fallback states and lazy loading\n- 📊 **Structured Data:** JSON-LD for articles and organization\n- ✨ **Modern UI/UX:** Smooth animations, gradients, and clean design\n\n## 🛠️ Tech Stack\n\n### Frontend\n\n- **Framework:** Next.js 16 (App Router + Turbopack), React 19\n- **Styling:** Tailwind CSS 4, custom CSS modules\n- **Fonts:** Geist Sans, Montserrat, Inter\n- **Data Fetching:** Native `fetch` API with ISR/SSR\n- **State Management:** React hooks, local state\n- **Forms \u0026 Validation:** React, custom validation, server-side validation\n- **Email Service:** Resend API\n- **Deployment:** Vercel\n\n### Backend\n\n- **CMS:** Headless WordPress (self-hosted VPS or any hosting provider)\n- **API:** WordPress REST API\n\n#### Optional Plugins\n\n- **JWT Authentication for WP REST API** – only if you need authenticated endpoints\n- **WPS Hide Login** – for custom WordPress login URL security\n\n\u003e ✨ **Note:** Project runs perfectly with vanilla WordPress—no plugins required for basic functionality.\n\n## 🧱 Project Structure\n\n```bash\ncode-and-tech/\n  ├── build.js         # Custom build script (wraps next build, disables telemetry)\n  ├── docs/            # Documentation (PRD, tech stack, setup guides, etc.)\n  ├── public/          # Static assets (images, icons, screenshots, etc.)\n  ├── src/\n  │   ├── app/         # Next.js app directory (pages, components, API routes)\n  │   │   ├── api/     # Next.js API routes (projects, search suggestions)\n  │   │   ├── blog/    # Blog pages and components\n  │   │   ├── components/  # Reusable React components\n  │   │   ├── projects/    # Projects showcase\n  │   │   ├── interviews/  # Interviews section (category-based)\n  │   │   └── ...      # Other pages (contact, categories, search, etc.)\n  │   └── lib/         # Utilities (WordPress API client, rate limiting)\n  ├── package.json\n  ├── tsconfig.json\n  └── next.config.ts\n```\n\n## 🧠 Pages Overview\n\n| Route              | Purpose                                                |\n| ------------------ | ------------------------------------------------------ |\n| `/`                | Homepage: Hero slider, featured posts, latest articles |\n| `/blog`            | All blog posts with filters and pagination             |\n| `/blog/[slug]`     | Individual blog post with reading time, share buttons  |\n| `/projects`        | Portfolio/projects showcase with tech stack tags       |\n| `/interviews`      | Dedicated interviews section (category-based)          |\n| `/categories`      | List of post categories with post counts               |\n| `/category/[slug]` | Posts filtered by category                             |\n| `/search`          | Full-text search with autocomplete and filters         |\n| `/contact`         | Contact form with email integration and social links   |\n| `/[slug]`          | Dynamic WordPress pages (About, etc.)                  |\n\n## 📦 Prerequisites\n\n- **Node.js** v18.x or higher\n- **npm**, **yarn**, or **pnpm**\n- **WordPress** (self-hosted, VPS, or managed hosting—any provider works)\n- **Resend Account** (for contact form emails)\n\n## ⚡ Installation \u0026 Setup\n\n### 1. Backend (WordPress) Setup\n\n1. Set up your WordPress site (locally, VPS, managed hosting—your choice).\n2. Set Permalinks to **\"Post name\"** in WordPress Settings → Permalinks for clean URLs.\n3. **(Optional)** Install plugins for enhanced functionality:\n   - **JWT Authentication for WP REST API** – only if you need authenticated API calls\n   - **WPS Hide Login** – only if you want to hide `/wp-admin`\n4. Create your content using standard posts, categories, and tags:\n   - For interviews, create an **\"Interviews\"** category and assign posts to it\n   - No custom post types or ACF fields are required\n\n### 2. Frontend Setup\n\n1. **Clone the repository:**\n\n   ```bash\n   git clone https://github.com/halil-yesilyurt/code-and-tech\n   cd code-and-tech\n   ```\n\n2. **Install dependencies:**\n\n   ```bash\n   npm install\n   # or\n   yarn install\n   # or\n   pnpm install\n   ```\n\n3. **Configure environment variables:**\n   ```bash\n   cp env.example .env.local\n   # Edit .env.local with your WordPress API endpoint and other secrets\n   ```\n\n---\n\n## 🔑 Environment Variables\n\nCreate a `.env.local` file in the root directory:\n\n```env\n# WordPress REST API Endpoints (required)\nWORDPRESS_API_URL=\"https://code-and-tech-wp.halilyesilyurt.com/wp-json\"\nNEXT_PUBLIC_WORDPRESS_API_URL=\"https://code-and-tech-wp.halilyesilyurt.com/wp-json\"\n\n# Resend email service (required for contact form)\nRESEND_API_KEY=\"re_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx\"\nRESEND_FROM_EMAIL=\"noreply@code-and-tech.halilyesilyurt.com\"\n\n# Contact email destination (required)\nCONTACT_EMAIL=\"your-email@example.com\"\n\n# WordPress authentication (optional - only needed for authenticated API calls)\nWORDPRESS_JWT_SECRET=\"your-jwt-secret\"\nWORDPRESS_USERNAME=\"your-wp-username\"\nWORDPRESS_PASSWORD=\"your-wp-application-password\"\n\n# Google verification / analytics (optional)\nNEXT_PUBLIC_GOOGLE_SITE_VERIFICATION=\"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx\"\nNEXT_PUBLIC_GA_ID=\"G-XXXXXXXXXX\"\n```\n\n### Environment Variables Explained\n\n**Required:**\n\n- `WORDPRESS_API_URL` / `NEXT_PUBLIC_WORDPRESS_API_URL`: Your WordPress REST API base URL\n- `RESEND_API_KEY`, `RESEND_FROM_EMAIL`: Resend email service credentials\n- `CONTACT_EMAIL`: Destination address for contact form submissions\n\n**Optional:**\n\n- `WORDPRESS_JWT_SECRET`, `WORDPRESS_USERNAME`, `WORDPRESS_PASSWORD`: Only for JWT-protected endpoints\n- `NEXT_PUBLIC_GOOGLE_SITE_VERIFICATION`: Google Search Console verification\n- `NEXT_PUBLIC_GA_ID`: Google Analytics / GA4 measurement ID\n\n---\n\n## 🏃 Running the Application\n\n**Development:**\n\n```bash\nnpm run dev\n# Starts the dev server at http://localhost:3000\n```\n\n**Build:**\n\n```bash\nnpm run build\n# Runs a custom build.js script (wraps 'next build', disables telemetry)\n```\n\n**Start:**\n\n```bash\nnpm run start\n# Starts the production server\n```\n\n\u003e **Note:** WordPress must be running independently and accessible via the configured API URL.\n\n## 🚀 Deployment\n\n### Vercel (Recommended)\n\n1. Push your repository to GitHub\n2. Import the project into [Vercel](https://vercel.com)\n3. Set environment variables in the Vercel dashboard:\n   - Add all variables from your `.env.local` file\n   - Make sure to use your actual WordPress API URL\n4. Deploy!\n\n**Benefits:**\n\n- ✅ Incremental Static Regeneration (ISR)\n- ✅ Automatic builds on push\n- ✅ Fast edge caching\n- ✅ Zero-config deployment\n\nThe project is designed and optimized for Vercel. For other platforms (Netlify, Railway, etc.), custom configuration may be required.\n\n## 🔄 Migration Notes\n\nIf you're upgrading from an earlier version of Code \u0026 Tech:\n\n✔ **Update `.env.local`** with your own WordPress URLs  \n✔ **Plugins are now optional** – blog works with vanilla WordPress  \n✔ **API structure unchanged** – only base URL needs updating\n\n\u003e ✅ No breaking API changes.\n\n## 💡 Suggestions for Customization\n\n- **Projects API:** Replace with your own external data source or connect to a portfolio API\n- **Custom Post Types:** Add via ACF or CPT UI plugin if you need more content types\n- **JWT Protection:** Add JWT authentication for admin-only features or protected content\n- **Styling:** Personalize colors, fonts, and spacing using Tailwind configuration\n- **Analytics:** Add custom tracking, heatmaps, or conversion tools\n- **Comments:** Integrate Disqus, Commento, or custom comment system\n\n## 🧑‍💻 Contributing\n\nContributions are welcome! To contribute:\n\n1. Fork the repository\n2. Create a feature branch (`git checkout -b feature/your-feature`)\n3. Make your changes and commit (`git commit -m 'Add feature'`)\n4. Push to your fork (`git push origin feature/your-feature`)\n5. Open a Pull Request on GitHub\n\nFeel free to open PRs, report issues, or suggest features!\n\n## 📄 License\n\nThis project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.\n\nMIT License — do whatever you want responsibly 🎯\n\n## 🙏 Acknowledgments\n\n- **Next.js Team** for the incredible React framework\n- **WordPress Community** for the powerful CMS\n- **Tailwind CSS** for the utility-first styling framework\n- **Vercel** for seamless hosting and deployment\n- **Resend** for reliable email delivery\n- All open-source contributors who make projects like this possible\n\n---\n\n**Built with ❤️ by [Halil Yesilyurt](https://halilyesilyurt.com)**\n\n**Happy Coding! 🚀**\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhalil-yesilyurt%2Fcode-and-tech","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhalil-yesilyurt%2Fcode-and-tech","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhalil-yesilyurt%2Fcode-and-tech/lists"}