Just built a GitHub Repo Explorer using Next.js! As part of my hands-on learning, I developed a project that helps users discover and explore popular GitHub repositories with a clean and interactive UI. ✨ Key Features: • Search repositories with language filters (JavaScript, TypeScript, Python, etc.) • Sort by stars, forks, and latest updates • Save favorite repositories using local storage • Interactive modal for detailed repo view • Smooth animations and loading experience Powered by GitHub API: The application integrates with the GitHub REST API to fetch real-time repository data, enabling dynamic search, filtering, and sorting based on live information. Development Tools Used: Next.js | React | Tailwind CSS | GitHub REST API 🌐 Live Demo: https://lnkd.in/d93uaC5N 💻 Source Code: https://lnkd.in/d8Q5jAJ3 This project helped me strengthen my frontend development skills, especially working with APIs, state management, and creating smooth user experiences. #NextJS #ReactJS #TypeScript #JavaScript #TailwindCSS #FrontendDevelopment #GitHub #GitHubAPI
More Relevant Posts
-
🚀 Beginner JavaScript Practice Programs I’ve been improving my JavaScript fundamentals by working on basic logic-building programs 💻 Here are some concepts I practiced: ✔ Even / Odd Number ✔ Largest of 3 Numbers ✔ Calculator using Switch Case ✔ Grade System ✔ Palindrome Check ✔ Multiplication Table and more... This helped me strengthen my understanding of: 🔹 Conditional Statements 🔹 Loops 🔹 String & Number Operations 📌 Check out my code on GitHub: https://lnkd.in/gAJ36hfv I’m currently learning and building my skills step by step towards becoming a Full Stack Developer 🚀 #JavaScript #CodingJourney #Beginners #Learning #Programming #FullStackDeveloper
To view or add a comment, sign in
-
🚀 Day 36 of My Full Stack Development Journey Today I explored one of the most important concepts in JavaScript — Functions & Scope ⚡ Here’s what I learned today: 🔹 Functions – Reusable blocks of code 🔹 Functions with Arguments – Passing data into functions 🔹 Return Keyword – Getting values back from functions 🔹 Scope – Understanding where variables can be accessed 🔹 Global Scope, Function Scope, Block Scope 🔹 Lexical Scope – How functions access variables from parent scope 🔹 Solved 6 practice questions + 6 assignment questions 💻 These concepts helped me understand how to write cleaner, reusable, and more structured code. Step by step, building strong programming fundamentals 🚀 #FullStackJourney #WebDevelopment #JavaScript #LearningInPublic #100DaysOfCode #CodingJourney
To view or add a comment, sign in
-
🚀 Day 6/100 – Full Stack Developer Journey Today I explored one of the most important concepts in modern JavaScript: asynchronous programming. 📘 What I learned: - Promises in JavaScript - Promise states: Pending, Fulfilled, Rejected - async and await - Error handling with try...catch 💻 Practice: - Created and consumed Promises - Used .then() and .catch() for handling results - Rewrote Promise-based code using async/await - Implemented error handling with try...catch 🧠 Key Takeaways: - Promises make asynchronous code cleaner and easier to manage than traditional callbacks. - async/await provides a more readable, synchronous-like way to work with asynchronous operations. - Proper error handling is essential when working with async code. ⚠️ Challenge Faced: Understanding when to use .then() versus async/await took some practice, but both ultimately work with Promises. 💡 Example: below attached document 🔥 Next Step: Explore array methods like map(), filter(), and reduce(). #100DaysOfCode #JavaScript #AsyncAwait #Promises #WebDevelopment #FullStackDeveloper
To view or add a comment, sign in
-
🚀 Day 16 of My JavaScript Journey Today was a powerful learning day 💻🔥 I explored some core JavaScript concepts that are extremely important for real-world applications. ✨ Topics I Covered: 🔹 Synchronous vs Asynchronous code 🔹 How the JavaScript Event Loop works 🔁 🔹 Why Callback Hell is a problem 😵 🔹 Creating Promises using "resolve" and "reject" 🤝 🔹 ".then()", ".catch()", ".finally()" methods 🔹 Sequential vs Parallel Promise execution ⚡ 🔹 Comparison of Promise utility methods 🔹 Real-world example: Food Delivery App (Zomato Clone 🍔) 🔹 API fetching using Promises 🌐 🔹 Error handling patterns 🚨 💡 Key Learning: Understanding asynchronous JavaScript is a game-changer 💯 Concepts like the Event Loop and Promises help write cleaner, more efficient, and scalable code. 🍽️ The food delivery app example helped me understand how multiple tasks like ordering, payment, and delivery can run efficiently using async concepts. 🔥 Growing step by step every day! Consistency is the key 🔑 #JavaScript #WebDevelopment #CodingJourney #DaysOfCode #AsyncJS #Promises #Learning #DeveloperLife
To view or add a comment, sign in
-
-
I have just noticed that Library Engineers write code differently than us. Tanstack Query uses OOP, behind the scene and utilizes PU/SUB design pattern. Also, Prisma ORM make use of OOP and utilizes Singleton Design pattern and method chaining. The question now becomes, WHY WE DO NOT USE OOP and advance design pattern in our code? IS IT DIFFICULT TO IMPLEMENT OR LEARN? Not really, it's just that, the guy who taught you on YOUTUBE has a MILLION SUBSCRIBERS and you somewhat equated that with experience and religiously trusted his coding style. #cleancode #javascript #oop On youtube, we teach what will hook you and keep you watching for longer in order for us to get paid not for you to learn. If a new library is trending, we all get on it and teach others to get more views. Now that I am building my own React JS library, I am starting to notice that, the actual SENIOR ENGINEERS uses OOP and design patterns. #nextjs #reactjs #coding #programing #ai I have created a YouTube course where I use OOP in next js to create a library that can generate a form in seconds. I have implemented OOP and Fluent API engineering techniques the same way as Prisma , Tanstack and React hook form engineers would do. #fyp #designpatterns I'm 100% sure that you have never seen a senior engineer coding style, this will be your first time, LINK TO THE VIDEO: https://lnkd.in/d2KvHAsX
Lets Create a React JS Library like React Hook Form from Scratch
https://www.youtube.com/
To view or add a comment, sign in
-
🚨 Stop Wasting Time Learning React Randomly… Most developers don’t fail because React is hard… They fail because they learn it without a roadmap. This cheatsheet = everything you actually need 👇 ✔ Core concepts (JSX, Virtual DOM, Components) ✔ Hooks that matter (useState → useEffect → useMemo) ✔ Real-world patterns (Routing, Forms, API calls) ✔ Performance tricks (Memoization, Code Splitting) ✔ Testing + TypeScript + Advanced Features 💡 If you master just these → you’re already ahead of 80% developers. The difference between: ❌ “I know React” vs ✅ “I can build real apps” …is structure. And this is the structure. 🔥 Save this post — this is your React roadmap 💬 Comment “REACT” and I’ll share a complete roadmap + resources 🔁 Repost to help other developers #reactjs #webdevelopment #frontenddeveloper #javascript #mernstack #coding #programming #learncoding #devcommunity
To view or add a comment, sign in
-
-
UPDATE: Added 10 more advanced react machine coding questions to my 750 ⭐ GitHub repository, to make it more useful for developers preparing for frontend interviews (Link in the comment) New additions include: 🔹Nested Comments 🔹File Directory Explorer 🔹Kanban Board 🔹Multi-Select Dropdown Component 🔹Shopping Cart 🔹Stepper Component 🔹Typeahead with Debounce 🔹Undo / Redo State History 🔹Virtualized List for large datasets These problems focus on real scenarios where the goal is not just writing code but thinking about component architecture, state management, performance optimization, handling edge cases The repository has now crossed 750+ GitHub stars, which is encouraging to see. Glad that it is helping developers practice practical frontend development #reactjs #javascript #softwaredevelopment #technology #programming #machinecoding #github #opensource #ig
To view or add a comment, sign in
-
-
🚀 Diving Deeper into TypeScript After 4 years of working with JavaScript and Three.js, I decided to take TypeScript more seriously and go beyond the basics. Here's a small but complete Task Manager project I built to practice: ✅ 100% TypeScript (Strict Mode) ✅ Object-Oriented Programming (Inheritance, Encapsulation, Polymorphism) ✅ Design Patterns: Singleton & Observer ✅ Native Drag & Drop API (no external libraries) ✅ Modular architecture with ES Modules This is just a practice project to strengthen my TypeScript and OOP skills. Hope it helps someone who is starting with TypeScript or wants to see real OOP implementation. 🧩 GitHub Repository: https://lnkd.in/dgeMu-jk mohammad hashemi Thank you for good explanation in typescript course. #TypeScript #OOP #JavaScript #ThreeJS #FrontendDevelopment #typescript #frontend #threejs
GitHub - shahbaziparisa/ts-oop-task-manager: TypeScript OOP Task Manager with Drag & Drop github.com To view or add a comment, sign in
-
TypeScript 7.0 Beta feels like a big shift ⚡ A Go-based compiler + parallel processing = massive build speed improvements. Same TypeScript experience, but way faster under the hood. This could seriously improve developer productivity at scale. https://lnkd.in/dqeXcWCH #TypeScript #WebDevelopment #JavaScript #FullStack #SoftwareEngineering #DeveloperTools #Programming #BuildInPublic #Nextjs #DevCommunity
To view or add a comment, sign in
-
🚀 Built something while learning… Recently, I created my own npm package 👉 https://lnkd.in/gUebwEmq Honestly, the goal wasn’t to build something big — I just wanted to understand: 👉 What exactly npm packages are 👉 How they work behind the scenes 👉 And how we can create & publish one While working with Redux Toolkit, I noticed we repeat the same setup again and again in every project. So I thought — why not simplify it? That’s how rtk-quickstart came into the picture 💡 It’s a small utility to: • Reduce Redux setup time • Avoid repetitive boilerplate • Kickstart projects faster Still learning, still improving — but building this gave me a much clearer understanding of how packages actually work. If you’re also exploring React + Redux, feel free to try it and share feedback 🙌 #LearningInPublic #ReactJS #ReduxToolkit #JavaScript #FrontendDevelopment #OpenSource
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