MovingCircle - Professional Removals & Storage Website

A modern, full-stack MERN website for MovingCircle, a professional moving and storage company.

Features

• Modern Design: Clean, professional UI with brand colors (#d92878 pink, #949494 grey)
• Full MERN Stack: React frontend with Express.js backend and Supabase database
• Dynamic Content: Admin dashboard for easy content management
• City Pages: Auto-generated pages for 20+ UK cities
• Contact Forms: Quote request and contact forms with email notifications
• Responsive: Mobile-first design that works on all devices
• Smooth Animations: Framer Motion animations for engaging UX
• SEO Ready: Meta tags and semantic HTML structure

Tech Stack

• Frontend: React 18, Vite, Tailwind CSS, React Router, Framer Motion
• Backend: Node.js, Express.js
• Database: Supabase (PostgreSQL)
• Icons: Font Awesome
• Email: Nodemailer

Project Structure

├── src/
│   ├── components/      # Reusable components (Navbar, Footer, Hero)
│   ├── pages/          # Main pages (Home, About, etc.)
│   ├── admin/          # Admin dashboard
│   ├── styles/         # Global CSS and Tailwind config
│   └── utils/          # Supabase client and utilities
├── server/
│   ├── routes/         # API routes (pages, cities, contact)
│   ├── config/         # Supabase configuration
│   └── index.js        # Express server
└── public/
    └── images/         # Logo and images

Pages

1. Home - Hero section, services overview, features, CTA
2. About - Company information, values, mission
3. How It Works - Step-by-step moving process
4. Removals - Removal services with city links
5. Storage - Storage facilities and features
6. Contact - Contact information and message form
7. Quote - Detailed quote request form
8. City Pages - Dynamic pages for each city (e.g., /removals/london)
9. Admin Dashboard - Content management interface

Getting Started

Prerequisites

• Node.js 16+ installed
• Supabase account (database is already configured)

Installation

1. Install dependencies:

npm install

2. Environment variables are already configured in .env:

   • Supabase URL and keys
   • Server port (5000)
   • Email credentials (update with your Gmail credentials)

3. Update email settings in .env for contact form notifications:

EMAIL_USER=your-email@gmail.com
EMAIL_PASS=your-app-password

Running the Application

Development mode (runs both frontend and backend):

npm run dev

This will start:

• Frontend on http://localhost:3000
• Backend API on http://localhost:5000

Building for Production

npm run build

The built files will be in the dist folder.

Database

The Supabase database includes:

• pages - Content for main pages (editable via admin)
• cities - 20+ UK cities for dynamic routing
• contact_submissions - Form submissions
• site_settings - Global site settings

All tables have Row Level Security (RLS) enabled for security.

Admin Dashboard

Access the admin dashboard at /admin to:

• Edit page content (titles, descriptions, meta tags)
• View and manage cities
• Review contact form submissions

API Endpoints

• GET /api/pages - Get all pages
• GET /api/pages/:slug - Get page by slug
• PUT /api/pages/:id - Update page
• GET /api/cities - Get all cities
• GET /api/cities/:slug - Get city by slug
• POST /api/contact - Submit contact form

Customization

Brand Colors

Update colors in tailwind.config.js:

colors: {
  primary: '#d92878',    // Pink
  secondary: '#949494',  // Grey
}

Logo

Replace the logo at:

public/images/Screenshot_2025-10-18_at_6.18.48_PM-removebg-preview.png

Adding Cities

Cities can be added via the admin dashboard or directly in Supabase.

Deployment

The application can be deployed on:

• Frontend: Vercel, Netlify, or any static hosting
• Backend: Heroku, Railway, DigitalOcean, or any Node.js hosting
• Database: Already hosted on Supabase

Support

For questions or issues, contact the development team.

License

© 2025 MovingCircle. All rights reserved.