1. Install the "Next App" npx create-next-app@14

   Name the project file like in this case "yc_directory"

   √ Would you like to use TypeScript? ... No / Yes """Yes""" √ Which linter would you like to use? » ESLint """Yes""" √ Would you like to use Tailwind CSS? ... No / Yes """Yes""" √ Would you like your code inside a src/ directory? ... No / Yes """No""" √ Would you like to use App Router? (recommended) ... No / Yes """Yes""" √ Would you like to use Turbopack? (recommended) ... No / Yes """Yes""" √ Would you like to customize the import alias (@/* by default)? ... No / Yes """No"""

   So far we add "packageManager": "npm@10.5.2", "overrides": { "react": "$react", "react-dom": "$react-dom" }, in the package.json file In the video he is using react-19 and we are using react-18

2. Now we are going to install Auth.js | next-ath for authentication This is a complete package for authentication. for that we use command first cd yc_directory "npm install next-auth@beta" and "npx auth secret" After that a file is created with Auth Secret=""

3. After that do its configrations

   1. create a file amely "auth.ts" and paste its content using Auth.js configration provider and paste

   import NextAuth from "next-auth"

   export const { handlers, signIn, signOut, auth } = NextAuth({ providers: [], })

   2. app\api\auth[...nextauth]\route.ts file and paste

   import { handlers } from "@/auth" // Referring to the auth.ts we just created export const { GET, POST } = handlers

   3. Skip the 3rd step "Add option Middleware"

   4. Setup Authentication Methods Go to Authentication Go to OAuth

      For this project we are using Github press it and read

      In our case we create this from scratch so Go to "Connections" --> "Providers" --> "Github" open "GitHub - Creating an OAuth App" and follow the steps

      1. In the upper-right corner of any page on GitHub, click your profile picture, then click Settings.
      2. In the left sidebar, click Developer settings.
      3. In the left sidebar, click OAuth apps.
      4. Click New OAuth App.
      5. In "Application name", type the name of your app like "yc_directory"
      6. In "Homepage URL", type the full URL to your app's website. of "http://localhost:3000/"
      7. IN Authorization callback URL put https://example.com/api/auth/callback/github with this changing https://localhost:3000/api/auth/callback/github
      8. Press Register Application

   5. Now we need Client Id and Client Secrete for the remaining setup

      1. Generate a new client secret (it genereate once at a time and expires)
      2. Use Client Id and Secret and setup the .env.local file

      AUTH_SECRET= "" AUTH_GITHUB_ID= "" AUTH_GITHUB_SECRET= ""

   6. Go back to next Auth setup from where we get the callback URL and Go to configration And change the code of auth.ts with the

      import NextAuth from "next-auth" import GitHub from "next-auth/providers/github"

      export const { handlers, auth, signIn, signOut } = NextAuth({ providers: [GitHub], })

4. Make public folder in the YC_DIRECTORY and put "logo.png" in it

   1. Make a "components" folder and "Navbar.tsx" file setup the component

5. Install followings npm install tailwindcss-animate npm install @tailwindcss/typography

   can't complete the font configration as git hub data is not found

    <!-- import type {Config} from "tailwindcss"
    const config: Config = {
      darkMode: ["class"],
      content: [
        "./pages/**/*.{js,ts,jsx,tsx,mdx}",
        "./components/**/*.{js,ts,jsx,tsx,mdx}",
        "./app/**/*.{js,ts,jsx,tsx,mdx}",
        "./sanity/**/*.{js,ts,jsx,tsx,mdx}",
      ],
      theme: {
        extend: {
          screens: {
            xsl: "475px"
          },
          colors: {
            primary:{
              "100": "#FFE8F0",
              DEFAULT: "#EE2B69"
            },
            secondary: "#FBE843",
            black: {
              "100": "#333333", 
              "200": "#141413",
              "300": "#708087",
              DEFAULT: "#000000",
            },
            white: {
              "100": "#F7F7F7",
              DEFAULT: "#FFFFFF",
            },
          },
          fontFamily:{
            "work-sans": ["var(--font-work-sans)"],
          },
          borderRadius: {
            lg: "var(-radius)",
            md: "calc(var(-radius) 2px)",
            sm: "calc(var(-radius) 4px)",
          },
          boxShadow: {
            100: "2px 2px 0px 0px rgb(0, 0, 0)",
            200: "2px 2px 0px 2px rgb(0, 0, 0)",
            300: "2px 2px 0px 2px rgb(238, 43, 105)",
          },
        },
      },
      // eslint-disable-next-line @typescript-eslint/no-require-imports
      plugins: [require("tailwindcss-animate"), require("@tailwindcss/typography")],
    };
    // MOL to Chat, I to Command
    export default config; -->
   

6. We ave to setup the path like .next app (root) \api \components \fonts \WorkSans-Black.ttf \WorkSans-Bold.ttf \WorkSans-ExtraBold.ttf \WorkSans-ExtraLight.ttf \WorkSans-Light.ttf \WorkSans-Medium.ttf \WorkSans-Regular.ttf \WorkSans-SemiBold.ttf \WorkSans-Thin.ttf \favicon.ico \globals.css \layout.tsx node_modules public public\logo.png .env.local .eslintrc.json .gitignore auth.ts next-env.d.ts next.config.mjs package-lock.json package.json postcss.config.mjs README.md READNOTES.md tailwind.config.ts tsconfig.json

7. Search Form

We make a "SearchForm" and "SearchFormReset" component and by using search param fetch the query value and assigned it to the input so far And for "submit" and "reset" button we use shadcn dependencies "Lucide_Icons" npm install lucide-react and just use the icon over there

We put a "onclick" function
firstly it grab the element using JS DOM Function and then clear it
We tell the Type script, treat this element as "HTMLFormElement"

Now we goona install "shadCN" to use multiple packages
--------- npx shadcn@latest init
select
  NewYork
  Slate

Now instal lbutton from shadcn
npx shadcn@latest add button    

copy paste all the data of "tailwind.config.ts" and "globals.css"  from app directory

When we install button from shadcn then It will make a folder of components in the root directory
so use them and transfer all the components file into it and change the import addresses

8. All Startups & Startup Card

We make a dummy data of post & pass it to "StartupCard.tsx" In that component we receive the props and design the card for once and give then proper attributes how we want to design out card Here we aslo give links on every element so that on each particular element sepecific url open like user/1 etc But Still we have to set the type of ""StartupTypeCard""

9. Sanity Setup

go to sanity website and loged in go to new project and create it. Go to overview and copy the command

✓ Login successful ✓ Fetching existing projects

? Create a new project or select an existing one JSM YC Directory (cen3f304) ? Select dataset to use Create new dataset ? Dataset name: yc-directory ? Choose dataset visibility – this can be changed later (Use arr ? Choose dataset visibility – this can be changed later Private (authenticated requests only) Please note that while documents are private, assets (files and images) are still public

✓ Creating dataset ? Would you like to add configuration files for a Sanity project in this Next.js folder? Yes ⚠ ╭────────────────────────────────────────────────────────────╮ ⚠ │ │ ⚠ │ It looks like you are using Next.js 15 and React 19 │ ⚠ │ Please read our compatibility guide. │ ⚠ │ https://www.sanity.io/help/react-19 │ ⚠ │ │ ⚠ ╰────────────────────────────────────────────────────────────╯ ? Do you want to use TypeScript? Yes ? Would you like an embedded Sanity Studio? Yes ? What route do you want to use for the Studio? /studio ? Select project template to use Clean project with no predefine d schema types ? Would you like to add the project ID and dataset to your .env. local file? Yes Added http://localhost:3000 to CORS origins Running 'npm install --legacy-peer-deps --save @sanity/vision@4 sanity@4 @sanity/image-url@1 styled-components@6'

next npm install next-sanity@canary

10. Sanity Schemas When we install sanity we got multiple files

Now we have to make "author.ts" and "startup.ts" in the "schemaType" folder and configure it in "index.ts" file

In "startup.ts" file we have markdown property we have to install it npm install sanity-plugin-markdown

and configure it in sanity.config.ts as function like: markdownSchema()

When we complete this now we go to http://localhost:3000/studio/structure

here now we have options to create "Authors" & "Startups" using the menu That it