Welcome to PokéSwipe, where Pokémon trainers meet their perfect companions! PokéSwipe combines the excitement of Pokémon encounters with the addictive swiping mechanic. Explore the Pokémon world, swipe through creatures, and build your dream team with ease.
PokéSwipe aims to provide users with an engaging and intuitive platform to discover and collect their favorite Pokémon. By integrating elements of responsive design, state management, user interaction, and REST API usage, PokéSwipe offers a seamless and immersive experience for Pokémon enthusiasts and web developers alike.
- Responsive Design: PokéSwipe adapts seamlessly to various screen sizes, ensuring a delightful experience on any device.
- State Management: Efficiently manage Pokémon data and user preferences within the application's core for a smooth user experience.
- User Interaction: Engage users with intuitive "Like" and "Dislike" interactions, empowering them to curate their Pokémon collection.
- REST API Usage: Fetch captivating Pokémon data from the PokéAPI, enriching the user experience with dynamic content.
- Clone the repository:
git clone https://github.com/RutikKulkarni/PokeSwipe-Web.git
- Install dependencies:
npm install
- Start the development server:
npm start
- Explore and enjoy the world of PokéSwipe!
src/components
: Contains reusable components such as card, and header.src/pages
: The main pages of the application, including the home page, swipe page, and liked Pokémon page.src/assets
: Stores images, logos, and other static assets used in the application.src/utils
: Contains utility functions and helper modules used throughout the project.
-
Welcome to PokéSwipe: Start your PokéSwipe journey with the engaging welcome screen. Click the "Start" button to begin the Pokémon encounters.
-
Gotta Swipe 'Em All: Swipe through Pokémon cards fetched from the PokéAPI. Each card displays Pokémon image, name, abilities, and types. Like or dislike Pokémon using the intuitive buttons provided.
-
Like or Dislike: Make definitive choices for each Pokémon by selecting "Like" or "Dislike." Your preferences are tracked within the app's state for a personalized experience.
-
Your Pokémon Dream Team Awaits: View all your liked Pokémon on the dedicated page. Cherish your curated collection and explore the wonderful world of Pokémon companionship.
- Dark Mode: Toggle between light and dark themes for a customized PokéSwipe experience.
- Deployment: Deploy PokéSwipe to a public URL using platforms like Vercel, Netlify, or GitHub Pages for widespread access.
- Documentation: Maintain clear and organized code documentation to facilitate understanding and collaboration.
- Out-of-the-Box Thinking: Introduce unique features, design elements, or creative twists to make PokéSwipe stand out from the crowd.
Experience PokéSwipe live: PokéSwipe Live Demo
PokéSwipe integrates with the following APIs to provide dynamic content:
- PokéAPI: Used to fetch detailed information about various Pokémon including images, abilities, and types.
- API URL:
https://pokeapi.co/api/v2/
- Documentation: PokéAPI Documentation
- API URL:
Embrace the Pokémon adventure with PokéSwipe and catch 'em all in style! Happy swiping! 🌟🔥