Yash Medhane’s Post

Just completed a weather app using React.js and Material-UI! While the UI isn't perfect yet, it provides real-time weather updates using the OpenWeatherMap API and has been a great learning experience. Looking forward to improving it further.🌤️ Feedback is welcome! Check out the code on my GitHub: https://lnkd.in/g-csBYbY #Reactjs #MaterialUI #WebDevelopment #WeatherApp #LearningJourney #JavaScript #FrontendDevelopment #OpenWeatherMapAPI

Day 37:    🚀 Day 08 of #30daysofprojectchallenge  📍🎉 I'm thrilled to share my latest project built with #ReactJS - a fun and engaging Random Jokes Generator that will keep you laughing😂! 📍🌟 This project is all about creating an interactive and amusing experience using React.js. With the power of the useEffect hook, the app fetches a new joke every time you visit or click the button. Whether you need a quick laugh or a break from work, this jokes generator has got you covered. 💡    Direct Link 🖇: https://lnkd.in/g45t6tsW #HTML #CSS #JavaScript #ReactJS  #FrontEndDevelopment   #CodingJourney #WebDevelopment #Learning

✨ Day 1 Project: Countdown Timer App – 30-Day Next.js Challenge by Asharib Ali! ✨ Today, I developed a fully functional and sleek Countdown Timer using Next.js, TypeScript, and Tailwind CSS. 🎉 This project was an incredible opportunity to dive into state management with React, utilize useEffect hooks for precise interval handling, and craft a clean, responsive, and engaging user interface. Key Features: ⏱ Smooth Set, Start, Pause, and Reset options to control the countdown. 💻 Real-time updates with clear and readable time formatting. 🎨 Designed with eye-catching gradient backgrounds and interactive hover effects to give it a professional touch. I’m thrilled to continue this journey and see where the next 29 days of this challenge will take me! 🚀 Ameen Alam || Asharib Ali || Isfhan Ahmed || HAFIZ NABEEL || Mohammad Hadi #30DaysOfCode #FrontendDevelopment #WebDevelopment #ReactJS #NextJS #TailwindCSS #TypeScript #JavaScript #CodingChallenge #WomenInTech #Programming #TechJourney #DeveloperLife #UIUXDesign #ResponsiveDesign #OpenSource #CodeNewbie #WebDesign #BuildInPublic #CleanCode #SoftwareEngineering #FullStackDeveloper

😂 Project 7: Random Joke Generator 🎉 As part of my 30 Days of Next.js Projects challenge, I just finished building a Random Joke Generator! This app fetches hilarious jokes from an external API and presents them in a fun and simple card format. Need a laugh? Just hit the "Get New Joke" button and enjoy! 😄 ✨ Key Features: Fetches random jokes with setup and punchline Button to load new jokes instantly Clean and responsive design Fun and engaging user experience 🔧 Technologies Used: Next.js TypeScript React Tailwind CSS Official Joke API This app was a blast to make, and it’s always nice to bring a little humor into coding. Check out the code : https://lnkd.in/dnyAiGZm #Nextjs #TypeScript #React #WebDevelopment #30DaysOfNextProjects #RandomJokeGenerator #JavaScript #FrontendDevelopment #HumorInCode

🚀 React Component vs. React Element: What's the Difference? 🚀 Hey LinkedIn fam! Today, let's demystify two key concepts in React: Components and Elements. React Component   ♦️ A React Component is a javascript function that optionally accepts input (props) and returns a React element. ♦️ Think of it as a blueprint for creating a UI part. It’s reusable and can manage its own state and lifecycle methods. Example:    function Welcome(props) {     return <h1>Hello, {props.name}</h1>;   } React Element ♦️ A React Element is an object representation of a DOM node created by the React library. ♦️ It’s the building block of a React app. Unlike components, elements are immutable and describe what you want to see on the screen. Example:    const element = <h1>Hello, world</h1>; Key Differences - Nature: Components are functions (or classes), while elements are JS objects. - Usage: Components create elements. Elements are rendered to the DOM. - Lifecycle: Components can have state and lifecycle methods; elements do not. Hope this helps you on your React journey! 🌟 Drop a comment if you have any questions or insights to share! 👇 #ReactJS #WebDevelopment #TechTips #Coding #JavaScript

🚀 Learning React Components & Props! 🚀 I just dived into a crucial concept in React: Components and Props! 🎉 🔹 Components: The Building Blocks 🧱 Think of components as reusable, independent blocks that make up your UI. They're like functions that return HTML elements, making your app more organized and maintainable. You can create functional or class components, both serving the same purpose! 🔹 Props: The Communication Link 🔗 Props (short for properties) are how components talk to each other. They allow you to pass data and functions between components, making your app dynamic and interactive! 🌈 💡 Pro Tip: Always keep your components pure by using props effectively! It makes your code easier to maintain and debug. Simplified View: Components 🧩 = Blueprints Props 📨 = Data you send to customize them Excited to build more UIs and learn deeper concepts! Let's keep building together! 💪✨ #React #WebDevelopment #Components #Props #JavaScript #LearningJourney #FrontendDevelopment

Days 87 - 90 of #100DaysOfCode I've just completed a React app where I focused on learning and implementing React Router and Tailwind CSS! In this project, I built out an intuitive multi-page application using React Router for smooth in-app navigation, while Tailwind CSS helped me style the app quickly with its utility-first approach. What I learned: React Router: Seamless in-app routing with clean URLs, dynamic routing, and nested routes. Tailwind CSS: How to rapidly create responsive and attractive UIs using utility classes. Feeling more confident with both tools and looking forward to the next challenges ahead! Thank you so much, Hitesh Choudhary, sir for your guidance and inspiration! Your content has been a game-changer in my learning journey. #ReactJS #TailwindCSS #ReactRouter #WebDevelopment #100DaysOfCode #FrontendDevelopment #JavaScript

🚀 Excited to introduce my latest project: a Simple To-Do List Application built with React! 📋✨ Check it out ! ⬇ https://lnkd.in/gSVV3ufc 🔹 Effortless task management 🔹 Sleek and intuitive UI 🔹 Real-time updates 🔹 Easy to customize Whether you're juggling multiple projects or just need to keep track of daily tasks, this app has got you covered. Check it out and let me know your thoughts! #React #WebDevelopment #TodoList #OpenSource #Productivity #Coding #FrontendDevelopment #JavaScript

𝑪𝒓𝒆𝒂𝒕𝒊𝒏𝒈 𝒂 𝑩𝒂𝒄𝒌𝒈𝒓𝒐𝒖𝒏𝒅 𝑪𝒐𝒍𝒐𝒓 𝑪𝒉𝒂𝒏𝒈𝒆𝒓 𝒊𝒏 𝑹𝒆𝒂𝒄𝒕: 𝑺𝒕𝒆𝒑-𝒃𝒚-𝑺𝒕𝒆𝒑 𝑮𝒖𝒊𝒅𝒆🚀 🎨 As I dive deeper into JavaScript and React with guidance from Hitesh Choudhary’s tutorials, I recently built a simple Background Color Changer. This small project is a great way to practice core React skills like: State Management: Storing and updating the background color. Event Handling: Changing the color with a button click. Random Color Generation: Adding a dynamic, fun element to the app. Each click brings a new background color, making the learning process visually rewarding and hands-on. 💡 This project was a great start to building interactive apps and understanding how React works behind the scenes. On to more projects! 💻 #React #JavaScript #LearningByDoing #WebDevelopment #TechJourney

Sharing My React Project: Explore Movies! [https://lnkd.in/dFjRYXeB] ✨ I'm excited to share my latest project - a movie website built with React! This app allows users to: Browse popular and top-rated movies View detailed information about each movie, including cast and crew I used React to manage the UI and data fetching, making the experience dynamic and user-friendly. This project was a great way to practice my React skills and explore building a full-fledged application. Check out the live demo! [https://lnkd.in/dFjRYXeB] #react #js #html #css #movieDB #webdevelopment #webprograming