{"id":28754672,"url":"https://github.com/biyonik/uptimer","last_synced_at":"2026-04-09T12:02:29.558Z","repository":{"id":299203958,"uuid":"1002144555","full_name":"biyonik/uptimer","owner":"biyonik","description":null,"archived":false,"fork":false,"pushed_at":"2025-06-15T09:49:56.000Z","size":85,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-06-15T10:26:28.905Z","etag":null,"topics":["apollo-client","apollo-server","express","expressjs","fullstack-development","graphql","jwt","nextjs","nextjs15","nodejs","reactjs","real-time","tailwindcss","typescript","webapp","websocket"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/biyonik.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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}},"created_at":"2025-06-14T20:10:37.000Z","updated_at":"2025-06-15T09:50:00.000Z","dependencies_parsed_at":"2025-06-15T10:26:33.497Z","dependency_job_id":"bdf1f7c3-2250-42d4-b38f-d5544eb4565e","html_url":"https://github.com/biyonik/uptimer","commit_stats":null,"previous_names":["biyonik/uptimer"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/biyonik/uptimer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/biyonik%2Fuptimer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/biyonik%2Fuptimer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/biyonik%2Fuptimer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/biyonik%2Fuptimer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/biyonik","download_url":"https://codeload.github.com/biyonik/uptimer/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/biyonik%2Fuptimer/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260269456,"owners_count":22983649,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["apollo-client","apollo-server","express","expressjs","fullstack-development","graphql","jwt","nextjs","nextjs15","nodejs","reactjs","real-time","tailwindcss","typescript","webapp","websocket"],"created_at":"2025-06-17T01:11:17.256Z","updated_at":"2025-12-30T20:07:06.086Z","avatar_url":"https://github.com/biyonik.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🚀 Full-Stack GraphQL \u0026 Next.js Uygulaması\n\n\u003e GraphQL ve Next.js teknolojilerini kullanarak sıfırdan geliştirilmiş modern full-stack web uygulaması. Backend API'den frontend implementasyonuna kadar tüm geliştirme sürecini kapsayan kapsamlı bir proje.\n\n## 📋 İçindekiler\n\n- [Proje Hakkında](#-proje-hakkında)\n- [Teknoloji Stack](#-teknoloji-stack)\n- [Öğrenme Hedefleri](#-öğrenme-hedefleri)\n- [Kurulum](#-kurulum)\n- [Proje Yapısı](#-proje-yapısı)\n- [Geliştirme Süreci](#-geliştirme-süreci)\n- [Önemli Kavramlar](#-önemli-kavramlar)\n- [Deployment](#-deployment)\n- [Kaynaklar](#-kaynaklar)\n\n## 🎯 Proje Hakkında\n\nBu proje, **GraphQL** ve **Next.js** teknolojilerini kullanarak modern bir full-stack web uygulaması geliştirme sürecini kapsar. Kurs boyunca teorik bilgileri pratikle birleştirerek, gerçek dünya senaryolarına uygun bir uygulama inşa edilmektedir.\n\n### ✨ Teknik Özellikler\n\n- **🔧 GraphQL API**: Esnek ve güçlü veri sorgulama\n- **⚡ Next.js 15**: Modern React framework ile frontend geliştirme\n- **🔐 JWT Authentication**: Güvenli kullanıcı kimlik doğrulama\n- **📡 Real-time Subscriptions**: WebSocket ile gerçek zamanlı veri iletişimi\n- **🎨 TailwindCSS**: Utility-first CSS framework ile styling\n- **📱 Responsive Design**: Tüm cihazlarda uyumlu tasarım\n- **🔒 Authorization**: Yetkilendirme ve güvenlik kontrolleri\n- **⚡ Apollo Ecosystem**: Client ve server tarafında Apollo kullanımıına uygun bir uygulama inşa edeceğiz.\n\n### ✨ Temel Özellikler\n\n- **GraphQL API** ile esnek veri sorgulama\n- **Next.js 15** ile modern React uygulaması\n- **JWT** ile güvenli kimlik doğrulama\n- **WebSocket** ile gerçek zamanlı veri iletişimi\n- **TailwindCSS** ile responsive tasarım\n- **TypeScript** ile tip güvenliği\n\n## 🛠 Teknoloji Stack\n\n### Backend\n\u003cdiv align=\"center\"\u003e\n\n![Node.js](https://img.shields.io/badge/Node.js-43853D?style=for-the-badge\u0026logo=node.js\u0026logoColor=white)\n![Express.js](https://img.shields.io/badge/Express.js-404D59?style=for-the-badge\u0026logo=express)\n![GraphQL](https://img.shields.io/badge/GraphQL-E10098?style=for-the-badge\u0026logo=graphql\u0026logoColor=white)\n![Apollo Server](https://img.shields.io/badge/Apollo%20Server-311C87?style=for-the-badge\u0026logo=apollo-graphql\u0026logoColor=white)\n![JWT](https://img.shields.io/badge/JWT-black?style=for-the-badge\u0026logo=JSON%20web%20tokens)\n\n\u003c/div\u003e\n\n- **Node.js** - JavaScript runtime environment\n- **Express.js** - Minimal web framework\n- **Apollo Server** - GraphQL server implementation\n- **GraphQL** - Query language ve runtime\n- **JWT** - Token-based authentication\n- **WebSocket** - Real-time communication\n\n### Frontend\n\u003cdiv align=\"center\"\u003e\n\n![Next.js](https://img.shields.io/badge/Next.js-000000?style=for-the-badge\u0026logo=next.js\u0026logoColor=white)\n![React](https://img.shields.io/badge/React-20232A?style=for-the-badge\u0026logo=react\u0026logoColor=61DAFB)\n![TypeScript](https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge\u0026logo=typescript\u0026logoColor=white)\n![Apollo Client](https://img.shields.io/badge/Apollo%20Client-311C87?style=for-the-badge\u0026logo=apollo-graphql\u0026logoColor=white)\n![TailwindCSS](https://img.shields.io/badge/Tailwind_CSS-38B2AC?style=for-the-badge\u0026logo=tailwind-css\u0026logoColor=white)\n\n\u003c/div\u003e\n\n- **Next.js 15** - React framework with App Router\n- **Apollo Client** - GraphQL client library\n- **React** - UI component library\n- **TailwindCSS** - Utility-first CSS framework\n- **TypeScript** - Type-safe JavaScript\n\n### Tools \u0026 Deployment\n- **Git** - Version control\n- **Vercel/Netlify** - Frontend deployment\n- **Heroku/Railway** - Backend deployment\n\n## 🎓 Öğrenme Hedefleri\n\n### 📚 Backend Geliştirme\n- [ ] GraphQL şema tasarımı ve resolver yazma\n- [ ] Apollo Server kurulumu ve yapılandırması\n- [ ] Queries, Mutations ve Subscriptions implementasyonu\n- [ ] JWT ile authentication/authorization\n- [ ] WebSocket ile real-time özellikler\n- [ ] Error handling ve validation\n\n### 🎨 Frontend Geliştirme\n- [ ] Next.js 14 ve App Router kullanımı\n- [ ] Apollo Client entegrasyonu\n- [ ] GraphQL queries ve mutations\n- [ ] Real-time subscriptions\n- [ ] TailwindCSS ile component styling\n- [ ] Responsive design implementasyonu\n\n### 🔗 Full-Stack Entegrasyon\n- [ ] Client-server iletişimi\n- [ ] State management\n- [ ] Caching strategies\n- [ ] Performance optimization\n- [ ] Production deployment\n\n## 🚀 Kurulum\n\n### Gereksinimler\n- Node.js (v18 veya üzeri)\n- npm veya yarn\n- Git\n\n### Backend Kurulumu\n```bash\n# Backend klasörü oluştur\nmkdir server\ncd server\n\n# Package.json oluştur\nnpm init -y\n\n# Gerekli paketleri yükle\nnpm install apollo-server-express express graphql jsonwebtoken bcryptjs\nnpm install -D nodemon @types/node typescript\n```\n\n### Frontend Kurulumu\n```bash\n# Next.js 15 projesi oluştur\nnpx create-next-app@latest client --typescript --tailwind --app\n\n# Apollo Client yükle\ncd client\nnpm install @apollo/client graphql\n```\n\n## 📁 Proje Yapısı\n\n```\nproject-root/\n├── server/                 # GraphQL Backend\n│   ├── src/\n│   │   ├── schema/        # GraphQL şemaları\n│   │   ├── resolvers/     # GraphQL resolvers\n│   │   ├── models/        # Veri modelleri\n│   │   ├── middleware/    # Authentication middleware\n│   │   └── server.js      # Ana server dosyası\n│   ├── package.json\n│   └── .env\n│\n├── client/                # Next.js Frontend\n│   ├── src/\n│   │   ├── app/           # App Router (Next.js 14)\n│   │   ├── components/    # React bileşenleri\n│   │   ├── lib/           # Apollo Client konfigürasyonu\n│   │   └── types/         # TypeScript type definitions\n│   ├── package.json\n│   └── next.config.js\n│\n└── README.md\n```\n\n## 🔄 Geliştirme Süreci\n\n### Aşama 1: Backend Geliştirme\n1. **GraphQL Schema Tasarımı**\n    - Type definitions\n    - Query ve Mutation şemaları\n    - Subscription şemaları\n\n2. **Resolver Implementasyonu**\n    - Query resolvers\n    - Mutation resolvers\n    - Subscription resolvers\n\n3. **Authentication Sistemi**\n    - JWT token üretimi\n    - Middleware yazımı\n    - Authorization kontrolü\n\n### Aşama 2: Frontend Geliştirme\n1. **Next.js Kurulumu**\n    - App Router yapılandırması\n    - TailwindCSS entegrasyonu\n    - TypeScript konfigürasyonu\n\n2. **Apollo Client Entegrasyonu**\n    - Client konfigürasyonu\n    - Query ve Mutation hooks\n    - Cache yönetimi\n\n3. **UI Geliştirme**\n    - Component tasarımı\n    - Responsive layout\n    - Form handling\n\n### Aşama 3: Full-Stack Entegrasyon\n1. **Real-time Özellikler**\n    - WebSocket bağlantısı\n    - Subscription handling\n    - Live updates\n\n2. **State Management**\n    - Apollo Cache\n    - Local state yönetimi\n    - Error handling\n\n## 💡 Önemli Kavramlar\n\n### GraphQL Temelleri\n- **Schema**: Veri yapısının tanımlandığı yer\n- **Query**: Veri okuma işlemleri\n- **Mutation**: Veri değiştirme işlemleri\n- **Subscription**: Real-time veri akışı\n- **Resolver**: GraphQL sorgularını işleyen fonksiyonlar\n\n### Next.js Kavramları\n- **App Router**: Next.js 15'in yeni routing sistemi\n- **Server Components**: Sunucu tarafında render edilen bileşenler\n- **Client Components**: Tarayıcıda render edilen bileşenler\n- **Dynamic Routes**: Dinamik sayfa yönlendirmeleri\n\n## 🚀 Deployment\n\n### Backend Deployment\n```bash\n# Production build\nnpm run build\n\n# Environment variables\nNODE_ENV=production\nJWT_SECRET=your-secret-key\nDATABASE_URL=your-database-url\n```\n\n### Frontend Deployment\n```bash\n# Next.js 15 build\nnpm run build\n\n# Environment variables\nNEXT_PUBLIC_GRAPHQL_URL=your-graphql-endpoint\n```\n\n## 📚 Kaynaklar\n\n### Resmi Dokümantasyonlar\n- [GraphQL Resmi Dokümantasyon](https://graphql.org/learn/)\n- [Apollo Server Dokümantasyon](https://www.apollographql.com/docs/apollo-server/)\n- [Next.js 15 Dokümantasyon](https://nextjs.org/docs)\n- [Apollo Client Dokümantasyon](https://www.apollographql.com/docs/react/)\n\n### Faydalı Linkler\n- [GraphQL Playground](https://github.com/graphql/graphql-playground)\n- [TailwindCSS Dokümantasyon](https://tailwindcss.com/docs)\n- [TypeScript Handbook](https://www.typescriptlang.org/docs/)\n\n---\n\n*Bu README dosyası proje gelişimi sırasında güncellenmektedir.*","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbiyonik%2Fuptimer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbiyonik%2Fuptimer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbiyonik%2Fuptimer/lists"}