Full Stack JavaScript Developer

Goal

Create a Vite + React app, add Tailwind CSS v4, install Redux Toolkit, and leave a clean shell for HireBoard.

1. Create the project

npm create vite@latest

Name the project hireboard, choose React and JavaScript, then:

cd hireboard
npm install
npm run dev

Open the URL Vite prints and confirm the starter page loads.

2. Install Tailwind CSS v4

npm install tailwindcss @tailwindcss/vite

3. Install Redux Toolkit and React-Redux

npm install @reduxjs/toolkit react-redux

Chunks explained

Package Role
@reduxjs/toolkit configureStore, createSlice, RTK Query (createApi)
react-redux <Provider>, useSelector, useDispatch

4. Register the Tailwind plugin

Open vite.config.js:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  plugins: [tailwindcss(), react()],
});

Chunks explained

Chunk What it does
tailwindcss() Lets Vite process @import "tailwindcss"
react() JSX / Fast Refresh for React

5. Create src/style.css

@import "tailwindcss";

@custom-variant dark (&:where(.dark, .dark *));

@theme {
  --font-sans: "DM Sans", ui-sans-serif, system-ui, sans-serif;

  --color-brand-50: #eef2ff;
  --color-brand-100: #e0e7ff;
  --color-brand-500: #6366f1;
  --color-brand-600: #4f46e5;
  --color-brand-700: #4338ca;

  --color-ink: #0f172a;
  --color-muted: #64748b;
  --color-surface: #f8fafc;
  --color-card: #ffffff;
}

Chunks explained

Chunk What it does
@import "tailwindcss" Loads Tailwind utilities
@custom-variant dark (...) Makes dark: follow a .dark class on <html>
--color-brand-600 Enables bg-brand-600, text-brand-600
--color-surface / --color-card Page and card backgrounds

6. Update index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HireBoard</title>
    <link href="./src/style.css" rel="stylesheet" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

7. Page shell in App.jsx

function App() {
  return (
    <div className="min-h-screen bg-surface font-sans text-ink antialiased dark:bg-slate-950 dark:text-slate-100">
      <header className="border-b border-slate-200 bg-card px-6 py-4 dark:border-slate-800 dark:bg-slate-900">
        <h1 className="text-xl font-semibold text-brand-600">HireBoard</h1>
        <p className="text-sm text-muted dark:text-slate-400">
          Job dashboard , Redux Toolkit lesson project
        </p>
      </header>
      <main className="mx-auto max-w-5xl px-6 py-10">
        <p className="text-muted dark:text-slate-400">
          Project shell ready. Next: create the Redux store.
        </p>
      </main>
    </div>
  );
}

export default App;

Tailwind chunks explained

Class Meaning
min-h-screen Full viewport height
bg-surface Page background from @theme
font-sans DM Sans
dark:bg-slate-950 Dark page when .dark is on <html>
border-b Bottom edge under the header
bg-card White card-like header bar
text-brand-600 Brand color for the logo
max-w-5xl / mx-auto Centered content column

Check

  • npm run dev shows the HireBoard header.
  • No Redux errors yet (store comes next).
  • Tailwind classes (text-brand-600, bg-surface) apply correctly.

Assessment: Taskly : Setup

Create a separate Vite + React app named taskly (do not reuse the HireBoard folder). Install Tailwind v4 and Redux Toolkit the same way. Brand the shell Taskly : personal task manager. Use your own theme tokens (not a HireBoard clone).

Done when: npm run dev shows a Taskly header page shell.

Next: create your first slice and wire configureStore.