Bloqedex is a modern, full-stack Pokédex application built as a solution to the Bloqit Frontend Engineering Challenge. The project demonstrates comprehensive full-stack development skills with a focus on clean architecture, user experience, and technical excellence.
After speaking with Pokémon Trainers, we identified the need for a centralized platform to help them on their journey to become Pokémon Masters. The application addresses the gap in tracking progress and managing Pokédex collections with limited internet connectivity.
- Complete Pokédex Management - View all Pokémon with names, pictures, and caught status
- Personal Collection - Track caught Pokémon with detailed statistics and notes
- Offline-First Capability - Access your Pokédex with limited or no internet connectivity
- Smart Synchronization - Seamless online/offline state management
- Sharing System - Share individual Pokémon or entire collections with fellow trainers
- Progress Tracking - Quick overview of Pokédex completion and statistics
- Smart Filtering & Sorting - Filter by name, height, types, stats, and timestamp
- Bulk Operations - Catch or release multiple Pokémon at once
- Personal Notes - Attach custom notes to each caught Pokémon
- Multi-View Modes - Responsive grid and analytical table views
- Data Export - Export filtered views, selected pokemon or your Pokédex to CSV format
- Authentication Flexibility - Support for both online and offline accounts
- Responsive Design - Optimized for desktop, tablet, and mobile devices
- Smart Caching - Intelligent data loading with PokéAPI integration
- Real-time Updates - Live progress tracking and instant data synchronization
- Offline-First Architecture - Full functionality without internet connection
- Type-Safe Development - Complete TypeScript implementation with strict typing
- Performance Optimized - Smart pagination, lazy loading, and bundle optimization
Frontend Stack
- React 19 - Latest React with concurrent features
- TypeScript 5.8 - Strict type checking and modern JS features
- Vite 7 - Lightning fast build tool and dev server
- Tailwind CSS 4 - Utility-first styling with custom design system
- Zustand - Lightweight state management with persistence
- IndexedDB - Browser-native offline storage
Backend Stack
- .NET 8 - Modern, high-performance backend
- Entity Framework Core - Data access with SQLite
- JWT Authentication - Secure token-based auth
- Clean Architecture - Maintainable, testable codebase
- PokéAPI Integration - Smart caching and rate limiting
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│ Frontend │ │ Backend │ │ External │
│ (React 19) │◄──►│ (.NET 8) │◄──►│ (PokéAPI) │
│ │ │ │ │ │
│ • Offline First │ │ • Clean Arch │ │ • Pokémon Data │
│ • IndexedDB │ │ • Smart Cache │ │ • Rate Limited │
│ • Type Safety │ │ • JWT Auth │ │ • 1000+ Pokémon │
│ • Zustand │ │ • EF Core │ │ • REST API │
└─────────────────┘ └─────────────────┘ └─────────────────┘
bloqedex/
├── frontend/ # React TypeScript Frontend
│ ├── components/ # Shared UI components
│ ├── features/ # Feature-based modules
│ │ ├── auth/ # Authentication & user management
│ │ │ ├── components/ # Auth-specific components
│ │ │ ├── pages/ # Login, Register pages
│ │ │ └── stores/ # Authentication state management
│ │ ├── pokemon/ # Pokémon browsing & management
│ │ ├── pokedex/ # User's caught Pokémon collection
│ │ └── sharing/ # Pokémon sharing functionality
│ ├── infrastructure/ # External concerns & data layer
│ │ ├── datasources/ # Data source management & sync
│ │ ├── repositories/ # Data access layer (Repository pattern)
│ │ └── storage/ # Offline storage (IndexedDB)
│ ├── core/ # Business logic & domain models
│ │ ├── entities/ # Domain models (Pokemon, User, CaughtPokemon)
│ │ ├── types/ # TypeScript type definitions
│ │ └── usecases/ # Business use cases & application logic
│ ├── config/ # Configuration files (API endpoints, app config)
│
└── backend/ # Backend (.NET 8 API)
├── BloqedexApi/ # Web API layer
├── Application/ # Business logic
├── Core/ # Domain entities
├── Infrastructure/ # Data access & external services
└── Testing/ # Tests
- Node.js 18+ (for frontend)
- .NET 8 SDK (for backend)
- Git for version control
-
Clone the repository
git clone https://github.com/joao-paulo-santos/bloqedex.git cd bloqedex -
Start the Backend
cd backend/BloqedexApi dotnet restore dotnet runBackend will be available at
http://localhost:5000 -
Start the Frontend (in a new terminal)
cd frontend npm install npm run devFrontend will be available at
http://localhost:3000 -
Start Exploring!
- Register a new account
- Begin catching Pokémon
- Explore the full Pokédex
For detailed setup instructions and technical documentation:
- Frontend: See frontend/README.md for offline-first architecture, state management, UI components, testing, and deployment
- Backend: See backend/README.md for API documentation, clean architecture details, and configuration
- Offline-First Web App - Seamless offline experience with smart synchronization
- Advanced State Management - Zustand stores with IndexedDB persistence
- Responsive Design - Mobile-first approach with desktop optimization
- Performance Optimized - Smart caching, lazy loading, and bundle optimization
- Type Safety - Complete TypeScript implementation with strict typing
- Modern Architecture - Feature-based modules with clean separation of concerns
- Clean Architecture - Domain-driven design with clear separation of concerns
- Smart Caching - Intelligent PokéAPI integration with local-first approach
- Performance - Optimized queries, pagination, and bulk operations
- Security - JWT authentication, input validation, rate limiting
- Testing - Comprehensive test suite with 100+ test methods
- Repository Pattern - Encapsulated data access
- Service Layer - Business logic separation
- Unit of Work - Transaction management
- Dependency Injection - Loose coupling
- Rate Limiting - External API protection
- Browse 1000+ Pokémon with detailed stats
- Catch/release Pokémon with personal notes
- Track completion progress and statistics
- Advanced filtering and sorting options
Responsive grid layout with advanced filtering, bulk selection, and seamless offline/online switching
Personal collection management with progress tracking, favorites, and detailed statistics
- Generate secure sharing links
- Share individual Pokémon or collections
- View limits and expiration controls
- Public viewing without authentication
- Full offline browsing capability
- Smart background sync when online
- IndexedDB persistence with conflict resolution
- Pending actions queue for seamless user experience
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Distributed under the MIT License. See LICENSE for more information.
João Santos - LinkedIn
Project Link: https://github.com/joao-paulo-santos/bloqedex
- Bloqit for the inspiring frontend engineering challenge
- PokéAPI for providing comprehensive Pokémon data