Modern ve kullanıcı dostu bir Rick and Morty karakter veritabanı uygulaması. Next.js 15, TypeScript, React Query ve Zustand kullanılarak geliştirilmiştir.
A modern and user-friendly Rick and Morty character database application. Built with Next.js 15, TypeScript, React Query, and Zustand.
- 🔍 Gelişmiş Filtreleme: Status ve gender filtreleri ile karakterleri arayın
- 🔗 URL Query Yönetimi: Filtreler URL parametrelerinde saklanır, paylaşılabilir linkler
- 📄 Sayfalama: Kolay navigasyon ile tüm karakterleri keşfedin
- ❤️ Favori Sistemi: Beğendiğiniz karakterleri favorilere ekleyin
- 🎨 Modern UI: shadcn/ui bileşenleri ile şık ve responsive tasarım
- ⚡ SSR Desteği: Server-Side Rendering ile hızlı yükleme
- 🔄 React Query: Optimize edilmiş API çağrıları ve cache yönetimi
- 📱 Responsive: Tüm cihazlarda mükemmel görünüm
- Framework: Next.js 15 (App Router)
- Dil: TypeScript
- Stil: Tailwind CSS v4
- UI Bileşenleri: shadcn/ui
- State Management: Zustand
- Data Fetching: React Query (TanStack Query)
- URL Management: nuqs
- Linting: ESLint + Prettier
- Git Hooks: Husky + lint-staged
- Repository'yi klonlayın:
git clone https://github.com/KULLANICI_ADI/rickandmorty.git
cd rickandmorty- Bağımlılıkları yükleyin:
npm install- Development server'ı başlatın:
npm run dev- Tarayıcınızda http://localhost:3000 adresini açın
npm run build
npm startnpm run dev- Development server başlatırnpm run build- Production build oluştururnpm run start- Production server başlatırnpm run lint- ESLint ile kod kontrolü yaparnpm run lint:fix- ESLint hatalarını otomatik düzeltirnpm run format- Prettier ile kod formatlarnpm run format:check- Format kontrolü yapar
rickandmorty/
├── src/
│ ├── app/ # Next.js App Router sayfaları
│ ├── api/ # API çağrıları
│ ├── components/ # React bileşenleri
│ │ ├── characters/ # Karakter bileşenleri
│ │ ├── layout/ # Layout bileşenleri
│ │ └── ui/ # shadcn/ui bileşenleri
│ ├── hooks/ # Custom React hooks
│ ├── providers/ # Context providers
│ ├── store/ # Zustand stores
│ ├── types/ # TypeScript type tanımları
│ └── lib/ # Utility fonksiyonlar
├── .husky/ # Git hooks
├── .lintstagedrc.json # Lint-staged yapılandırması
└── .prettierrc # Prettier yapılandırması
- Status filtresi: Alive, Dead, Unknown
- Gender filtresi: Male, Female, Genderless, Unknown
- Filtreler URL query parametreleri ile yönetilir
- Filtreler birleştirilebilir (örn: Alive + Male)
- Karakter kartlarındaki kalp ikonuna tıklayarak favori ekleyin
- Header'daki "Favoriler" butonuna tıklayarak favori listesini görüntüleyin
- Favorilerden tek tek veya toplu olarak silme
- Sayfa değişikliklerinde sunucu tarafında veri çekme
nuqsileshallow: falseayarı ile SSR tetikleme- URL parametreleri değiştiğinde otomatik yenileme
Proje, TypeScript ve React için özelleştirilmiş ESLint kuralları kullanır:
@typescript-eslint/no-explicit-any: error-anykullanımı yasak- React Hooks kuralları aktif
- Prettier ile entegre
- Tailwind CSS class sıralaması için plugin
- Otomatik formatlama
- Pre-commit hook ile otomatik formatlama
- 🔍 Advanced Filtering: Search characters with status and gender filters
- 🔗 URL Query Management: Filters are stored in URL parameters, shareable links
- 📄 Pagination: Easy navigation to explore all characters
- ❤️ Favorite System: Add your favorite characters to favorites
- 🎨 Modern UI: Elegant and responsive design with shadcn/ui components
- ⚡ SSR Support: Fast loading with Server-Side Rendering
- 🔄 React Query: Optimized API calls and cache management
- 📱 Responsive: Perfect appearance on all devices
- Framework: Next.js 15 (App Router)
- Language: TypeScript
- Styling: Tailwind CSS v4
- UI Components: shadcn/ui
- State Management: Zustand
- Data Fetching: React Query (TanStack Query)
- URL Management: nuqs
- Linting: ESLint + Prettier
- Git Hooks: Husky + lint-staged
- Clone the repository:
git clone https://github.com/USERNAME/rickandmorty.git
cd rickandmorty- Install dependencies:
npm install- Start the development server:
npm run dev- Open http://localhost:3000 in your browser
npm run build
npm startnpm run dev- Start development servernpm run build- Create production buildnpm run start- Start production servernpm run lint- Run ESLint code checknpm run lint:fix- Auto-fix ESLint errorsnpm run format- Format code with Prettiernpm run format:check- Check code formatting
rickandmorty/
├── src/
│ ├── app/ # Next.js App Router pages
│ ├── api/ # API calls
│ ├── components/ # React components
│ │ ├── characters/ # Character components
│ │ ├── layout/ # Layout components
│ │ └── ui/ # shadcn/ui components
│ ├── hooks/ # Custom React hooks
│ ├── providers/ # Context providers
│ ├── store/ # Zustand stores
│ ├── types/ # TypeScript type definitions
│ └── lib/ # Utility functions
├── .husky/ # Git hooks
├── .lintstagedrc.json # Lint-staged configuration
└── .prettierrc # Prettier configuration
- Status filter: Alive, Dead, Unknown
- Gender filter: Male, Female, Genderless, Unknown
- Filters are managed via URL query parameters
- Filters can be combined (e.g., Alive + Male)
- Click the heart icon on character cards to add favorites
- Click the "Favorites" button in the header to view favorite list
- Remove favorites individually or clear all at once
- Server-side data fetching on page changes
- SSR triggering with
nuqsusingshallow: falsesetting - Automatic refresh when URL parameters change
The project uses customized ESLint rules for TypeScript and React:
@typescript-eslint/no-explicit-any: error-anyusage is forbidden- React Hooks rules are active
- Integrated with Prettier
- Plugin for Tailwind CSS class sorting
- Automatic formatting
- Automatic formatting with pre-commit hook
This project is licensed under the MIT License.
- Rick and Morty API - For character data
- Next.js - Framework
- shadcn/ui - UI components
- TanStack Query - Data fetching
Developed by: [Your GitHub Username]
⭐ If you liked this project, don't forget to give it a star!