Javier Sanchez
software
developer
About
Full Stack developer with experience building and deploying production-ready web apps following good practises. I am focussed on shipping fast, continuous devivery and self-management to create scalable and maintainable solutions.
Projects
A dynamic web application built with Astro that allows users to explore and interact with the Model Context Protocol (MCP) registry. This app provides a comprehensive interface to query all GET methods available in the MCP registry API.
- Complete MCP Server Listing: Browse all MCP servers from the official registry
- Advanced Search: Search servers by name, description, or repository URL
- Smart Filtering: Filter by status (active/inactive), connection type, and category
- Detailed Server Views: View complete server information
- Responsive Design: Optimized for desktop and mobile devices
- Real-time Stats: Live server count and filtering statistics
- TypeScript
- React
- Astro
- tailwind
A TypeScript application to fetch LinkedIn profiles using OAuth 2.0.
- LinkedIn's OAuth only allows you to fetch the profile of the account that authorizes - not other people's profiles.
- The server handles everything automatically
- Generates the authorization URL
- Receives the callback from LinkedIn
- Exchanges the code for an access token
- Fetches and displays your profile
- TypeScript
- NodeJS
- Express
A REST API built with react-serve-js and TypeScript, demonstrating the differences between Hexagonal Architecture and Clean Architecture.
- This repository contains two different implementations of the same Todo API to help you understand the practical differences between Hexagonal Architecture and Clean Architecture.
- Both implementations follow functional programming principles (no classes, pure functions, immutable data).
- Both architectures achieve the same goal: decoupling business logic from infrastructure
- Hexagonal is more flexible and easier to grasp initially
- Clean Architecture provides stricter rules and better scalability for large projects
- Both work great with functional programming patterns
- TypeScript
- NodeJS
- React
- Vitest
A modern React + TypeScript application that displays Pokémon information using the PokéAPI. Features a searchable Pokémon list and an interactive chat assistant for natural language queries.
- AI-powered natural language interface using Cloudflare Workers AI
- Handles both specific Pokémon queries and general questions
- Smart query parsing to extract Pokémon names and fetch real-time data from PokéAPI
- Contextual AI responses using Cloudflare's Llama 2 model
- Works offline in local dev (falls back to templated responses)
- TypeScript
- React
- LLM
- Cloudflare Workers
A modern, responsive e-commerce web application for a bakery shop built with React and TypeScript. This project features a complete shopping experience with product browsing, cart management, and responsive design for both mobile and desktop users.
- Shopping Cart: Add/remove products with quantity management
- Favorites System: Mark products as favorites for easy access
- Product Filtering: Filter by favorites and stock availability
- Responsive Design: Optimized for mobile (320px+) and desktop
- Tested: Comprehensive test coverage with Jest and React Testing Library
- TypeScript
- React
- SCSS
- React Testing Library
A React-based personal bookshelf application that allows users to organize and manage their book collection. Users can categorize books into different shelves (Currently Reading, Want to Read, Read) and search for new books to add to their collection.
- Book Organization: Organize books into three shelves - Currently Reading, Want to Read, and Read
- Search Functionality: Search for books by title or author with real-time search results
- Move Books: Easily move books between different shelves
- Responsive Design: Clean, responsive interface for managing your book collection
- Optimistic Updates: Smooth user experience with optimistic UI updates
- React
- Javascript
- Create React App
A React application that enables real-time text message broadcasting over videos using WebSockets. Users can create timed text overlays that appear synchronized across all connected clients during video playback.
- Real-Time Messaging: WebSocket-powered message broadcasting to all connected clients
- Timed Text Overlays: Create text messages that appear at specific times during video playback
- Customizable Positioning: Set X and Y coordinates for message placement on the video
- Duration Control: Configure how long each message displays
- Form Validation: Ensures message timing doesn't exceed video duration
- Automatic Cleanup: Messages reset when video ends
- React
- Javascript
- Web Sockets
- React Testing Library
A React-based card management application built with TypeScript and Redux, featuring card filtering, editing, and analytics tracking.
- Redux State Management: Centralized state for cards and filters
- Analytics Integration: Event tracking for user interactions (clicks, edits, filtered card counts)
- Logger Middleware: Redux action logging for debugging
- Test Coverage: Comprehensive unit tests with coverage reports
- Git Hooks: Pre-commit and pre-push hooks ensure code pass validation and tests before commits
- TypeScript
- React
- SCSS
- React Testing Library
A React-based pet gallery application that displays cats and dogs with filtering and interactive removal functionality.
- Responsive Design: Works across different screen resolutions
- Type Filtering: Filter to show only cats or only dogs
- JSON Server for mock API
- React
- TypeScript
- SCSS
- React Testing Library
Skills
- React
- NodeJS
- JavaScript
- TypeScript
- MongoDB
- PostgreSQL
- Git
- GitHub
- HTML
- CSS
- Tailwind
- Bootstrap
- Astro
- AWS
- Docker
- Shell
- Linux