county-portal/
│
├─ backend/                # Express API
│   ├─ src/
│   │   ├─ config/
│   │   │   └─ db.js               # MySQL connection pool
│   │   ├─ routes/
│   │   │   ├─ news.js
│   │   │   ├─ events.js
│   │   │   ├─ services.js
│   │   │   └─ contact.js
│   │   ├─ controllers/
│   │   │   ├─ newsController.js
│   │   │   ├─ eventsController.js
│   │   │   ├─ servicesController.js
│   │   │   └─ contactController.js
│   │   ├─ models/
│   │   │   └─ index.js            # tiny ORM‑like helpers
│   │   ├─ middleware/
│   │   │   └─ errorHandler.js
│   │   ├─ app.js
│   │   └─ server.js
│   ├─ .env.example
│   ├─ package.json
│   └─ nodemon.json
│
├─ frontend/               # React UI
│   ├─ public/
│   ├─ src/
│   │   ├─ api/
│   │   │   └─ api.js               # wrapper around fetch/axios
│   │   ├─ components/
│   │   │   ├─ Layout/
│   │   │   │   └─ Navbar.jsx
│   │   │   ├─ News/
│   │   │   │   ├─ NewsList.jsx
│   │   │   │   └─ NewsDetail.jsx
│   │   │   ├─ Events/
│   │   │   │   ├─ EventList.jsx
│   │   │   │   └─ EventDetail.jsx
│   │   │   ├─ Services/
│   │   │   │   └─ ServiceCard.jsx
│   │   │   └─ Contact/
│   │   │       └─ ContactForm.jsx
│   │   ├─ pages/
│   │   │   ├─ Home.jsx
│   │   │   ├─ News.jsx
│   │   │   ├─ Events.jsx
│   │   │   ├─ Services.jsx
│   │   │   └─ Contact.jsx
│   │   ├─ App.jsx
│   │   ├─ index.js
│   │   └─ routes.js
│   ├─ .env.example
│   ├─ package.json
│   └─ vite.config.js   (or create‑react‑app config)
│
├─ .gitignore
└─ README.md


youtube-clone/
│
├─ backend/                     # Node/Express API
│   ├─ src/
│   │   ├─ config/
│   │   │   └─ db.js            # MySQL pool
│   │   ├─ middleware/
│   │   │   └─ auth.js          # JWT verify
│   │   ├─ routes/
│   │   │   ├─ auth.js
│   │   │   ├─ videos.js
│   │   │   └─ comments.js
│   │   ├─ models/              # optional, plain SQL strings
│   │   └─ server.js
│   ├─ .env                     # DB creds + JWT secret
│   └─ package.json
│
├─ frontend/                    # React app
│   ├─ src/
│   │   ├─ api/
│   │   │   └─ index.js        # Axios instance + helpers
│   │   ├─ components/
│   │   │   ├─ Navbar.jsx
│   │   │   ├─ VideoCard.jsx
│   │   │   ├─ VideoPlayer.jsx
│   │   │   ├─ UploadForm.jsx
│   │   │   ├─ CommentList.jsx
│   │   │   └─ ... (others)
│   │   ├─ pages/
│   │   │   ├─ Home.jsx
│   │   │   ├─ Watch.jsx
│   │   │   ├─ Login.jsx
│   │   │   ├─ Register.jsx
│   │   │   └─ Channel.jsx
│   │   ├─ App.jsx
│   │   ├─ index.js
│   │   └─ routes.js
│   ├─ public/
│   ├─ .env                     # REACT_APP_API_URL
│   └─ package.json
│
├─ docker-compose.yml           # optional (MySQL + backend + front)
└─ README.md



cd backend
npm i express mysql2 dotenv cors
npm i -D nodemon

cd frontend
npm i bootstrap@5.3.2 react-bootstrap@2.9.2 axios react-router-dom@6

at root npm init