DEV Community

Cover image for How I Start a Frontend Project: My Folder Setup, Tools & Real Tips
Amar
Amar

Posted on

How I Start a Frontend Project: My Folder Setup, Tools & Real Tips

#frontend #react #vite #typescript

If you're like me, you’ve probably watched a million YouTube tutorials and still felt unsure about how to actually start a frontend project. I’ve been there. Every tutorial has a slightly different folder structure, setup, or opinion—and it gets overwhelming fast.

So this post is how I personally do it—no fluff, no theory, just my real setup using React, Vite, and TypeScript.

What I Use (and Why)

  • React — I love how component-based it is.
  • Vite — It’s fast, like instant reload fast.
  • TypeScript — Adds some structure to my JS chaos.
  • Prettier + ESLint — So I don’t waste time formatting.
  • PowerShell — Yep, I’m that person who likes automating setup stuff.

My Folder Structure (Simple But Solid)

This is what my src folder usually looks like:

src/
│
├── assets/ # Images, fonts, etc.
│ └── images/
│
├── components/ # Reusable UI blocks
│ └── Navbar.tsx
│ └── Button.tsx
│
├── pages/ # Full-page components (like routes)
│ └── Home.tsx
│
├── App.tsx # App shell
├── main.tsx # Entry point
├── index.css
Enter fullscreen mode Exit fullscreen mode

No fancy hooks, context, or utils folders at the beginning. I add those only if the project grows enough to need them.

Getting Started (In My Workflow)

I don’t start from scratch every time. I have a simple boilerplate saved locally or on GitHub. Here's how I begin:

bash
git clone https://github.com/yourname/your-boilerplate
cd your-boilerplate
npm install
npm run dev
Enter fullscreen mode Exit fullscreen mode

Boom. Project running in seconds.

Prettier + ESLint: My Non-Negotiables

These two keep my code clean without me thinking about it.

Here’s a super basic .eslintrc.json setup:

{
  "extends": ["react-app", "plugin:react/recommended", "prettier"],
  "rules": {
    "react/prop-types": "off"
  }
}
Enter fullscreen mode Exit fullscreen mode

And my .prettierrc:

{
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2
}
Enter fullscreen mode Exit fullscreen mode

You can add format and lint scripts in package.json for quick use.

PowerShell: Quick Folder Setup

I’m on Windows, so I use PowerShell to speed up the boring stuff:

mkdir src\components, src\assets\images, src\pages
New-Item -Path src\App.tsx -ItemType File
This saves me from right-click → new folder → repeat 5 times.
Enter fullscreen mode Exit fullscreen mode

A Few Personal Tips

● Start small. Add complexity only when you need it.

● Commit your code early. Even if it’s ugly.

● Don’t obsess over perfection. Build ugly → improve → repeat.

● Name files clearly. NavBar.tsx is better than Stuff1.tsx.

● Write code like someone else will read it (because future-you will).

Wrapping It Up

Frontend setup doesn’t need to be complicated. This is how I start every project, and it helps me stay organized without getting stuck in “setup hell.”

If you're a beginner or even semi-experienced, I hope this gives you a clearer idea of how to just start. Once you do that, the rest follows.

Want me to share the GitHub boilerplate I use? Let me know.

Thanks for reading!
This saves me from right-click → new folder → repeat 5 times.

A Few Personal Tips
Start small. Add complexity only when you need it.

Commit your code early. Even if it’s ugly.

Don’t obsess over perfection. Build ugly → improve → repeat.

Name files clearly. NavBar.tsx is better than Stuff1.tsx.

Write code like someone else will read it (because future-you will).

Wrapping It Up
Frontend setup doesn’t need to be complicated. This is how I start every project, and it helps me stay organized without getting stuck in “setup hell.”

If you're a beginner or even semi-experienced, I hope this gives you a clearer idea of how to just start. Once you do that, the rest follows.

Want me to share the GitHub boilerplate I use? Let me know.

Thanks for reading!

Top comments (0)