Freelance Website Build

The client's requirements were to create a modern and responsive website that effectively promotes their services and engages with potential customers. The website's design, features, and functionality were tailored to meet the client's specific business goals and branding.

• The website should have a modern and clean design aesthetic.
• Utilize the provided brand guidelines and assets (logo, color palette, etc.).
• Ensure that the design is responsive and provides an optimal user experience across different devices (desktop, tablet, mobile).

• Implement the required sections requested by the client.
• Ensure that the website is fully functional and performs as expected.
• Implement a working contact form with proper validation and integration with the clients email address.

• The project should be deployed to a web hosting platform (e.g., Vercel, Netlify) for live testing and production use.
• Ensure that the website is deployed with proper domain and SSL configuration.
• Provide SEO and web analytics for the client.

• Responsive Design: The website is designed to provide an optimal viewing experience across various devices, including desktops, tablets, and mobile phones.

• Modular Sections and Components: The website is organized into several sections, including a hero section, about section, services section, projects section, and more. Each section is implemented as a reusable component to maintain code modularity.

• Contact Form: A contact form is provided to allow visitors to get in touch with the landscaping business directly. The form includes fields for name, email, subject, and message, enhancing communication with potential clients.

• Email Integration: The contact form integrates with Nodemailer and sends an email to the business when a user submits the form. The email includes the submitted data, such as the name, email, location, phone, and message.

• Form Validation: The contact form employs Yup for form validation. It ensures that the required fields are filled out correctly, such as validating the email format and phone number format.

• Animated Transitions: The website utilizes Framer Motion, a popular animation library for React, to add smooth and engaging animations to various elements, enhancing the overall user experience.

• Navigation and Footer: The website includes a navigation bar for easy navigation between sections and a footer section containing relevant links and information.

• React: A JavaScript library for building user interfaces, used as the foundation of the website.

• Next.js: A React framework for server-rendered applications, providing improved performance, SEO capabilities, and easy routing.

• Tailwind CSS: A utility-first CSS framework used for styling the website. It provides a responsive and customizable design system.

• Framer Motion: A popular animation library for React, used to add smooth and engaging animations to various elements of the website.

• Formik: A form library for React that helps with form handling, validation, and error display.

• Yup: A JavaScript schema validation library used for defining and validating the shape of data.

• Express: A minimalist web application framework for Node.js used to handle the API route for the contact form submission.

• Nodemailer: A module for Node.js applications that allows sending emails using SMTP or sendmail transport.

Vercel was implemented for deployment and testing of the project due to its seamless integration with Next.js via the Vercel CLI. Some other key features include:

• Continuous Deployment: Allowing for updates to be deployed whenever changes are pushed to the main branch. This allowed the client to have ready access to the MVP throughout the testing stages of the project.
• Environment Variables: Vercel provided a secure way to manage environment variables. We leveraged this feature to store sensitive information, such as API keys email data, without exposing them in our codebase.
• Scaling and Performance: Vercel automatically handles scalability and performance optimizations for the application. With built-in caching, content delivery network (CDN) distribution, and serverless functions, ensuring fast and reliable delivery of the application to users.

Feedback and suggestions for this project is welcome. If you find any issues or have suggestions for improvements, please open an issue or submit a pull request. Ensure that you follow the established coding guidelines and best practices.

• By The Sea Landscaping
• React
• Next.js
• Tailwind CSS
• Framer Motion
• Formik
• Yup
• Express
• Nodemailer
• Vercel

1. Clone the repository:

   git clone https://github.com/tom-odonovan/By-The-Sea-Landscaping.git

2. Install the dependencies:

   cd By-The-Sea-Landscaping
   npm install
   # or
   yarn install

1. Run the development server:

   npm run dev
   # or
   yarn dev

2. Open http://localhost:3000 with your browser to see the result.

This project is licensed under the MIT License.