Building My first React Web Application – A Developer's Journey 🚀

Manish Yadav — Mon, 10 Mar 2025 03:02:42 +0000

Step 1: Choosing the Right Tech Stack

Before starting, I decided to use React for its component-based architecture and efficient rendering. Along with React, I used:
✅ Vite for a fast development setup
✅ Tailwind CSS for styling
✅ other libraries/frameworks like Redux,

Step 2: Setting Up the Project

I initialized my project using Vite:

sh

npm create vite@latest paste-app
cd paste-app
npm install
npm run dev

This gave me a blazing-fast dev server with hot reloading.

Step 3: Creating the Core Components

I structured my app into reusable components like:

Navbar.jsx – Navigation bar
Home.jsx – Main page content
Past.x.jsx – Bottom section with links
Viewpaste.jsx – for view paste notes and documents

Step 4: Managing State with Hooks

To handle app state, I used useState and useEffect:

jsx
const [data, setData] = useState([]);

useEffect(() => {
  fetchData();
}, []);

const fetchData = async () => {
  const response = await fetch("https://api.example.com/data");
  const result = await response.json();
  setData(result);
};

This helped me fetch and display dynamic content.

Step 5: Adding Routing with React Router

I set up navigation using react-router-dom:

sh

npm install react-router-dom

Then, I created routes in App.jsx:

jsx

import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import Home from "./Home";
import Navbar from "./Navbar";

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/Navbar" element={<Navbar />} />
      </Routes>
    </Router>
  );
}

export default App;

This made my app a multi-page experience without reloading.

Step 6: Styling the UI

I used Tailwind CSS for quick styling:

terminal


npm install tailwindcss @tailwindcss/vite

vite.config.ts




import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
})

Import tailwind in CSS file

@import "tailwindcss";

Then,

npm run dev

Then, added styles like this:

jsx

<div className='flex flex-row gap-2 place-content-center  '>
        <input type="text"
          className='p-2 pl-2  rounded-2xl  mt-2 border w-[30%]'
          placeholder='enter title here'
          value={title}
          onChange={(e) => settitle(e.target.value)} />
        <button
          onClick={createpaste}
          className='p-2  rounded-2xl  mt-2 ' >
          {
            pasteId ? "update my paste" : "create my paste"
          }
        </button >
      </div>

This kept my styling clean and maintainable.

Step 7: Deploying the App

Once I was happy with my app, I deployed it on Vercel:

sh

npm run build
vercel deploy

Now, my app is live and accessible online! 🎉

Final Thoughts & Lessons Learned
Building this React app taught me:
✅ How to structure a scalable project
✅ The power of reusable components
✅ How to manage state effectively
✅ The importance of performance optimization

🔹 Next Steps: Adding better tailwindcss ,authentication, dark mode, and improving responsiveness!

npx tailwindcss init -p error solved: 'npm ERR! Could Not Determine Executable to Run'

Manish Yadav — Wed, 05 Mar 2025 16:04:54 +0000

When I encountered an error while initializing a Tailwind CSS configuration for my project,

command:

npm install tailwindcss @tailwindcss/postcss postcss
npx tailwindcss init -p

error:

npm ERR! could not determine executable to run
npm ERR! A complete log of this run can be found in: C:\Users\raoma\AppData\Local\npm-cache\_logs\2025-03-05T15_53_22_652Z-debug-0.log

solution: what I've tried

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

The init command is no longer available in Tailwind CSS v4. For v3, make sure to use the correct version qualifier during installation.

If you want to use Tailwindcss v4 use this:
https://tailwindcss.com/blog/tailwindcss-v4#css-first-configuration

DEV Community: Manish Yadav