Calichef
A few weeks ago, I decided to invest in a Thermomix. More than an expense, I see it as an investment 💰 because it saves me a lot of time in the kitchen ⏳. I am thrilled with how easy it is to use and with its app 📲, which has an extensive recipe ca...
A few weeks ago, I decided to invest in a Thermomix. More than an expense, I see it as an investment 💰 because it saves me a lot of time in the kitchen ⏳. I am thrilled with how easy it is to use and with its app 📲, which has an extensive recipe catalog 🍲. However, like many current apps, it has a subscription-based payment model that I don’t find suitable for this type of product 💸. Maybe I’m a bit old school 🧓, but I miss the days when you bought an app, and it was yours forever 📱. I don’t think it’s necessary to pay a subscription for something very similar to a cookbook 📖 and that doesn’t require frequent updates. 💡 That’s why I decided to take action and create my own website, which I turned into a PWA (Progressive Web Application) to install on my devices. That’s how Calichef 👨🍳 was born, where I used my web development knowledge to create a recipe listing focused on the Thermomix. The project is developed with React and Tailwind 💻, two libraries I have been working with for several years. I love everything I can achieve with web development, things I never would have even thought of 🤯. The app is fully responsive 📱💻, perfectly adapting to any device. The recipe details are so well organized that it’s very easy to have my tablet next to me consulting Calichef while cooking with the Thermomix 🥘. Additionally, it allows you to add recipes to favorites and save them locally, so you always have the ones that catch your eye at hand. It also has an advanced search with filters by country, language, difficulty, and stars, making it easy to find the exact recipe you want. I am very satisfied with the result and would love for you to see it 🤩. 🔍 What do you think? I’d love to receive your comments and feedback. Don’t hesitate to share your thoughts! 👇
Stack: React, Next.js, HTML/CSS, Javascript, Tailwind, PWA, IDB
Deployment
Code
Money Tracker
I recently set out to find a money tracker that fit my needs, but I was surprised to find that many available options are quite expensive. 💸 As a developer, I know that the data storage costs for this type of application don't justify such high pric...
I recently set out to find a money tracker that fit my needs, but I was surprised to find that many available options are quite expensive. 💸 As a developer, I know that the data storage costs for this type of application don't justify such high prices. So, I decided to create my own money tracker. 🚀 This Fullstack project was an exciting challenge, especially since, although I've taken several backend courses, my main experience is in frontend. I chose a MERN stack, using MongoDB for the database, Express to set up the API, and React with Vite for the frontend. I'm really happy with the result. 😄 Features included: - 📝 User registration and login. - 📊 Dashboard to load and view transactions, available for both registered and guest users. - 📈 Detailed income and expense charts. - 💳 Selection and creation of personalized cards with icons. - 🔍 Filtering transactions by category, date, and card. - ⬅️ Editing and deleting transactions with a simple swipe. - 📥 Import and 📤 export transactions to and from Excel files.
Stack: React, Vite, HTML/CSS, Javascript, Node.js, Express, MongoDB
Web Code Editor
🚀 After my experience with iframes in my last "image to code" project, I had the idea of creating my own web editor similar to CodePen and CodeSandbox. The vision: a tool where I could quickly and efficiently test snippets of HTML, CSS, and J...
🚀 After my experience with iframes in my last "image to code" project, I had the idea of creating my own web editor similar to CodePen and CodeSandbox. The vision: a tool where I could quickly and efficiently test snippets of HTML, CSS, and JavaScript without the need to create or install files. 💡 The first phase of the project was surprisingly smooth, thanks to the knowledge gained from my previous experience with iframes. But I decided to take it a step further by integrating my favorite IDE, Visual Studio Code, into the editor. ✨ The result has exceeded my expectations. As you can see in the attached image, I managed to replicate Google's homepage within my web editor, a small but significant achievement that reflects the project's capabilities.
Stack: React, Vite, HTML/CSS, Javascript
Image to code by Caliche
🚀 Recently, I explored the new functionality of the OpenAI API, which allows recognizing elements in images. I developed a small project where, from screenshots or mockups, it automatically generates code using React and Tailwind CSS. ...
🚀 Recently, I explored the new functionality of the OpenAI API, which allows recognizing elements in images. I developed a small project where, from screenshots or mockups, it automatically generates code using React and Tailwind CSS. 🌟 This experience reminded me how much I enjoy web development and how committed I am to continue learning and growing in this field. I am excited about the opportunities that await me and to continue strengthening my skills as a web developer.
Stack: React, Next.js, OpenAI, Tailwind, HTML/CSS, Typescript
SpaceX Launches 🚀
🚀 Recently, I've noticed a lot of hype in the web development community around the Astro 3.0 update. This interest led me to dive into a wealth of content about the new features and advantages this framework offers. 💡 Inspired b...
🚀 Recently, I've noticed a lot of hype in the web development community around the Astro 3.0 update. This interest led me to dive into a wealth of content about the new features and advantages this framework offers. 💡 Inspired by this excitement, I decided to test it with a project where I consume the SpaceX launches API. This project gave me the opportunity to work with Astro for the first time, and the experience was amazing. 🌟 By leveraging Astro 3.0, I was able to take full advantage of its performance enhancements and efficient rendering. The project not only provided valuable insights into the capabilities of Astro but also marked a significant milestone in my journey as a web developer.
Stack: Astro, Tailwind, HTML/CSS, Typescript
Caliche Portfolio 2023
🚀 Recently, I updated my personal landing page, which features my resume. Inspired by the Windows 10 aesthetic, I aimed to give it an original and unique touch. This idea came after watching a video by Miguel Ángel Durán García showcasing a p...
🚀 Recently, I updated my personal landing page, which features my resume. Inspired by the Windows 10 aesthetic, I aimed to give it an original and unique touch. This idea came after watching a video by Miguel Ángel Durán García showcasing a personal portfolio styled like Windows 98 by Eric Selva. 🔄 From Next.js to Astro I had the opportunity to explore Astro, a framework that caught my attention for its performance and efficiency. Initially, my portfolio was developed in Next.js. Despite using techniques like lazy loading and skeletons, I faced performance issues and a less-than-smooth user experience. 💡 Motivated by these challenges, I decided to migrate my portfolio to Astro. What a difference! The results have been remarkable, with significant improvements in performance and interface fluidity.
Stack: React, Astro, HTML/CSS, Javascript, Tailwind, Typescript
Calichecraft
🌌 An interactive 3D experience built with Three.js and React. This project allows users to explore a virtual world created using advanced 3D graphics and animations. ✨ The immersive environment showcases the power of modern web ...
🌌 An interactive 3D experience built with Three.js and React. This project allows users to explore a virtual world created using advanced 3D graphics and animations. ✨ The immersive environment showcases the power of modern web technologies, providing a seamless and engaging user experience. From realistic textures to dynamic lighting, every element is designed to captivate and inspire. 🔍 Dive into a digital realm where you can interact with various objects and scenes, discovering the potential of Three.js and React in creating sophisticated and visually stunning applications. This project not only highlights my skills in 3D web development but also my commitment to pushing the boundaries of what's possible online.
Stack: React, ThreeJS, HTML/CSS, Javascript
Caliche Translate
🌐 A translation app using Next.js and the OpenAI API for multilingual support. This app provides accurate translations and supports multiple languages, making it a powerful tool for breaking language barriers. 🚀 This project mar...
🌐 A translation app using Next.js and the OpenAI API for multilingual support. This app provides accurate translations and supports multiple languages, making it a powerful tool for breaking language barriers. 🚀 This project marks the first time I've used the OpenAI API, an exciting milestone that opens up new possibilities for my future projects. By leveraging the advanced capabilities of OpenAI, I was able to implement highly accurate and context-aware translations, significantly enhancing the user experience. 🌟 The app not only showcases my ability to integrate cutting-edge technologies but also highlights my commitment to continuous learning and innovation. This experience has been invaluable and sets the stage for more sophisticated and AI-driven applications in my development portfolio.
Stack: Next.js, React, OpenAI, Tailwind, Typescript, Javascript, API, Redux
Caliche Portfolio 2022
🔍 An earlier version of my personal portfolio website, this project highlights the various projects and skills I developed during that year. It serves as a testament to my growth and progress as a web developer. 💡 The portfolio ...
🔍 An earlier version of my personal portfolio website, this project highlights the various projects and skills I developed during that year. It serves as a testament to my growth and progress as a web developer. 💡 The portfolio features a collection of diverse projects, each showcasing different aspects of my abilities in web development, design, and problem-solving. From responsive layouts to dynamic functionality, every project reflects my dedication to mastering new technologies and improving my craft. 🌟 This version of my portfolio also includes detailed descriptions, and visual representations of my work, providing a comprehensive overview of my accomplishments. It's not just a portfolio; it's a chronicle of my journey, illustrating how far I've come and setting the stage for future achievements.
Stack: Next.js, React, Tailwind, Javascript
Robocoons website
🤖 A website for the Robocoons robotics team, showcasing their innovative projects and remarkable achievements. This web provides a detailed look into their journey, highlighting the dedication and creativity that define the team. ...
🤖 A website for the Robocoons robotics team, showcasing their innovative projects and remarkable achievements. This web provides a detailed look into their journey, highlighting the dedication and creativity that define the team. 🏆 The website features comprehensive information about their competitions. 💡 By exploring the Robocoons website, visitors can gain insights into the team's methodology, their collaborative spirit, and the advanced robotics technologies they employ. This project not only serves as a portfolio for the team but also as an inspiration for aspiring roboticists and tech enthusiasts.
Stack: React, Tailwind, Javascript, HTML/CSS
English Certify by Caliche
📚 As an English student, I realized that the Duolingo platform wasn't practical enough to prepare for the Duolingo certification. That's why I decided to create a free online platform for targeted practice and feedback on your skills. English...
📚 As an English student, I realized that the Duolingo platform wasn't practical enough to prepare for the Duolingo certification. That's why I decided to create a free online platform for targeted practice and feedback on your skills. EnglishCertify offers personalized exercises to help you improve in specific areas and identify your mistakes. 💡 With EnglishCertify, you have the option to see the correct answers, helping you learn from your errors. The platform is designed to be accessible on both computers and mobile devices, ensuring you can study anytime, anywhere. 🌟 Whether you're currently studying for the Duolingo English certification or planning to in the future, we invite you to try EnglishCertify. We are confident that it will help you enhance your skills and pass the exam with flying colors. Our goal is to provide a practical, efficient, and accessible tool for all English learners aiming for certification.
Stack: React, Tailwind, Javascript, HTML/CSS
Memory Game by Caliche
🎮 A fun and interactive memory game built with React. This game challenges players to match pairs of cards, providing an engaging and entertaining way to test and improve their memory skills. 🧠 The intuitive design and smooth an...
🎮 A fun and interactive memory game built with React. This game challenges players to match pairs of cards, providing an engaging and entertaining way to test and improve their memory skills. 🧠 The intuitive design and smooth animations make for a seamless user experience, keeping players hooked as they strive to beat their previous time. 🌟 Whether you're looking to pass the time or give your brain a good workout, this memory game offers a perfect blend of fun and challenge. It's a testament to the power of React in creating dynamic and interactive web applications.
Stack: React, Tailwind, Javascript, HTML/CSS
Caliche Productivity APP
🗂️ A productivity app designed to help manage tasks and projects efficiently. This app includes a range of features for task tracking, project management, and collaboration, making it an essential tool for staying organized and productive. ...
🗂️ A productivity app designed to help manage tasks and projects efficiently. This app includes a range of features for task tracking, project management, and collaboration, making it an essential tool for staying organized and productive. 🔍 Key Features: - 🚀 Task Tracking: Randomly generate tasks to test the tool, with 50 tasks loaded by default. You can adjust this to start with as few as 5 tasks. - ⏲️ Timer: A built-in timer calculates how long each task takes to complete. You can set a specific time for each task and reset the timer as needed. - ✏️ Edit and Manage Tasks: Easily edit, delete, or mark tasks as completed. If you finish a task early, simply mark it as done. - 📊 Statistics: Track your productivity with detailed statistics showing how much time each task took to complete. - 💾 Persistence: If you leave the page, the timer pauses automatically, ensuring accurate tracking of your work time. 🌟 This productivity app not only helps you manage your workload but also provides insights into your efficiency and time management. Perfect for both personal use and team collaboration, it leverages advanced features to enhance productivity and streamline your workflow.
Stack: React, Tailwind, Javascript, HTML/CSS
English Tenses by Caliche
📘 An educational tool for learning and practicing English tenses, designed to function as a comprehensive verb database. You can search for any verb and it will provide all its verb forms, helping you master English grammar efficiently. ...
📘 An educational tool for learning and practicing English tenses, designed to function as a comprehensive verb database. You can search for any verb and it will provide all its verb forms, helping you master English grammar efficiently. 🔍 The tool features an intuitive search functionality that allows users to quickly find and learn about various verb forms. Whether you are a beginner or an advanced learner, this tool is perfect for enhancing your understanding of English tenses. 🌟 This educational tool not only aids in learning verb conjugations but also reinforces your knowledge through practice and repetition. It's an invaluable resource for students, educators, and anyone looking to improve their English language skills.
Stack: React, Tailwind, Javascript, HTML/CSS, API
Caliche weather APP
🌦️ A weather app providing real-time weather updates and forecasts. This web is designed to give users accurate and up-to-date weather information, ensuring you are always prepared for the day ahead. 💡 The web includes data visu...
🌦️ A weather app providing real-time weather updates and forecasts. This web is designed to give users accurate and up-to-date weather information, ensuring you are always prepared for the day ahead. 💡 The web includes data visualization features for an easy understanding of weather patterns. Charts and graphs display temperature changes, precipitation levels, and wind speeds in a clear and concise manner. 🔍 By consuming a reliable weather API, the web fetches real-time data and presents it seamlessly to the user. The integration of technologies like React, Tailwind, and JavaScript ensures a smooth and responsive user experience.
Stack: React, Tailwind, Javascript, HTML/CSS, API
Landingpage 2021
🌐 A landing page showcasing my projects and skills from 2021. This was my very first portfolio, providing an overview of my work and achievements during that year. 💼 The page highlights various projects that demonstrate my abili...
🌐 A landing page showcasing my projects and skills from 2021. This was my very first portfolio, providing an overview of my work and achievements during that year. 💼 The page highlights various projects that demonstrate my abilities in web development, design, and problem-solving. Each project is accompanied by detailed descriptions and visual representations, giving a comprehensive view of my accomplishments. ✨ As my inaugural portfolio, this landing page holds a special place in my heart. It marks the beginning of my journey as a developer, reflecting my growth and dedication to the craft. The layout is designed to be user-friendly and visually appealing, making it easy for visitors to navigate through my work.
Stack: React, Tailwind, Javascript, HTML/CSS
Caliche MOVIE API
🎬 An application to browse and search for movies using a public API. This app is designed to help movie enthusiasts find detailed information about their favorite films quickly and easily. 🔍 With this application, users can sear...
🎬 An application to browse and search for movies using a public API. This app is designed to help movie enthusiasts find detailed information about their favorite films quickly and easily. 🔍 With this application, users can search for movies by title and get comprehensive details about each film, including ratings, reviews, cast, and crew. The user-friendly interface ensures a seamless browsing experience. 💡 By integrating a reliable public API, the app fetches real-time data and presents it in an organized manner. Users can read reviews from other viewers and see aggregated ratings, helping them make informed decisions about what to watch next.
Stack: HTML/CSS, Javascript, API
Futurnow Landingpage
🌟 A landing page for Futurnow, showcasing their products and services. This page is designed to highlight the diverse offerings of Futurnow, providing visitors with a clear and engaging overview of what the company has to offer. ...
🌟 A landing page for Futurnow, showcasing their products and services. This page is designed to highlight the diverse offerings of Futurnow, providing visitors with a clear and engaging overview of what the company has to offer. 🔍 This project showcases my skills in web design and development, using technologies like React, Tailwind, and JavaScript to create a visually appealing and highly functional website. The layout is responsive and optimized for both desktop and mobile devices, ensuring a seamless experience for all users.
Stack: React, Javascript, Bootstrap, HTML/CSS
Bookmark App
🔖 An app to save and manage your favorite bookmarks. This application is designed to help users organize their bookmarks efficiently and access them with ease. ✨ With a clean and intuitive interface, the app provides a seam...
🔖 An app to save and manage your favorite bookmarks. This application is designed to help users organize their bookmarks efficiently and access them with ease. ✨ With a clean and intuitive interface, the app provides a seamless user experience. Users can add, edit, and delete bookmarks with just a few clicks. The search functionality also enables quick retrieval of specific bookmarks, saving time and effort. 💡 Built using modern web technologies like React, Bootstrap, and JavaScript, the app ensures smooth performance and responsiveness across all devices. Whether you're using a desktop, tablet, or smartphone, you can manage your bookmarks effortlessly.
Stack: React, Javascript, Bootstrap, HTML/CSS
SALSA CATRINA
🌶️ A landing page for Salsa Catrina, showcasing their delicious products. This page is designed to provide comprehensive information about their range of salsas, highlighting the unique flavors and ingredients that make them special. ...
🌶️ A landing page for Salsa Catrina, showcasing their delicious products. This page is designed to provide comprehensive information about their range of salsas, highlighting the unique flavors and ingredients that make them special. 🍅 The landing page features detailed sections for each salsa, complete with mouth-watering images and descriptions that capture the essence of Salsa Catrina's culinary offerings. From mild to extra spicy, every salsa is presented with its key ingredients and suggested pairings.
Stack: HTML/CSS, Bootstrap
PLATZICONF MEXICO
📅 A landing page for the Platziconf Mexico event, designed as a project for a course on Platzi. This page provides a comprehensive overview of the conference, ensuring attendees have all the information they need at their fingertips. ...
📅 A landing page for the Platziconf Mexico event, designed as a project for a course on Platzi. This page provides a comprehensive overview of the conference, ensuring attendees have all the information they need at their fingertips. 📋 The landing page includes detailed event information, such as the schedule, speaker bios, and session topics. Each section is thoughtfully organized to help visitors easily navigate through the event details and plan their participation. 🎤 The speaker information highlights the expertise and background of each presenter, giving attendees insights into the valuable knowledge and experience they can expect to gain. The schedule section outlines the timeline of the conference, including keynotes, workshops, and networking sessions.
Stack: HTML/CSS, Bootstrap
Arduino Day 2021
⏲️ A countdown page for the Arduino Day 2021 event. This page is designed to build excitement and anticipation by displaying the time remaining until the event starts, while also providing detailed information about the planned activities. ...
⏲️ A countdown page for the Arduino Day 2021 event. This page is designed to build excitement and anticipation by displaying the time remaining until the event starts, while also providing detailed information about the planned activities. 🔍 The page features a real-time countdown timer, ensuring visitors are always aware of how much time is left until the event. Additionally, it includes sections detailing the various activities, workshops, and presentations scheduled for Arduino Day, giving attendees a clear overview of what to expect.
Stack: HTML/CSS, Bootstrap, Javascript
WWE NETWORK
💪 A landing page for WWE Network, designed to simulate the real platform and showcase all WrestleManias up to the present. This project, one of my first, provides detailed information about WWE shows and includes a sign-up form for new subscr...
💪 A landing page for WWE Network, designed to simulate the real platform and showcase all WrestleManias up to the present. This project, one of my first, provides detailed information about WWE shows and includes a sign-up form for new subscribers. 📺 The landing page features dedicated sections for each WrestleMania.
Stack: HTML/CSS, Javascript, Bootstrap
SIMON DICE
🕹️ A Simon Says game built with HTML, CSS, and JavaScript. This project provides an interactive and engaging gaming experience with levels of increasing difficulty, challenging players' memory and reflexes. 🎮 The game starts wit...
🕹️ A Simon Says game built with HTML, CSS, and JavaScript. This project provides an interactive and engaging gaming experience with levels of increasing difficulty, challenging players' memory and reflexes. 🎮 The game starts with simple sequences, gradually becoming more complex as players progress through the levels. Each round adds a new step to the sequence, requiring players to remember and repeat increasingly long patterns.
Stack: HTML/CSS, Javascript
