Prathu Dwivedi’s Post

Hello Connections Day 13 of #100DaysOfCode – Built a Wikipedia Search App & Random Joke Generator! 🚀😂 Today was a productive day of coding! I developed two exciting projects using JavaScript: Wikipedia Search App 🌐 Implemented a search feature that interacts with the Wikipedia API, allowing users to search for articles and display results dynamically. Practiced API calls using the GET method and worked on dynamically updating the DOM with search results. Random Joke Generator 🤣 Created a fun app that fetches random jokes from an API and displays them with just a click. This project helped me practice more with API integration and making user-friendly interfaces. Both projects gave me great hands-on experience with working on APIs, asynchronous JavaScript, and improving my UI/UX skills. Feeling excited for what’s next! 💪 #Consistency #NxtWave #JavaScript #100DaysOfCode #WebDevelopment #WikipediaSearch #RandomJokes #APIs #FrontendDevelopment #CodingJourney #FullstackDeveloper

☀️ Day 15 of #LearnWithYash React: Question 5 📝 15 Days series completed successfully 🚀 Reflecting on these 15 days, it's been an incredible journey exploring React! From mastering state management to designing elegant UIs, each project has been a valuable learning experience. Ending with this interactive quiz app felt like the perfect way to tie it all together. Project: Interactive React Quiz App 🌟 Designed a quiz app to test React knowledge with dynamic questions, real-time scoring, and stylish UI using Tailwind CSS, including dark mode. What I Learned: 🔄 Managing State 📝 Dynamic Rendering 🎨 Fancy UI 🌑 Dark Mode Support 📱 Responsive Design If you want to dive deeper into React or have any questions, feel free to DM me! #ReactJS #QuizApp #WebDevelopment #JavaScript #Frontend #CodingJourney #ReactChallenge #LearnReact #TailwindCSS

Today's Learning Highlight: useState and onClick in NextJs! 🚀 Today in our class, we dove into React fundamentals, focusing on useState and onClick functions—key tools for creating dynamic and interactive user interfaces. 🧩 useState: A powerful React hook for managing state within a component. It lets us store and update data over time, keeping our app responsive to user actions. Example: Using useState, I can store a counter value and update it each time a button is clicked. 💻 onClick: An event handler that lets us perform actions based on user clicks, enhancing interactivity. Example: By setting an onClick function on a button, we can increase the counter with every click. Learning these concepts is a step closer to building seamless and engaging user experiences! #React #WebDevelopment #LearningJourney #JavaScript #FrontendDevelopment

💬 Introducing my meticulously crafted Todo App in React.js, a culmination of advanced concepts honed through hands-on learning. With comprehensive CRUD functionality, state management with Context API, and responsive design, this project offers a robust learning experience. Implemented features include local storage integration, Advanced UI components to enhance user interaction, and unit testing to ensure code reliability. You can elevate your React skills by exploring this project. 💻 ✔ #javascript #reactjs #contextapi #tailwindcss #html #vite #vscode

🎊 Happy to share my latest achievement! I recently developed a TO-DO List application in React for the management of daily tasks. 🚀 This application allows you to add, edit, mark as completed and delete tasks in a smooth interface. 💻 It's simple and efficient to stay organized. 📝 ☀ i developed this application to deepen my React skills and gain a beter understanding of state management in a component-based app. It also gave me the opportunity to work on UI design and the business logic behind a functional application. 💡 🔧 Technologies used : - React.js for building interactive interfaces - JavaScript ES6+ for the app logic - CSS3 for the design - LocalStorage For client-side data persistence 🖇 Curious to check out the code?Here's the link: https://lnkd.in/dSvgBgER Feel free to leave feedback or contribute! 😀 #react #webdevelopement #coding

I'm excited to share my latest portfolio project - a React.js with TypeScript ToDo App, which is finally finished. React ToDo App is a user-friendly task management application designed to help users stay organized and productive. Technologies I used: – React functional components; – useEffect, useState, useContext, useDispatch, useRef, custom hooks; – useReducer for a better understanding of what is under the hood of Redux, refactored for Redux later; – Local storage, refactored to use fetch from an API; – GET, DELETE, PATCH, POST methods for working with the API; – Promises, refactored to async/await syntax; – TypeScript types and enums; – React Transition Groups. Key features: - adding todos; - deleting todos (individually or all completed); - toggling a todo status (individually or all at once); - editing a todo; - filtering by status; - counting unfinished todos; - showing a loader while waiting for the API response; - displaying an error notification in case of an API error; - smooth animations. LIVE - https://lnkd.in/eJB9zayg GitHub - https://lnkd.in/ex7Jsgka More features on my site - https://lnkd.in/eCuZuywa I'm very proud of how this project turned out and the skills I honed along the way. Check it out and let me know what you think! #react #typescript #javascript #webdevelopment #frontend #portfolio #coding #frontenddeveloper #reactjs #girlswhocode #womeninstem #womenintech

#Day1 of the #25PostMethod 🚀 Today, the main character of this post is React! 🚀 So, what's React? Essentially, it's a JavaScript library that helps you craft user interfaces for your websites or web apps. 💻✨ One of the things I like about React is its component-based approach. It's like having a toolkit of building blocks, allowing you to break down your UI into smaller, reusable pieces. It's coding made fun - like piecing together a puzzle where everything just clicks into place! 🧩 Plus, it keeps your codebase organized and clean. And here's a useful trick for you: React DevTools! If you're not already using it, you're missing out! React DevTools is like having X-ray vision for your React apps: inspecting, tracking, and debugging apps with ease. Here's a quick guide to get started: - Get the React DevTools for your browser (it works with Chrome, Firefox, and Edge). - Open up your browser's tools (just right-click on a web page and pick "Inspect"). - Go to the "React" tab. - Explore around - you can check out different parts of your app and even change them right there! Trust me, once you start using React DevTools, you'll love it! 🔍 So, if you're curious about making websites or apps look awesome or just want to learn something new, React is worth checking out! Got any thoughts? Feel free to share them below. We're all about learning together here, so don't be shy to say "Hi!" 🌟 #ReactDevelopment #TechCommunity #DevToolsTips

🚀 Just finished building a dynamic and responsive quiz app using React.js! 🎉 This project has been a fantastic learning experience, and I'm excited to share some of its features: ✅ Timed quizzes with countdown functionality for each question ✅ Real-time score tracking with immediate feedback on answers ✅ Dynamic rendering of questions and options ✅ Fully responsive design to adapt seamlessly across devices ✅ Efficient state management using the React Context API and useState/useEffect hooks for smooth user interaction Check out the GitHub repo: https://lnkd.in/gRUDk6bd Try the live demo: https://lnkd.in/gf-FG73g I'm thrilled with the results and how this project showcases my ability to create interactive web applications with real-time feedback and score tracking. 💻 #React #WebDevelopment #JavaScript #Frontend #Tech #Coding #QuizApp #ReactContext #UseEffect #ResponsiveDesign

🚀 Yesterday, I unlocked the power of React's useForm hook—and it’s a game-changer! 🚀 If you've been using useState to manage forms, it’s time to rethink your approach. Here’s why: 1. Centralized Form State Management Handling each form input with useState can get messy fast. With useForm, you manage your entire form’s state in one place—clean, efficient, and easy to maintain. 2. Built-in Validation Made Simple Forget the hassle of manual validation. useForm lets you add validation rules directly in the register function. Need an email to be required? Just add { required: true }—and you’re done. Plus, you get instant access to validation errors with formState.errors. 3. Effortless Error Handling Tired of writing extra code to manage form and API errors? useForm makes it easy. Whether it’s a form validation error or an API response issue, you can handle it all in one place using setError—and give your users clear, real-time feedback. 4. Optimized Performance for Complex Forms Every state change with useState can trigger a re-render, which can slow down your app. useForm minimizes unnecessary re-renders, making your forms faster and smoother—especially when dealing with large datasets or complex validation rules. 5. Simplified Form Submissions No more writing extra functions to gather and validate form data before submission. useForm’s handleSubmit does it all—collects data, runs validation, and executes your custom logic in one streamlined process. 🔥 Switching to useForm simplified my code and made my forms more robust, performant, and user-friendly. It’s a must-try for anyone building forms in React! 🎯 Ready to level up your form handling? Let’s discuss—drop your thoughts below! #ReactJS #WebDevelopment #useForm #JavaScript #FrontendDevelopment #CodingTips #DevCommunity #ReactHooks #FormHandling #WebPerformance #CodingBestPractices #DeveloperLife #TechTrends

🚀 Excited to Share My Progress in Next.js! 🚀 I'm excited to showcase my work, as I recently practiced building a basic web application using Next.js. In this project, I created a basic structure with: A Navbar component for easy navigation. A footer that includes my name . Dedicated pages for Home, About, Contact-us, and Services . Utilized Link components for seamless routing between pages. Key Takeaways: Understanding the component-based structure of Next.js and how to create reusable components. Implementing routing with Next.js for smooth page transitions. Exploring the use of Link for efficient navigation within the app. I’m looking forward to diving deeper into Next.js and exploring more features, including responsive design in future updates! #NextJS #WebDevelopment #LearningJourney #FrontendDevelopment #Programming #MuneebaArshad #Coding #Tech #JavaScript #UIUX #SoftwareDevelopment