Esteban Codes Tutorials
X Clone
Learn how to build a fully-functional clone of Twitter (now X) from scratch using modern technologies like Next.js, Supabase, PostgreSQL, Tailwind CSS, and Drizzle ORM
Building My AI Chatbot App with Next.js and OpenAI - A Step-by-Step Guide
In this tutorial, I’ll take you through the process of building an AI-powered chat application using Next.js and OpenAI. This app allows users to interact with a chatbot that responds in rhymes, adding a unique twist to the typical ChatGPT experience. By following the steps outlined, I will set up my Next.js project, configure the OpenAI API, and create a functional chat interface, all while learning essential web development skills.
WhatsApp Clone
Build WhatsApp core features such as user authentication, chat rooms, image uploads, and real-time updates, making it a great example of how to create a chat app from scratch.
Google Calendar Clone with React
The project aims to replicate key features of Google Calendar, enabling users to seamlessly create, edit, delete, and hide events.
Build a typing speed app with React - React Tutorial
Discover how I built a fun and engaging typing speed app with React. From generating random words to providing real-time feedback on accuracy and speed, this step-by-step guide walks you through setting up state, handling user input, and calculating final scores. Perfect for sharpening your React skills!
Contact form submissions with Supabase - Supabase Tutorial
In this tutorial, learn how to make contact form integrated with Supabase, a powerful open-source alternative to Firebase. From setting up the database table to handling form submissions and ensuring security, I cover all the essential steps to make your contact form efficient and reliable. By the end, you'll have a fully functional form that not only captures user inquiries but also protects your data integrity.
React Tutorial- Build a chess â™– game with react and firebase
In this blog post, I’ll show you how I extended my React-based chess game to include real-time online play using Firebase. From setting up Firebase for user authentication and real-time gameplay to styling the UI with Bulma CSS, this guide covers everything needed to create a smooth, multiplayer chess experience with friends.
React Tutorial- Build a chess â™– game with react - Part One ,rxjs and react drag and drop
In this tutorial, you'll build a chess game using React, RxJS, and React Drag-and-Drop. You’ll implement key chess features such as castling, checkmate detection, and pawn promotion, while ensuring game progress is saved in local storage. This project offers a great way to level up your React skills and develop a portfolio-worthy app.
Build a Tinder clone with React Native and Expo (React Native Tutorial)
Create a swipeable image component, add like/dislike buttons, and set up basic functionality. By the end, you’ll have a working dating app and a solid grasp of mobile development with React Native and Expo.
Building a React Native Chat App with Firebase and Firestore. Step-by-Step Guide
Learn to build a real-time chat application using React Native, Firebase, Firestore, and Expo.
Build a chat application with Svelte and Firebase
Explore the creation of a real-time chat application using Svelte and Firebase. In this step-by-step tutorial, you'll learn how to set up a new Svelte project, integrate Firebase for backend functionality, and implement user authentication and real-time messaging features. By the end, you'll have a fully functional chat app that is both intuitive and responsive, ready for further customization and enhancement.
React Native Crash Course - Build a weather app - Full App tutorial with Expo
Build a weather app with react native from scratch.
Full Stack Vue App- Bucketlist App - Learn MEVN in one video with Mongo Express Vue and Node js
Full-stack Vue.js application using the MEVN stack. The MEVN stack includes MongoDB, Express, Vue.js, and Node.js. In this hands-on guide, we’ll create a simple bucket list app where users can easily add, edit, and delete items.
How to deploy svelte js to netlify for free. Free hosting for svelte apps
Deploying a SvelteJS application to Netlify is an efficient way to bring your web projects to life. In this guide, we’ll walk you through the entire deployment process, from signing up for Netlify and linking your GitHub or GitLab account to configuring build settings and enabling HTTPS. With Netlify’s generous free tier and powerful features, you can host your applications securely and seamlessly. Whether you're an individual developer or part of a small team, this step-by-step tutorial will help you navigate the deployment landscape with ease. Happy deploying!
Building a Whatsapp Web UI Clone Using React and React Hooks
In this article, I dive into creating a Whatsapp Web UI clone using React and React Hooks. By generating realistic fake data and building key UI components, I was able to simulate a lifelike messaging experience. React Hooks played a key role in efficiently managing state, and I also added features like a user-friendly welcome screen. This project provides a hands-on way to practice building a web application with modern React techniques.