My new React Web
My second application developed with React for Álvaro’s Gastrobar. It features a dynamic interface designed to organize and manage the menu for a restaurant based in Madrid.
Behind the Code: Building the Digital Experience for 'Álvaro's Gastrobar Menu
Following my first foray with a React Native demo, I decided to take the user experience a step further. This new web application, specifically designed to be accessed via QR codes at the tables of Álvaro’s Gastrobar in Madrid, is the result of both technical and visual evolution.
The Tech Stack: Lightweight and Dynamic
For this version, I have prioritized loading speed and interface fluidity. The pillars of this development are:
React: The foundation of everything, leveraging the power of Hooks to manage the state of the dishes and navigation efficiently.
Swiper.js: I implemented this library to create tactile and intuitive sliders, allowing diners to swipe through the daily specials without friction.
JSON Data Structure: The final implementation is not yet in place, but the information for each dish (names, prices, photography) will be structured in a JSON. This way, updates can be made more easily, making the code more readable and organized.
Independent Deployment: The app is already live on my own server, optimized to respond instantly when a customer scans the QR code at the premises.
Own Photography: Identity without Third-Party Filters
Uno de los puntos que más me enorgullece es la dirección de arte. A diferencia de mi proyecto anterior (el demo en React Native), aquí cada imagen es original:
Realicé personalmente la sesión fotográfica de los platos.
Llevé a cabo la edición digital para asegurar que los colores y texturas reflejen la calidad real de la cocina de Álvaro.
Incluí una galería del restaurante para que el usuario conecte con el ambiente del lugar antes de que llegue su pedido.
El Desafío de Aprender "Sobre la Marcha"
As a developer diving into the Web and App ecosystem, the greatest challenge has been constant iteration. Not having known CSS frameworks like Bootstrap at this stage, I have worked with pure CSS, but I plan to make a final update and use Bootstrap in the project.
Every feature has been a lesson: if I learn a more optimal way to render a list or handle an image, I implement it immediately. It is a living project that grows as my knowledge does.
All Projects & Updates
Explore my dev log: A real-time look at my active projects and coding journey.
Key Projects & Core Portfolio
Curated selection of projects showcasing my expertise in .Net, Android, React Native and React.