Environment Protection Website using React

Imagine building a website that champions environmental protection. That’s exactly what we’re aiming for with this project. We’re crafting a space using React where people can learn, share, and engage in all things related to safeguarding our planet.

Output Preview: Let us have a look at how the final output will look like.

Prerequisites:

• HTML, CSS, and JavaScript.
• NodeJS & NPM
• ReactJS

Approach to create Environment Protection Website:

• Create a new React project using Create React App to kickstart development.
• Component Structure: Organize the project by defining components for different sections:
  • Home (home.js): Introduce visitors to the website’s mission and purpose.
  • Header (header.js): Design a consistent header for easy navigation across pages.
  • Footer (footer.js): Develop a footer section for additional information and links.
  • Resources (resources.js): Compile articles, videos, and tools for environmental protection.
  • Take Action (takeaction.js): Encourage visitors to take action through petitions or volunteering.
  • Campaign (campaign.js): Highlight ongoing campaigns or initiatives related to environmental protection.
• Apply CSS or a framework like Bootstrap to style each component consistently and enhance visual appeal.
• Implement React Router to enable seamless navigation between different sections of the website.

Steps to Create React App and Installing the module

Step 1: Begin by setting up a new React project using Create React App.

npx create-react-app environmental-protection-website

Step 2: Navigate to the root directory of your project using the following command.

cd environmental-protection-website

Step 3: Install the necessary package in your application using the following command.

npm install react-router-dom react-transition-group

Step 4: Designate components for each page (Home, Resources, TakeAction, Header, Footer).

Project structure:

The updated dependencies in package.json file will look like:

"dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.22.0",
    "react-scripts": "5.0.1",
    "react-transition-group": "^4.4.5",
    "web-vitals": "^2.1.4"
}

Example: Write the following code in respective files.

• Home.js :Displays a welcome message and the organization’s mission, goals, and actions.
• Header.js:Represents the header section with a logo and navigation links.
• Campaigns.js :Displays current campaigns or initiatives with titles and descriptions.
• Footer.js: Represents the footer section with contact information and social media links.
• Resources.js: Displays educational resources related to environmental protection.
• TakeAction.js: Encourages visitors to take action for environmental causes.

Javascript

// Home.js
import React from 'react';
// Import CSS file for component styles
import './App.css';

const Home = () => {
    return (
        <div className="home">
            <div className="container">
                <h2>Welcome to Environmental Protection</h2>
                <p>Our mission is to protect and preserve the
                    environment for future generations. We believe
                    that every individual has a role to play in
                    safeguarding our planet, and together, we can
                    make a significant impact.
                </p>
                <p>At Environmental Protection, we strive to:</p>
                <ul>
                    <li>Raise awareness about environmental issues
                        and their implications for both current and
                        future generations.
                    </li>
                    <li>Promote sustainable practices that minimize
                        harm to the environment and promote biodiversity.
                    </li>
                    <li>Advocate for policies and initiatives that
                        prioritize environmental conservation and address
                        pressing environmental challenges.
                    </li>
                    <li>Empower individuals and communities to take
                        meaningful action towards a more sustainable
                        and environmentally conscious future.
                    </li>
                </ul>
                <p>By fostering a sense of responsibility and
                    collective action, we aim to create a world
                    where the natural beauty and resources of
                    our planet are cherished and protected for
                    generations to come.
                </p>
                <button className="action-button">Get Involved</button>
            </div>
        </div>
    );
}

export default Home;

Javascript

// Header.js
import React from 'react';
import { Link } from 'react-router-dom';
import { CSSTransition }
    from 'react-transition-group';


const Header = () => {
    return (
        <CSSTransition in={true} appear={true}
            timeout={500} classNames="fade">
            <header className="header">
                <div className="container">
                    <h1 className="logo">
                        Environmental Protection</h1>
                    <nav className="nav">
                        <ul>
                            <li><Link to="/"
                                className="link">Home</Link></li>
                            <li><Link to="/campaigns"
                                className="link">Campaigns</Link></li>
                            <li><Link to="/take-action"
                                className="link">Take Action</Link></li>
                            <li><Link to="/resources"
                                className="link">Resources</Link></li>
                        </ul>
                    </nav>
                </div>
            </header>
        </CSSTransition>
    );
}

export default Header;

Javascript

// Campaigns.js
import React from 'react';
// Import CSS file for component styles
import './App.css';

const Campaigns = () => {
    return (
        <div className="campaigns">
            <div className="container">
                <h2>Current Campaigns</h2>
                <div className="campaign">
                    <h3>Campaign Title 1</h3>
                    <p>Description of Campaign 1...</p>
                </div>
                <div className="campaign">
                    <h3>Campaign Title 2</h3>
                    <p>Description of Campaign 2...</p>
                </div>
            </div>
        </div>
    );
}

export default Campaigns;

Javascript

// Footer.js
import React from 'react';
import './App.css';

const Footer = () => {
    return (
        <footer className="footer">
            <div className="container">
                <div className="footer-content">
                    <div className="contact-info">
                        <h3>Contact Us</h3>
                        <p>Email: info@example.com</p>
                        <p>Phone: 123-456-7890</p>
                    </div>
                    <div className="social-media">
                        <h3>Connect With Us</h3>
                        <ul>
                            <li>
                                <a href="https://facebook.com">Facebook</a>
                            </li>
                            <li>
                                <a href="https://twitter.com">Twitter</a>
                            </li>
                            <li>
                                <a href="https://instagram.com">Instagram
                                </a></li>
                        </ul>
                    </div>
                </div>
                <div className="copyright">
                    <p>© 2024 Environmental Protection.
                        All rights reserved.</p>
                </div>
            </div>
        </footer>
    );
}

export default Footer;

Javascript

// Resources.js
import React from 'react';
import './App.css';

const Resources = () => {
    return (
        <div className="resources">
            <div className="container">
                <h2>Educational Resources</h2>
                <div className="resource">
                    <h3>Resource Title 1</h3>
                    <p>Description of Resource 1...</p>
                </div>
                <div className="resource">
                    <h3>Resource Title 2</h3>
                    <p>Description of Resource 2...</p>
                </div>
            </div>
        </div>
    );
}

export default Resources;

Javascript

// TakeAction.js
import React from 'react';
import './App.css';

const TakeAction = () => {
    return (
        <div className="take-action">
            <div className="container">
                <h2>Take Action</h2>
                <p>Here are some ways you can get involved:</p>
                <ul>
                    <li>Sign petitions</li>
                    <li>Volunteer for events</li>
                    <li>Donate to support our cause</li>
                </ul>
            </div>
        </div>
    );
}

export default TakeAction;

Javascript

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';


import Header from './Header';
import Home from './Home';
import Campaigns from './Campaign';
import TakeAction from './TakeAction';
import Resources from './Resources';
import Footer from './Footer';
import './App.css';

function App() {
    return (
        <Router>
            <div className="App">
                <Header />
                <Routes>
                    <Route path="/"
                        element={<Home />} />
                    <Route path="/campaigns"
                        element={<Campaigns />} />
                    <Route path="/take-action"
                        element={<TakeAction />} />
                    <Route path="/resources"
                        element={<Resources />} />
                </Routes>
                <Footer />
            </div>
        </Router>

    );
}

export default App;

CSS

/* App.css */

/* Header */
.header {
  background-color: #CBCE91FF;
  color: #FFFFFF;
  padding: 20px;
}

.header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header .logo {
  margin: 0;
}

.header .nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.header .nav ul li {
  display: inline;
  margin-right: 20px;
}

.header .nav ul li:last-child {
  margin-right: 0;
}

.header .nav ul li a {
  color: #FFFFFF;
  text-decoration: none;
}

.header .nav ul li a:hover {
  text-decoration: underline;
}
/* Home.css */

.home {
  background-color: #F0F0F0;
  padding: 40px;
  margin-top: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.home h2 {
  color: #333333;
  font-size: 32px;
  margin-bottom: 20px;
}

.home p {
  color: #666666;
  font-size: 18px;
  line-height: 1.6;
}

.action-button {
  background-color: #EA738DFF;
  color: #FFFFFF;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.action-button:hover {
  background-color: #FF4081FF;
}

/* Footer.css */

.footer {
  background-color: #333333;
  color: #FFFFFF;
  padding: 40px ;
}

.footer .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer .footer-content {
  display: flex;
}

.footer .footer-content .contact-info,
.footer .footer-content .social-media {
  margin-right: 40px;
}

.footer h3 {
  font-size: 20px;
}

.footer p {
  font-size: 16px;
}

.footer ul {
  list-style-type: none;
  padding: 0;
}

.footer ul li {
  margin-bottom: 10px;
}

.footer ul li a {
  color: #FFFFFF;
  text-decoration: none;
}

.footer ul li a:hover {
  text-decoration: underline;
}

.footer .copyright {
  font-size: 14px;
}


/* Apply similar styles for other components */
/* Campaigns.css */

.campaigns {
  background-color: #F0F0F0;
  padding: 40px 0;
}

.campaigns .container {
  max-width: 800px;
  margin: 0 auto;
}

.campaigns h2 {
  color: #333333;
  font-size: 28px;
  margin-bottom: 20px;
}

.campaign {
  background-color: #FFFFFF;
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.campaign h3 {
  color: #333333;
  font-size: 20px;
}

.campaign p {
  color: #666666;
}

/* Resources.css */

.resources {
  background-color: #F0F0F0;
  padding: 40px 0;
}

.resources .container {
  max-width: 800px;
  margin: 0 auto;
}

.resources h2 {
  color: #333333;
  font-size: 28px;
  margin-bottom: 20px;
}

.resource {
  background-color: #FFFFFF;
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.resource h3 {
  color: #333333;
  font-size: 20px;
}

.resource p {
  color: #666666;
}

/* TakeAction.css */

.take-action {
  background-color: #F0F0F0;
  padding: 40px 0;
}

.take-action .container {
  max-width: 800px;
  margin: 0 auto;
}

.take-action h2 {
  color: #333333;
  font-size: 28px;
  margin-bottom: 20px;
}

.take-action p {
  color: #666666;
  margin-bottom: 20px;
}

.take-action ul {
  padding: 0;
}

.take-action li {
  color: #333333;
  font-size: 16px;
  margin-bottom: 10px;
}

Start your application using the following command.

npm start

Output: Open your web browser and visit http://localhost:3000 to see the website in action.