venkatesh S’ Post

This template is for Next based web applications using Redux store and App Router configuration. This template has tests for React components, reducers, hooks. There is a basic Promise resolver middleware example. https://lnkd.in/dHWYz9UU

How convert a Blazor Web App and a .NET Web API into a .NET Aspire project See the source code in this github repo: https://lnkd.in/dFa4Cmr6

When you add Redux to a Next.js ( app folder ) you might face some challenges when trying to wrap {children} in the layout file. The error message could recommend using a client component. Indicate that the layout file cannot be a client component (root layout). To resolve this issue you can create a file named provider.js. Utilize it as a provider, on the client side. 1. Start by making a file called provider.js in your project folder. 2. In provider.js bring in your Redux store and the Provider component from react redux. 3. Create a client component named ReduxProvider that accepts {children} as an argument. 4. Within ReduxProvider wrap {children}, with the Provider component while passing in your Redux store. Now, you can use the ReduxProvider component to wrap {children} in your layout file By following this method you guarantee that all components have access to the Redux store while also meeting Next.js server side rendering criteria. #redux #reduxtoolkit #nextjs #statemanagement #clientcomponent #servercomponent #nextjs14

Curious about the React packages available for Databutton to work with? 💜 Just ask the Agent with a simple prompt like: “What React packages do you have access to?” Currently, we support all the essential/popular packages needed to write the frontend of your web apps. If you need a specific package that's not available, we're always open to adding more. Just let us know! 🫡 Our latest addition is the Recharts package, which lets you build slick plots for your dashboard. Check out the short GIF 👇

This is a good way to use redux with Next Js app router architecture. In case you are using redux toolkit, then make sure to return a function that creates a store eg. makeStore. And then create a store only if it’s not created in every client component using useRef react hook as recommend here https://lnkd.in/dW98g62t. But I don’t see any benefits of using redux with the app router architecture because we can’t do anything with the immutable data on the RSC(React Server Components). The react’s Context api is powerful enough for most of the cases to manage data on client component and to deal with the prop drill issue. I found this great tutorial on State Management using React Context Api, Redux Toolkit, zustand or jotai with Next Js app router architecture. https://lnkd.in/dZEkTynT #nextjs14 #frontendengineering #fullstackdevelopment #reduxtoolkit #nextjsapprouter

Day 88/100 of my Web Development journey 1. Learned about NextAuth.js for Autentication 2. Integrated Github,Google and Credential providers in my app 3. Now user can Sign in and Sign Out (Next Auth creates a session... so even if you reload the page, you will be signed in until you sign out from the website, which is a good thing to do ) Check out the repo here: https://lnkd.in/g6F2tUub #100DaysOfCode #WebDevelopment

Vite users: in your react, there is a plugin you can add to your config to make an area map of your build Edit to `vite.config.ts` and screen shot of results below: (I cropped out the src folder because it's a work app) 1/2 ```import { visualizer } from 'rollup-plugin-visualizer'; export default defineConfig({ plugins: [ react(), visualizer({ open: true }) // This will open a visualizer in your browser after build ],``` and you get this: 2/2

Is coding a desktop app different from coding a web app in terms of communication? WebApplication vs #DesktopApplication: Which is Better for You? Are you torn between creating a web application or a desktop application for your next project? 🤔 It's a common dilemma for developers, but fear not! Let's break it down and help you make an informed decision. Understanding the Basics When it comes to coding a desktop application, the focus is more on communicating with the operating system and local storage. On the other hand, web applications rely heavily... Read more: https://lnkd.in/gPgmuVvc

🌟Happy Weekend Fam🌟, This weekend let's deep dive into the Next.js App Router's routing mechanism. 🔗 Check out the article here: https://lnkd.in/gMZpGusK Understanding these routing enhancements can make a big difference in your Next.js applications. In this post, you'll find: ✅ An overview of routing in the Next.js app router application. ✅ Practical examples and code snippets to help you implement these routing techniques. ✅ Resources Links I'd love to hear your thoughts and feedback on this topic! Let's keep learning and growing together in the world of web development! 💻 #NextJS #AppRouter #Routing #DeveloperCommunity

Day 17 of #100DaysOfCode Today I created the frontend part of the goal app from the tutorial. tomorrow will add the backend to the frontend. and also use redux for state management.