🚀 How to Set Up a Modern Web Project from Scratch — Step-by-Step Guide (2025 Edition)

Setting up a new project from scratch can be intimidating — especially with so many tools and frameworks out there. This guide walks you through creating a clean, scalable, and modern frontend project using React, Vite, TailwindCSS, Git, and ESLint + Prettier.

Perfect for solo developers, startups, and teams looking for a solid base.

---

🧰 Tools We’ll Use

Tool	Purpose
Vite	Fast project bundler
React	UI library
TailwindCSS	Utility-first CSS framework
ESLint + Prettier	Code linting and formatting
Git	Version control
VS Code	Editor (recommended)

---

1️⃣ Project Folder Structure

Here’s a clean and scalable structure we’ll end up with:

my-app/
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   ├── pages/
│   ├── App.jsx
│   └── main.jsx
├── .eslintrc.cjs
├── .prettierrc
├── index.html
├── tailwind.config.js
├── package.json
└── README.md

---

2️⃣ Step-by-Step Setup

✅ Step 1: Create Project with Vite

npm create vite@latest my-app --template react
cd my-app
npm install

✅ Step 2: Initialize Git (Optional but Recommended)

git init
git add .
git commit -m "Initial commit"

---

✅ Step 3: Install TailwindCSS

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Edit tailwind.config.js:

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

Update src/index.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

---

✅ Step 4: Setup ESLint + Prettier

npm install -D eslint prettier eslint-plugin-react eslint-config-prettier eslint-plugin-react-hooks eslint-plugin-jsx-a11y
npx eslint --init

Create .eslintrc.cjs:

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:jsx-a11y/recommended",
    "prettier",
  ],
  parserOptions: {
    ecmaVersion: "latest",
    sourceType: "module",
  },
  plugins: ["react", "jsx-a11y"],
  rules: {},
  settings: {
    react: {
      version: "detect",
    },
  },
};

Create .prettierrc:

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "printWidth": 100,
  "trailingComma": "es5"
}

---

✅ Step 5: Create Sample Components

In src/components/Hello.jsx:

function Hello() {
  return <h1 className="text-2xl font-bold text-center text-blue-500">Hello, World!</h1>;
}
export default Hello;

In App.jsx:

import Hello from './components/Hello';

function App() {
  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-100">
      <Hello />
    </div>
  );
}

export default App;

---

✅ Step 6: Run the Project

npm run dev

Visit http://localhost:5173 and you should see your app in action!

---

📦 Bonus: Add GitHub Repo and Push Code

gh repo create my-app --public --source=. --remote=origin
git push -u origin main

---

🔍 Final Tips

• Use src/assets/ for logos, images, etc.
• Use src/pages/ for routing (with react-router-dom if needed).
• Use .env for environment variables (VITE_API_URL=https://api.example.com)
• Set up a README.md with setup instructions for collaborators.

---

✅ Final Output

Your modern, scalable project is now ready to build components, connect APIs, and go live!

---