🚀 Just Built: React Weather App (React-P1) Excited to share my latest project — a Weather App built using React! 🔧 Tech Stack: • React (Hooks: useState, useEffect, useCallback) • Tailwind CSS for modern UI styling • OpenWeather API for real-time weather data • Vite for fast development and build 🌦️ Features: • Search weather by city name • Real-time temperature, humidity, wind speed and conditions • Clean but not responsive UI ( I'll make it) • Error handling for invalid city searches This project helped me strengthen my understanding of API integration, React hooks, and component-based architecture. 🔗 GitHub Repo: https://lnkd.in/d6FzujCH 🌐 Live Demo (Vercel): https://lnkd.in/dZvTzXGM Would love your feedback and suggestions to improve it further! 😊 #ReactJS #WebDevelopment #FrontendDeveloper #TailwindCSS #OpenWeatherAPI #JavaScript #MERNStack #StudentDeveloper
More Relevant Posts
-
🚀 Just Built a Weather Dashboard App while learning Vue.js! 🌦️ As part of exploring Vue.js, I built a small project to strengthen my frontend skills and understand how different frameworks can work together. This Weather Dashboard App fetches real-time weather data from an external API (OpenWeatherMap) and displays it in a clean, responsive UI. It was a great hands-on experience working with APIs, UI components, and modern frontend tools. 🎥 Check the recording to see the app in action! 🔗 GitHub Repository: https://lnkd.in/dPb9mS-c 💡 Tech Stack • Vue.js • React • JavaScript • External Weather API • Responsive UI Always excited to keep learning and building new things! Feedback and suggestions are welcome. 🙌 #VueJS #ReactJS #JavaScript #FrontendDevelopment #FrontendDeveloper #WebDevelopment #WeatherApp #OpenWeatherMap #CodingProjects #DeveloperJourney #BuildInPublic #TechProjects #GitHubProjects #LearnByBuilding #UIDevelopment #WebApps #SoftwareDevelopment
To view or add a comment, sign in
-
🚀 Just Built a Todo App with React + Tailwind I recently completed a Todo application where I focused on strengthening my understanding of: • React state management (useState) • Lifting state up for proper component communication • Controlled inputs • Conditional rendering • LocalStorage integration for persistence • Clean UI design using Tailwind CSS Instead of just building a basic form, I structured the app properly by separating concerns: Form handling component Todo display component Centralized state management Persistent storage sync with useEffect This project helped me move beyond “it works” thinking and start focusing on architecture and clean component design. Source Code (GitHub): 👉 https://lnkd.in/gf3_hHg4 Next steps: Implement better state management patterns Always building. Always improving. #ReactJS #FrontendDevelopment #WebDevelopment #JavaScript #TailwindCSS #LearningInPublic #OpenSource
To view or add a comment, sign in
-
-
🚀 Just Built: NoZeroDays — A Habit Consistency App I’ve started building and sharing one project every week. This week, I built NoZeroDays, a productivity app that helps track daily goals and maintain streak consistency. 🔹 The Idea The concept is simple: never let a day go by without progress. Even 1% counts. 🔹 Features ✔ Add and manage daily goals ✔ Track consistency streaks ✔ Persistent data using LocalStorage ✔ Multi-page navigation using React Router ✔ Clean and responsive UI with Tailwind CSS 🔹 Tech Stack • React.js • JavaScript (ES6+) • React Router • Tailwind CSS • LocalStorage 🔹 What I Learned Structuring a React project properly Managing state efficiently Handling side effects and data persistence Improving UI consistency Links in first comment 👇 Feedback is always welcome 🙌 #React #WebDevelopment #BuildInPublic #FrontendDeveloper #JavaScript
To view or add a comment, sign in
-
Hi everyone! 👋 🚀 Built a Movie Search Web App using React - UsePopcorn-React-web-app I’m excited to share my latest project : A React-based web application that fetches movie data using the OMDB API. ✨ Key Features: • Navigation bar with movie search functionality • Dynamic search results display • Instant movie details view • Release date, runtime, genre, IMDb rating, and description • Rate movies (out of 10 ⭐) • Add/remove movies from a watched list • Track total watched movies • Clean UI with left panel (movie list) and right panel (movie details) 🛠 What I learned: • Working with APIs • React State & Props • useState & useEffect Hooks • Conditional Rendering • List Rendering • Component Functions • Children Props • Error Handling This project strengthened my understanding of building interactive React applications. 🔗 GitHub Repository: https://lnkd.in/gymR4fHm I’d love to hear your feedback or suggestions! #React #WebDevelopment #FrontendDevelopment #JavaScript #API #LearningJourney
To view or add a comment, sign in
-
Built a simple Todo List App using React and Tailwind CSS. Live Demo: https://lnkd.in/g9HBSRe4 GitHub: https://lnkd.in/g8ZxJn-t Features: • Add, edit, and delete tasks • Mark tasks as completed • Data persistence using LocalStorage This project helped me practice React Hooks (useState, useEffect) and improve my frontend development skills. More projects coming soon! 🚀 #React #TailwindCSS #JavaScript #WebDevelopment #LearningInPublic
To view or add a comment, sign in
-
-
🚀 Just built a Food Reel Web App using the MERN stack! Features include short food videos, like & save functionality, food partner registration, and video uploads powered by ImageKit. 📚 What I learned: • Building a full-stack MERN application • Handling video uploads with Multer & ImageKit • API integration & state management in React • Authentication and user interactions • Deploying frontend & backend Link:- https://lnkd.in/gX6WYBVj GitHub :- https://lnkd.in/gGgSsEMg #MERN #ReactJS #NodeJS #FullStackDeveloper
To view or add a comment, sign in
-
⚡ One Small Change in Next.js That Can Dramatically Improve Performance While revisiting some concepts in Next.js, I realized something interesting that many developers (including me earlier) often overlook. When working with Next.js, it’s easy to end up writing most components with ""use client"" and building the application just like a traditional React app. But here’s the catch 👇 If most of your components are Client Components, the browser has to download and run a lot more JavaScript, which can impact the initial page load and performance. That’s where the real power of Next.js Server Components comes in. 💡 Key Idea: Separate responsibilities • Server Components → Best for data fetching and rendering static UI • Client Components → Only for interactivity like state, effects, and event handlers By keeping only the necessary components as client components and moving the rest to the server, you can reduce the client-side bundle size and improve performance. Sometimes the biggest improvements come not from adding more code, but from structuring components the right way. Curious to know — how are you currently structuring Server vs Client Components in your Next.js projects? #NextJS #ReactJS #WebDevelopment #FrontendDevelopment #PerformanceOptimization #SoftwareEngineering
To view or add a comment, sign in
-
💻 React Calculator App – Built with React + Vite Excited to share my new project — a fully functional Calculator built using React. 🔹 Built with React + Vite 🔹 Clean and responsive UI 🔹 Handles basic arithmetic operations 🔹 Component-based architecture This project helped me understand: • State management in React • Handling button click events • Updating UI dynamically • Project deployment using Vercel 🔗 Live Demo: ( https://lnkd.in/gv7S3Jdm) GitHub:(https://lnkd.in/gFMVd7gs) I’m consistently building and improving every day 🚀 Feedback is always welcome! #React #FrontendDeveloper #WebDevelopment #100DaysOfCode #JavaScript
To view or add a comment, sign in
-
🚀 Just built a **Modern Weather Dashboard Web App**! I recently developed a fully responsive weather application using **React, TypeScript, TailwindCSS, and Vite**. 🌦 Features: • Dynamic animated weather backgrounds • Hourly weather trend visualization • 5-day forecast • Air Quality Index (AQI) monitoring • Sun & Moon tracker • Lifestyle insights based on weather conditions • Beautiful glassmorphism UI ⚙ Tech Stack: React • TypeScript • TailwindCSS • Framer Motion • OpenWeather API • Vercel 🌐 Live Demo https://lnkd.in/gwetgVsz 💻 GitHub Repository https://lnkd.in/gQRm5ne4 I’d love feedback from the community! 😊 <~BEST VIEW FOR USE DESKTOP VIEW~> #react #typescript #webdevelopment #frontend #weatherapp #javascript #tailwindcss
To view or add a comment, sign in
-
🌤️ Just launched my Weather App built with React! This project was a great way to dive deeper into React fundamentals while building something practical. The app lets users search for real-time weather data by city and displays: 🌡️ Current Temperature 💧 Humidity Levels 🔼 Max & 🔽 Min Temperature 🌬️ Feels Like Temperature Key learnings from this build: ✅ Component-based architecture ✅ State management with React hooks ✅ API integration & data fetching ✅ Responsive UI design Shoutout to the React community for the amazing resources! Open to feedback and suggestions for improvements. 🚀 #ReactJS #WebDevelopment #JavaScript #FrontendDevelopment #ProjectShowcase #LearningJourney #100DaysOfCode
To view or add a comment, sign in
-
Explore content categories
- Career
- Productivity
- Finance
- Soft Skills & Emotional Intelligence
- Project Management
- Education
- Technology
- Leadership
- Ecommerce
- User Experience
- Recruitment & HR
- Customer Experience
- Real Estate
- Marketing
- Sales
- Retail & Merchandising
- Science
- Supply Chain Management
- Future Of Work
- Consulting
- Writing
- Economics
- Artificial Intelligence
- Employee Experience
- Workplace Trends
- Fundraising
- Networking
- Corporate Social Responsibility
- Negotiation
- Communication
- Engineering
- Hospitality & Tourism
- Business Strategy
- Change Management
- Organizational Culture
- Design
- Innovation
- Event Planning
- Training & Development