https://github.com/markteekman/react-graphql-pokemon
Small test with GrapQL using React, Apollo and Vite.
https://github.com/markteekman/react-graphql-pokemon
apollo apollo-client apollographql css grahpql react typescript vite
Last synced: 3 months ago
JSON representation
Small test with GrapQL using React, Apollo and Vite.
- Host: GitHub
- URL: https://github.com/markteekman/react-graphql-pokemon
- Owner: markteekman
- Created: 2025-07-09T09:17:14.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-09-20T17:20:35.000Z (10 months ago)
- Last Synced: 2026-03-30T21:00:04.333Z (4 months ago)
- Topics: apollo, apollo-client, apollographql, css, grahpql, react, typescript, vite
- Language: CSS
- Homepage: https://react-graphql-pokemon-starter.netlify.app/
- Size: 50.8 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React GraphQL Pokemon Starter
A Pokemon starter selection app built with React, TypeScript, and GraphQL. Choose your favorite starter Pokemon with interactive 3D card effects!
## ✨ Features
- **GraphQL Integration**: Fetches Pokemon data from the PokéAPI GraphQL endpoint
- **3D Card Effects**: Interactive parallax tilt and glare effects using `react-parallax-tilt`
- **Starter Pokemon**: Display Bulbasaur, Charmander, Squirtle, and Pikachu
- **Modern CSS**: Utilizes logical properties and custom glow effects for each Pokemon
- **TypeScript**: Full type safety throughout the application
## 🛠️ Tech Stack
- **React 19** with TypeScript
- **Apollo Client** for GraphQL data fetching
- **Vite** for fast development and building
- **React Parallax Tilt** for 3D card effects
## 🚀 Getting Started
1. Install dependencies:
```bash
npm install
```
2. Start the development server:
```bash
npm run dev
```
3. Open your browser and visit the local development URL
## 📝 Available Scripts
- `npm run dev` - Start development server
- `npm run build` - Build for production
- `npm run preview` - Preview production build
- `npm run lint` - Run ESLint
## 🎮 Usage
Simply hover over any Pokemon card to see the 3D tilt effect and colored glow. Each starter has its own unique color theme matching their Pokemon type!