Where can I listen to this podcast?

This podcast is available on 9 platforms including Apple Podcasts, Spotify, and more. You can also use the RSS feed directly.

Does this podcast accept guests?

Yes, this podcast regularly features guests.

Weekly Code Quickies

Claim This Podcast

by Norbert B.M.

5.0(1 reviews)

66 episodes

Updated Weekly

Accepts GuestsHas SponsorsLocation 🇺🇸

Podcast Overview

Weekly Code Quickies is a podcast designed for programmers and developers of all skill levels. Each episode is a bite-sized, quick-hit of valuable information and tips on a specific programming languages, back to front-end frameworks, best tools, emerging technologies, and best practices for working remotely. The podcast is perfect for those who are short on time but still want to stay up-to-date with the latest developments in the industry, including the latest tech news, new technologies, and gaming industry updates. <a href="https://norbertbmwebdev.substack.com?utm_medium=podcast">norbertbmwebdev.substack.com</a>

Language

🇺🇲

Publishing Since

9/28/2021

Visit Website View on Apple Podcasts RSS Feed

2 verified contact emails on file for Weekly Code Quickies

Pitch yourself as a guest, propose sponsorships, or reach out directly to the host.

See contact details

Recent Episodes

July 26, 2025

Build a Live Stock Price Tracker with React, Tailwind CSS & Alpha Vantage API

Looking to build your own real-time stock market tracker app? In this hands-on tutorial, we’ll use React, Tailwind CSS, and the Alpha Vantage API to create a sleek and functional live stock price tracker.Whether you’re a frontend dev or a beginner trying to get into finance tech, this is a project-based learning opportunity that teaches practical skills while building something useful.In this project, you'll learn how to:- Fetch live stock prices from an API using React hooks- Manage dynamic lists and user input- Display loading states and error handling- Style your app with Tailwind CSS for a professional lookPerfect for beginners and intermediate developers looking to boost their React skills!🛠️ What We'll Build* 🔍 A stock search bar with live suggestions* 💰 A dashboard showing real-time prices* 📉 Dynamic price color change (green/red)* 📱 Clean Tailwind-powered responsive UI* 🌐 API integration with Alpha Vantage (free key!)🚀 Technologies Used* React + Vite* Tailwind CSS* Alpha Vantage API (Get your key)* React hooks: useState, useEffect, fetch🧱 Project SetupbashCopyEditnpm create vite@latest stock-tracker --template react cd stock-tracker npm install npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -pTailwind Setup (tailwind.config.js):jsCopyEditcontent: [ "./index.html", "./src/**/*.{js,ts,jsx,tsx}", ],Tailwind in index.css:cssCopyEdit@tailwind base; @tailwind components; @tailwind utilities;🔗 API Setup with Alpha VantageSign up at AlphaVantage.co and grab your API key.Example fetch call:jsCopyEditconst fetchStockPrice = async (symbol) => { const res = await fetch(`https://www.alphavantage.co/query?function=GLOBAL_QUOTE&symbol=${symbol}&apikey=YOUR_KEY`); const data = await res.json(); return data['Global Quote']; };📊 Displaying Stock DataExample JSX:jsxCopyEdit<div className="p-4 bg-white shadow-md rounded"> <h2 className="text-xl font-bold">{stockName}</h2> 0 ? 'text-green-500' : 'text-red-500'}`}> ${stockPrice} ({priceChange}%) </div>🎨 UI Tips with Tailwind CSS* Use grid-cols-2 or flex justify-between for layouts* Add a search input with a dropdown using absolute, bg-white, z-10* Animate loading state with animate-pulse📱 Optional Enhancements* Save recent stock symbols to localStorage* Add a chart using Chart.js or Recharts* Show currency, volume, or market capSource Code:import React, { useState, useEffect } from "react"; // StockPrice component fetches and displays the price for a given ticker function StockPrice({ ticker = "" }) { const [price, setPrice] = useState(null); // Holds the fetched price const [loading, setLoading] = useState(true); // Loading state const [error, setError] = useState(null); // Error state useEffect(() => { // Fetch stock price from Alpha Vantage API const fetchStockPrice = async () => { try { setLoading(true); const apiKey = import.meta.env.VITE_ALPHAVANTAGE_API_KEY; // Uncomment and set your API key const response = await fetch( `https://www.alphavantage.co/query?function=GLOBAL_QUOTE&symbol=${ticker}&apikey=${apiKey}` ); if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`); const data = await response.json(); // Check if the API returned a valid price if (data["Global Quote"] && data["Global Quote"]["05. price"]) { setPrice(parseFloat(data["Global Quote"]["05. price"]).toFixed(2)); setError(null); } else { setError("Could not retrieve price for this ticker."); setPrice(null); } } catch (e) { setError(`Error fetching data: ${e.message}`); setPrice(null); } finally { setLoading(false); } }; fetchStockPrice(); // Call the fetch function when ticker changes }, [ticker]); return ( <div className="bg-gradient-to-br from-white via-gray-50 to-gray-200 shadow-lg rounded-xl p-6 m-2 w-full max-w-xs flex flex-col items-center border border-gray-200 hover:shadow-2xl transition-shadow duration-200"> {/* Display the ticker symbol */} <h3 className="text-xl font-bold mb-2 text-gray-800 tracking-wide uppercase letter-spacing-wider"> {ticker} </h3> {/* Show loading spinner while fetching */} {loading && ( <div className="flex items-center gap-2"> Loading price... </div> )} {/* Show error message if there is an error */} {error && {error}} {/* Show the price if loaded successfully */} {!loading && !error && price !== null && ( ${price} )} {/* Show message if no data is available */} {!loading && !error && price === null && ( No data available. )} </div> ); } // Main StockPriceTracker component manages the list of tickers and input export default function StockPriceTracker() { const [tickers, setTickers] = useState(["NVDA", "MSFT", "GOOGL"]); // Initial tickers const [input, setInput] = useState(""); // Input for new ticker // Add a new ticker to the list const addTicker = () => { const val = input.trim().toUpperCase(); if (val && !tickers.includes(val)) { setTickers([...tickers, val]); setInput(""); } }; return ( <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-gray-100 flex flex-col items-center py-12 px-4"> {/* App title */} <h1 className="text-6xl font-extrabold mb-8 text-gray-900 tracking-tight drop-shadow"> My Stock Tracker </h1> {/* Input and Add button for new tickers */} <div className="flex mb-8 w-full max-w-md"> <input className="border border-gray-300 rounded-l-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-400 w-full text-lg transition" type="text" value={input} onChange={(e) => setInput(e.target.value)} placeholder="Add ticker (e.g. AAPL)" /> <button className="bg-blue-600 text-white px-6 py-3 rounded-r-lg font-semibold hover:bg-blue-700 transition-colors duration-150 shadow" onClick={addTicker} > Add </button> </div> {/* Display StockPrice components for each ticker */} <div className="flex flex-wrap justify-center gap-6 w-full max-w-4xl"> {tickers.map((ticker) => ( <StockPrice key={ticker} ticker={ticker} /> ))} </div> </div> ); } Get full access to Norbert’s Web Dev School at <a href="https://norbertbmwebdev.substack.com/subscribe?utm_medium=podcast&utm_campaign=CTA_4">norbertbmwebdev.substack.com/subscribe</a>

July 8, 2025

Mastering React Router v7 with TailwindCSS & Vite – Complete Crash Course

In this guide, we’ll walk step-by-step through creating a fully functional React app using React Router v7, styled with TailwindCSS, and powered by Vite. This is your go-to tutorial for learning client-side routing in React — from setup to nested routes and 404 pages.📦 Technologies Used* React 19 (via Vite)* React Router v7.6.3* TailwindCSS 4.1+* Vite (for fast build + dev server)🛠️ Project Setup with Vite & TailwindCSSReact Router Crash Course: Step-by-Step GuideReact Router is the standard routing library for React. In this crash course, we’ll build a simple multi-page app using React Router v6+ and Vite. Let’s get started!1. Project SetupFirst, create a new React project using Vite:npm create vite@latest react-router-crash-course -- --template react cd react-router-crash-course npm install Install React Router:npm install react-router-dom 2. Project StructureOrganize your files as follows:src/ App.jsx main.jsx components/ Button.jsx Navigation.jsx pages/ HomePage.jsx AboutPage.jsx ContactPage.jsx ProductsPage.jsx ProductDetailPage.jsx NotFoundPage.jsx Dashboard/ DashboardLayout.jsx DashboardHome.jsx DashboardProfile.jsx DashboardSettings.jsx 3. Setting Up the RouterIn main.jsx, wrap your app with BrowserRouter:import React from "react"; import ReactDOM from "react-dom/client"; import { BrowserRouter } from "react-router-dom"; import App from "./App.jsx"; import "./App.css"; ReactDOM.createRoot(document.getElementById("root")).render( <BrowserRouter> <App /> </BrowserRouter> ); 4. Defining RoutesIn App.jsx, set up your routes:import { Routes, Route } from "react-router-dom"; import Navigation from "./components/Navigation"; import HomePage from "./pages/HomePage"; import AboutPage from "./pages/AboutPage"; import ContactPage from "./pages/ContactPage"; import ProductsPage from "./pages/ProductsPage"; import ProductDetailPage from "./pages/ProductDetailPage"; import NotFoundPage from "./pages/NotFoundPage"; import DashboardLayout from "./pages/Dashboard/DashboardLayout"; import DashboardHome from "./pages/Dashboard/DashboardHome"; import DashboardProfile from "./pages/Dashboard/DashboardProfile"; import DashboardSettings from "./pages/Dashboard/DashboardSettings"; function App() { return ( <> <Navigation /> <Routes> <Route path="/" element={<HomePage />} /> <Route path="about" element={<AboutPage />} /> <Route path="contact" element={<ContactPage />} /> <Route path="products" element={<ProductsPage />} /> <Route path="products/:id" element={<ProductDetailPage />} /> <Route path="dashboard" element={<DashboardLayout />}> <Route index element={<DashboardHome />} /> <Route path="profile" element={<DashboardProfile />} /> <Route path="settings" element={<DashboardSettings />} /> </Route> <Route path="*" element={<NotFoundPage />} /> </Routes> </> ); } export default App; 5. Creating NavigationIn components/Navigation.jsx, add navigation links:import { NavLink } from "react-router-dom"; function Navigation() { return ( <nav> <NavLink to="/">Home</NavLink> <NavLink to="/about">About</NavLink> <NavLink to="/contact">Contact</NavLink> <NavLink to="/products">Products</NavLink> <NavLink to="/dashboard">Dashboard</NavLink> </nav> ); } export default Navigation; 6. Building PagesCreate simple components for each page in the pages/ directory. Example for HomePage.jsx:function HomePage() { return <h1>Welcome to the Home Page!</h1>; } export default HomePage; Repeat for AboutPage.jsx, ContactPage.jsx, etc.7. Dynamic RoutesIn ProductDetailPage.jsx, use the useParams hook to get the product ID:import { useParams } from "react-router-dom"; function ProductDetailPage() { const { id } = useParams(); return <h2>Product Details for ID: {id}</h2>; } export default ProductDetailPage; 8. Nested Routes (Dashboard Example)In DashboardLayout.jsx, use the Outlet component:import { Outlet, NavLink } from "react-router-dom"; function DashboardLayout() { return ( <div> <h2>Dashboard</h2> <nav> <NavLink to="">Home</NavLink> <NavLink to="profile">Profile</NavLink> <NavLink to="settings">Settings</NavLink> </nav> <Outlet /> </div> ); } export default DashboardLayout; 9. Handling 404sIn NotFoundPage.jsx:function NotFoundPage() { return <h1>404 - Page Not Found</h1>; } export default NotFoundPage; 10. Running the AppStart your development server:npm run dev Visit http://localhost:5173 to see your app in action!ConclusionYou now have a working React app with multiple pages, nested routes, dynamic routes, and a 404 page—all powered by React Router. Experiment by adding more pages or features! Get full access to Norbert’s Web Dev School at <a href="https://norbertbmwebdev.substack.com/subscribe?utm_medium=podcast&utm_campaign=CTA_4">norbertbmwebdev.substack.com/subscribe</a>

June 10, 2025

🧠 React Components Deep Dive: Props, State, Composition & Hooks (2025)

In this tutorial, you'll get a complete understanding of React components including how to build and structure them using best practices. You'll learn about functional components, props, state, JSX, hooks, composition, and how to break an app into reusable modules.📽️ YouTube Video Title (High CTR)🔧 Step-by-Step Tutorial1. 📦 What is a Component in React?* A component is a reusable and self-contained part of the UI.* It’s either a function or class (function preferred).* Allows splitting the UI into isolated pieces.function MyComponent() { return <div>Hello World</div>; } 2. 🧩 Types of Components✅ Functional Components (modern, preferred)const Welcome = () => <h1>Welcome!</h1>; ❌ Class Components (legacy)class Welcome extends React.Component { render() { return <h1>Welcome!</h1>; } } 3. 🛠 Using PropsProps = "properties" → input data passed to a component.They are read-only and passed via JSX attributes.function Greeting({ name }) { return Hello, {name}!; } <Greeting name="Norbert" /> 4. 🔁 State ManagementState = data that can change.Use useState to manage it in a functional component.const [count, setCount] = useState(0); Updating state triggers a re-render of the component.5. ⏱ Lifecycle with useEffectReact uses useEffect() for side effects like fetching data.useEffect(() => { console.log("Component Mounted"); }, []); // Empty array = run once 6. 💻 JSX SyntaxJSX = HTML + JavaScript hybrid syntax.It compiles to React.createElement() behind the scenes.const App = () => ( <div> <h1>Hello JSX!</h1> </div> ); 7. 🧱 Component CompositionComponents can include other components → reusable UIs.const Page = () => ( <Layout> <Header /> <Main /> <Footer /> </Layout> ); 8. 📦 Exporting and Importing ComponentsCreate a component:const Footer = () => <footer>© 2025</footer>; export default Footer; Use it:import Footer from './components/Footer'; 9. 📁 Project Refactor ExampleWe extracted Footer.jsx, Home.jsx, Page.jsx, RecipePage.jsx, RecipeCard.jsx, and RecipeModal.jsx components into a structured folder system.Folder Structure:src/ ├── components/ │ ├── Footer.jsx │ ├── Page.jsx ├── pages/ │ ├── Home.jsx │ ├── RecipePage.jsx │ ├── Recipes/ │ │ ├── RecipeCard.jsx │ │ ├── RecipeModal.jsx 10. 📚 Best Practices* ✅ Name components with capital letters* ✅ One export default per file* ✅ Keep components small & focused* ✅ Use props to customize components* ✅ Return a single parent element Get full access to Norbert’s Web Dev School at <a href="https://norbertbmwebdev.substack.com/subscribe?utm_medium=podcast&utm_campaign=CTA_4">norbertbmwebdev.substack.com/subscribe</a>

66 total episodes available

Deep-dive analytics for Weekly Code Quickies

Frequently asked questions

Have a different question and can't find the answer you're looking for? Reach out to our support team by sending us an email and we'll get back to you as soon as we can.

What is Weekly Code Quickies?: Weekly Code Quickies is a podcast designed for programmers and developers of all skill levels. Each episode is a bite-sized, quick-hit of valuable information and tips on a specific programming languages, back to front-end frameworks, best tools, emerging technologies, and best practices for working remotely. The podcast is perfect for those who are short on time but still want to stay up-to-date with the latest developments in the industry, including the latest tech news, new technologies, and gaming industry updates. <a href="https://norbertbmwebdev.substack.com?utm_medium=podcast">norbertbmwebdev.substack.com</a>
How often does this podcast release new episodes?: This podcast updates weekly.
Where can I listen to this podcast?: This podcast is available on 9 platforms including Apple Podcasts, Spotify, and more. You can also use the RSS feed directly.
Does this podcast accept guests?: Yes, this podcast regularly features guests.

Legal Disclaimer

Pod Engine is not affiliated with, endorsed by, or officially connected with any of the podcasts displayed on this platform. We operate independently as a podcast discovery and analytics service.

All podcast artwork, thumbnails, and content displayed on this page are the property of their respective owners and are protected by applicable copyright laws. This includes, but is not limited to, podcast cover art, episode artwork, show descriptions, episode titles, transcripts, audio snippets, and any other content originating from the podcast creators or their licensors.

We display this content under fair use principles and/or implied license for the purpose of podcast discovery, information, and commentary. We make no claim of ownership over any podcast content, artwork, or related materials shown on this platform. All trademarks, service marks, and trade names are the property of their respective owners.

While we strive to ensure all content usage is properly authorized, if you are a rights holder and believe your content is being used inappropriately or without proper authorization, please contact us immediately at hey@podengine.ai for prompt review and appropriate action, which may include content removal or proper attribution.

By accessing and using this platform, you acknowledge and agree to respect all applicable copyright laws and intellectual property rights of content owners. Any unauthorized reproduction, distribution, or commercial use of the content displayed on this platform is strictly prohibited.