Reliable Drainage Contractors

# Building a Construction-Based "McCance Group Drainage Contractor" Website Using modern web technologies( HTML, CSS, JavaScript, React.js, AWS Lambda)

In this guide, we'll outline the process of building a construction-based website like [McCance Group Drainage Contractors](https://mccancegroup.co.uk/civils/drainage-contractors/) using modern web technologies, including HTML, CSS, JavaScript, React.js, React Native for the web, AWS Lambda, and Next.js.

**1\. Project Planning and Architecture**

Before development, define the project scope, features, and technology stack. The key aspects include:

* **Frontend:** HTML, CSS, JavaScript, React.js, and Next.js.
    
* **Backend:** Serverless AWS Lambda functions.
    
* **Mobile Adaptability:** React Native for Web.
    
* **Hosting & Deployment:** AWS or Vercel for Next.js apps.
    

## **2\. Setting Up the Development Environment**

### **Install Required Tools**

* **Node.js & npm:** Ensure you have Node.js installed.
    
* **Code Editor:** Use VS Code or any preferred IDE.
    
* **Git & GitHub:** Version control.
    
* **AWS CLI:** For managing Lambda functions.
    

\# Install Next.js and React

`npx create-next-app@latest mccance-group-website`

`cd mccance-group-website`

`npm install`

## **3\. Building the Frontend with React.js and Next.js**

Next.js offers Server-Side Rendering (SSR) and Static Site Generation (SSG), improving SEO and performance.

### **Project Structure**

mccance-group-website/

`│── pages/`

`│   ├── index.js  # Home page`

`│   ├── services.js  # Services page`

`│   ├── contact.js  # Contact page`

`│── components/`

`│   ├── Header.js  # Navigation bar`

`│   ├── Footer.js  # Footer section`

`│   ├── ServiceCard.js  # Service listing component`

`│── public/`

`│── styles/`

`│── api/`

### **Creating a Homepage (pages/index.js)**

`import Head from 'next/head';`

`import Header from '../components/Header';`

`import Footer from '../components/Footer';`

`   `

`export default function Home() {`

  `return (`

    `<div>`

      `<Head>`

        `<title>McCance Group Drainage Contractor</title>`

      `</Head>`

      `<Header />`

      `<main>`

        `<h1>Reliable Drainage Contractors</h1>`

        `<p>We specialize in high-quality drainage solutions.</p>`

      `</main>`

      `<Footer />`

    `</div>`

  `);`

`}`

## **4\. Styling with CSS and Tailwind CSS**

To maintain a clean design, use Tailwind CSS.

`npm install tailwindcss postcss autoprefixer`

`npx tailwindcss init -p`

`Modify tailwind.config.js:`

`module.exports = {`

  `content: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],`

  `theme: {`

    `extend: {},`

  `},`

  `plugins: [],`

`};`

## **5\. Adding a Contact Form with React Hook Form**

`import { useForm } from 'react-hook-form';`

`export default function ContactForm() {`

  `const { register, handleSubmit } = useForm();`

  `const onSubmit = (data) => console.log(data);`

  `return (`

    `<form onSubmit={handleSubmit(onSubmit)}>`

      `<input {...register('name')} placeholder="Your Name" />`

      `<input {...register('email')} placeholder="Your Email" />`

      `<textarea {...register('message')} placeholder="Message" />`

      `<button type="submit">Submit</button>`

    `</form>`

  `);`

`}`

## **6\. Backend with AWS Lambda (Serverless Architecture)**

Using AWS Lambda, we can create API endpoints.

### **Deploying AWS Lambda Functions**

1. Install AWS CLI and configure it.
    
2. Create a serverless folder with an index.js file.
    

`exports.handler = async (event) => {`

  `return {`

    `statusCode: 200,`

    `body: JSON.stringify({ message: "Lambda API is working" })`

  `};`

`};`

`Deploy using AWS Serverless Framework:`

`npm install -g serverless`

`serverless deploy`

## **7\. Mobile Adaptation with React Native for Web**

Using React Native for Web ensures cross-platform compatibility.

`npm install react-native-web`

`Modify next.config.js:`

`const withTM = require('next-transpile-modules')(['react-native']);`

`module.exports = withTM({});`

Now, components can be shared between mobile and web.

## **8\. Deploying the Website**

### **Using Vercel for Hosting**

`npm install -g vercel`

`vercel login`

`vercel`

Or use AWS Amplify for deployment.

## **Conclusion**

By following this guide, you can develop a fully functional construction-based website with modern technologies, ensuring speed, security, and scalability. Whether you are building for web or mobile, this tech stack provides the flexibility required to create a robust contractor platform.