🏗️ Skyline Constructions — Business Portfolio Platform

---

📌 Overview

Skyline Constructions is a full-stack business portfolio platform built for construction and architecture firms. It showcases projects and services through a professional public website while providing a secure Admin Dashboard that allows business owners to manage content dynamically — without touching code.

This project demonstrates real-world full-stack development, CRUD operations, image uploads, and admin-level access control.

---

🚀 Key Features

🌐 Public Portal

• 🏗️ Project Gallery Dynamically displays completed projects with images and descriptions.
• 🛠️ Service Showcase Highlights core services offered by the company.
• 📩 Contact & Inquiry Form Saves client messages directly to the database.
• 📱 Responsive Design Professional UI built using Material Tailwind.

---

🛡️ Admin Dashboard (/admin)

• ✏️ Project Management Add, update, and delete projects (with image uploads).
• 📊 Inquiry Tracking View and manage messages from potential clients.
• 🔐 Secure Access Restricted admin-only routes.

---

⚡ Performance & Architecture Highlights

• 📦 Modular React component architecture
• 🚀 Fast frontend builds using Vite
• 🖼️ Image uploads handled via Multer
• 🔁 RESTful APIs with Express.js
• 🗄️ Scalable MongoDB schema using Mongoose
• 🌐 Clear separation of frontend & backend

---

🛠️ Tech Stack

Frontend (Client)

• Framework: React (Vite)
• Styling: Material Tailwind & CSS
• Routing: React Router DOM
• HTTP Client: Axios

Backend (Server)

• Runtime: Node.js
• Framework: Express.js
• Database: MongoDB (Mongoose)
• File Uploads: Multer
• API Style: RESTful Architecture

---

⚙️ Installation & Setup

Prerequisites

• Node.js (v16+ recommended)
• MongoDB (local or cloud)

---

1️⃣ Clone the Repository

git clone https://github.com/yourusername/skyline_constructions.git
cd skyline_constructions

---

2️⃣ Backend Setup

cd server
npm install

Create a .env file inside server/:

PORT = 5000
MONGO_URI = mongodb+srv://mchandan1204_db_user:Skyline%401234@cluster0.nsj6bti.mongodb.net/?appName=Cluster0

Start the backend server:

npm start

---

3️⃣ Frontend Setup

cd ../client
npm install
npm run dev

Open http://localhost:5173 to view the application.

---

📂 Project Structure

client/
 ├── pages/
 │   ├── Home
 │   ├── Projects
 │   └── Admin
 └── components/

server/
 ├── models/
 │   ├── Project.js
 │   └── Contact.js
 ├── routes/
 │   ├── projectRoutes.js
 │   └── contactRoutes.js
 ├── uploads/
 └── index.js

---

🔗 API Endpoints

Method	Endpoint	Description
GET	/api/projects	Fetch all projects
POST	/api/projects	Add a new project (with image)
DELETE	/api/projects/:id	Delete a project
POST	/api/contact	Submit contact form
GET	/api/contact	Fetch inquiries (Admin)

---

🌍 Deployment

• Frontend: Vercel / Netlify
• Backend: Render / Railway
• Database: MongoDB Atlas

Environment variables are securely configured during deployment.

---

🧠 Future Enhancements

• 🔐 Admin authentication & role-based access
• 🖼️ Cloud image storage (Cloudinary / S3)
• 📊 Analytics dashboard
• 📝 CMS-style content editor
• 🌍 SEO optimization

---

🤝 Contributing

Contributions are welcome! Fork the repository, create a feature branch, and submit a Pull Request.

---

📄 License

This project is open-source and licensed under the MIT License.