Day 7 — Today I turned a single-page thing into an actual app with navigation. React Router. Sounds simple. Has more depth than I expected. Built a 3-page mini app — Home, About, and a Dashboard. Added a protected route that redirects to login if you're not authenticated. Felt very "real project" energy. useParams is one of those things you don't appreciate until you need dynamic URLs. Once you do, you can't imagine building without it. Nested routes took me a bit to wrap my head around. But once I understood the Outlet component, it all made sense — it's like a placeholder for child routes. One week in and I can already build something that looks like a real web app. Wild. What's your favourite thing about React Router? #reactjs #reactrouter #webdevelopment #frontenddeveloper
Building a Real App with React Router in a Week
More Relevant Posts
-
Your Nuxt app is slower than you think. Here's my exact optimization checklist that took a app from 3.2s → 780ms load time 👇 Which tip will you implement first? #NuxtJS #VueJS #WebPerformance #FrontendDevelopment #TypeScript #WebDevelopment
To view or add a comment, sign in
-
Most React apps do not fail because of missing features. They fail because the experience makes users think too much. While building my Estate Listing App, I noticed something simple but important: People do not want to “figure out” a property platform. They want to move through it smoothly. If the flow is unclear, even a good design starts feeling heavy. So I focused on the things that actually reduce friction: → cleaner property browsing flow → simpler page structure → easier decision-making for users → less confusion between listings, details, and actions Nothing flashy. Just a better path through the app. And that changed the whole feel of it. Curious — what is one thing you think property-style apps get wrong most often? #ReactJS #FrontendDevelopment #UIUX #WebDevelopment #JavaScript #BuildInPublic #UserExperience
To view or add a comment, sign in
-
**🚨 The #1 Performance Killer in React Apps 🚨** You know the feeling: your React app is slow, and you can't figure out why 🤔. It's not the framework, it's not the library, it's not even the code 🙅♂️. It's the **race conditions** that are silently killing your app's performance 🏃♂️. **What are race conditions?** 🤔 They occur when multiple tasks are trying to access the same resource, causing conflicts and inconsistencies 🤯. **How do we solve this?** 🤔 We use **debouncing logic** to limit the number of requests and prevent conflicts 🚫. **Before:** 📉 Your app is slow, and users are frustrated 😠. **After:** 🚀 Your app is fast, and users are happy 😊. → We need to identify the performance bottlenecks in our app → We need to use debouncing logic to limit requests → We need to test and optimize our app for better performance **So, what's the takeaway?** 💡 By using debouncing logic, we can prevent race conditions and improve our app's performance 📈. **What's your favorite way to optimize React app performance?** 💬 #ReactPerformance #DebouncingLogic #RaceConditions
To view or add a comment, sign in
-
-
Most Flutter apps break right after they launch. The reason is usually a tiny mistake with BuildContext. It works fine in testing but fails in the real world. Here is how to avoid the "Context Trap": 1. Never use context after an "await." The screen might be gone. 2. Always check if the widget is "mounted." This stops 90% of crashes. 3. Do not save context in a class variable. It causes memory leaks. 4. Use "context.read" inside buttons. It saves your user's battery. 5. Stop passing context to your data layer. It makes code messy. 6. Use the right context for dialogs. The wrong one hides your pop-up. I build apps that stay fast and stable under pressure. Want a pro-grade app for your business in 2026? Send me a DM today. #Flutter #FlutterDev #MobileApp #DartLang #TechTips
To view or add a comment, sign in
-
Flutter gives you multiple image widgets. any_image gives you one. If you've built more than one Flutter app, you've probably written something like this: source.endsWith('.svg') ? SvgPicture .network(source) : CachedNetworkImage(imageUrl: source) And then added a check for assets. And then copy-pasted your loading and error widgets from the last project. any_image is built around a proper resolver pipeline that handles the cases string matching can't. Clean API, correct resolver, designed to be extended. It's just v0.0.1. Early, but built to last. Link in the comments. Flutter Dev #Flutter #FlutterDev #Dart #OpenSource #MobileDevelopment Claude
To view or add a comment, sign in
-
🚨 Why Your React App Re-Renders So Much (and How to Fix It) Unnecessary re-renders are one of the most overlooked performance issues in React apps — and they can silently kill your app’s efficiency. In this video, I break down: 🔹 How React rendering actually works 🔹 Why child components re-render unexpectedly 🔹 The role of props (primitive vs object vs function) 🔹 When React.memo helps — and when it doesn’t 🔹 Practical patterns to avoid wasted renders If you're building scalable React applications, understanding this is non-negotiable. 💡 This isn’t just theory — it’s the foundation of writing high-performance, production-grade React code. 🎥 Watch the full video and level up your React optimization skills. #ReactJS #WebDevelopment #Frontend #JavaScript #SoftwareEngineering #Performance #ReactTips https://lnkd.in/gq68Bysa
Why Your React App Re-renders So Much ⚠️ (React.memo Explained Clearly)
https://www.youtube.com/
To view or add a comment, sign in
-
As a beginner which projects u should choose to start. For Frontend: • Lexicon App • Pic Editor App • Currency Converter For Backend: • Authentication • To Do List • Blogging App
To view or add a comment, sign in
-
-
Imagine a user opens your app, hits an error, and just closes it. No report, no DM, nothing. You're sitting there thinking everything is fine. I added error monitoring to my book review app. Sentry on both the React frontend and Node/Express backend. The setup was maybe 15 minutes total. Now the moment something breaks in production, I get notified. I also added source maps on the frontend side, so when an error comes in, I'm looking at my actual TypeScript instead of minified code I can barely read. (yes, those are test errors in the screenshot — the setup is ready for when real ones show up) Most developers don't find out something is broken until a user complains. And users rarely complain, they just stop using your app. Error monitoring is how you stay ahead of that. #buildinpublic #backend #nodejs #react #softwaredeveloper
To view or add a comment, sign in
-
-
Today I tried converting my Flutter mobile app into a web app… and got hit with this 👇 “Blocked by CORS policy” 👾 The same APIs that worked perfectly on mobile suddenly stopped working on web. That’s when I learned: 👉 CORS only applies to browsers, not mobile apps After digging deeper, I realized: - It’s not a frontend issue - It’s not a Flutter issue - It’s a backend configuration problem The server needs to explicitly allow requests using headers like: Access-Control-Allow-Origin 💡 Key takeaway: What works in mobile doesn’t always work on web — especially when browsers enforce security rules Debugging this taught me more about how frontend, backend, and browsers actually interact. #Flutter #WebDevelopment #CORS #APIs #LearningInPublic #DevLife
To view or add a comment, sign in
-
-
In Next.js App Router, what is the purpose of the loading.tsx file placed inside a route folder (e.g., app/dashboard/loading.tsx), and how does it work? loading.tsx is just Next.js automatically wrapping your page in a <Suspense> boundary with your loading UI as the fallback. So when you create loading.tsx, Next.js does this for you automatically: <Suspense fallback={<Loading />}> // ← your loading.tsx <Page /> // ← your page.tsx </Suspense> You don't have to write the Suspense wrapper yourself — Next.js handles it. 😎 #nextjs
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