edoves

Example of using forward ref

What we trying to achieve here is that when we use the logo component we stil get the classes of tailwind if dont do the forwardRef the component does not know or do auto suggest classes

/logo.tsx

type ImgProps = React.ImgHTMLAttributes<HTMLImageElement> & {
 imgSrc: string

edoves

Server Action with manual validation

Video Source

textarea.jsx

'use client';

import { useState } from 'react';

edoves

Supabase Middleware public and private route

import { createServerClient } from '@supabase/ssr';
import { NextResponse, type NextRequest } from 'next/server';

export async function updateSession(request: NextRequest) {
  try {
    let supabaseResponse = NextResponse.next({
      request,

edoves

PostgreSQL Stored Function

create or replace function post_todo() 
returns setof table_sample as $$
begin
    -- SQL statements go here
end;
$$ language plpgsql;

edoves

Neon and Supabase are both platforms that utilize PostgreSQL databases but cater to different development needs. Here's a comparison to help you understand their distinctions:

Neon: Serverless PostgreSQL

• Architecture: Neon separates compute and storage, offering a serverless PostgreSQL experience with features like autoscaling and the ability to scale to zero during inactivity.

• Features:

  • Branching: Supports instant database branching, facilitating efficient development workflows.
  • Auto-Scaling: Automatically adjusts resources based on demand, enhancing cost efficiency.

• Compatibility: Maintains high compatibility with standard PostgreSQL, ensuring seamless integration with existing tools and applications.

edoves

API layer 1

Explanation

When you work with third-party services or external APIs (like weather services, payment gateways, or any other external data source), they often provide you with an API key or some form of authentication. This key is sensitive information—like a password—that allows access to the service.

If you’re fetching data directly from the client side (for instance, a React or Vue application running in the user's browser), you would need to expose this API key to make calls to the third-party service. However, if this key is visible in the client code, anyone who views your client-side code could potentially see and misuse it.

To protect this sensitive information, it’s best practice to create a server-side API layer. This means:

edoves

Edited tailwind nav source

 <nav className="bg-gray-800">
      <div className="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
        <div className="relative flex h-16 items-center justify-between">
          <div className="flex flex-1 justify-start">
            {/*logo*/}
            <div className="flex flex-shrink-0 items-center">
              <img
                className="h-8 w-auto"

edoves

Better export setting up inside index.js

export { default as Navbar } from './Navbar/Navbar';
export { default as Footer } from './Footer/Footer';
export { default as InfoSection } from './InfoSection/InfoSection';
export { default as Pricing } from './Pricing/Pricing';

edoves

createRoutesFromElements.js

import {
  createBrowserRouter,
  createRoutesFromElements,
  RouterProvider,
} from "react-router-dom";

// You can do this:
const router = createBrowserRouter(

edoves

MongoDB Cheat Sheet

Show All Databases

show dbs

Show Current Database