#MonthlyEarthDay Portal and Community Hub

A platform dedicated to inspiring and facilitating environmental action every month.

Table of Contents

• Project Overview
• Features
• Target Audience
• UI/UX Design Principles
• Tech Stack
• Roadmap
• Getting Started (Local Development)
• Deployment

Project Overview

The #MonthlyEarthDay portal is a dynamic online platform and community hub aimed at fostering a global movement for consistent environmental action. Our mission is to move beyond a single Earth Day and encourage individuals and communities to engage in impactful activities every month. The portal serves as a central point for discovering actions, sharing experiences, tracking collective impact, and building a supportive community dedicated to protecting our planet.

The platform will track and showcase the tangible environmental and social impact generated by the community's efforts, such as tons of waste collected, trees planted, and cities involved.

Features

The #MonthlyEarthDay portal will include the following key features:

• Publication Feed: A feed showcasing user-generated content related to actions and initiatives.
• Voting and Polls: Functionality within the feed to engage the community and gather feedback on ideas or initiatives.
• Experience Sharing: A space for users to share their personal experiences, challenges, and successes in participating in environmental actions.
• Blog Articles: Informative articles and news related to environmental topics, sustainability, and the #MonthlyEarthDay movement.
• List of Actions: A comprehensive and searchable list of suggested environmental actions and initiatives that users can participate in.
• Calendar of Scheduled Actions: A calendar view of upcoming environmental events and scheduled actions.
• User-Generated Content: Allowing users to contribute their own content, such as sharing photos, videos, and stories of their actions.
• Testimonials: A section to showcase inspiring testimonials from participants about their involvement and the impact of the movement.
• Institutional Information: Pages providing details about the #MonthlyEarthDay initiative, its mission, and how to get involved on a broader level.

Target Audience

The #MonthlyEarthDay portal is designed for individuals, families, schools, community groups, NGOs, and businesses who are passionate about environmental protection and are looking for ways to take consistent action and connect with a like-minded community.

UI/UX Design Principles

The portal is being developed with a strong focus on a clean, modern, mobile-first design with an app-like feel. The core design principles are:

• App-like Feel: Smooth transitions and interactive elements.
• Clean & Minimalist: Plenty of white space to avoid clutter and focus on content.
• Intuitive Navigation: Easy and obvious navigation flow.
• Mobile-First Priority: Designed for small screens first, adapting to larger screens.

Color Palette:

• Primary Green (#4CAF50)
• Secondary Green (#8BC34A)
• Dark Green (#2E7D32)
• Earth Brown (#795548)
• Ocean Blue (#2196F3)
• Light Gray (#F5F5F5)
• Medium Gray (#E0E0E0)
• Dark Gray (#424242)
• Text Light (#FFFFFF)
• Text Dark (#212121)

Typography:

• Primary Font (Body Text): Inter (sans-serif)
• Secondary Font (Headings/Highlights): Merriweather (serif)

Common UI Elements: Buttons (rounded, various styles), Cards (with shadows and rounded corners), Inputs and Textareas (rounded, clear focus state), Tags (rounded pills), Icons (consistent style), and Images (high-quality, rounded corners).

Tech Stack

The project is built using the following technologies:

• React: A JavaScript library for building user interfaces.
• Vite: A fast frontend build tool.
• TypeScript: A typed superset of JavaScript that compiles to plain JavaScript.
• react-router-dom: For handling client-side routing.
• CSS: For styling, following a mobile-first approach and incorporating the defined color palette and typography. (Potential use of a CSS framework like Tailwind CSS for utility classes).

Roadmap

Our roadmap for the #MonthlyEarthDay portal MVP includes the following phases:

Phase 1: Completing the Core UI and Navigation

• Refine Header and Add Footer (Completed)
• Complete Landing Page (Completed)
• Style Individual Section Pages (In Progress)

Phase 2: Building Out Section Content and Features

• Implement List of Actions Page (Placeholder Implemented)
• Implement Blog Articles Page (Placeholder Implemented)
• Implement Community Hub/Feed Page (Placeholder Implemented)
• Implement Calendar of Scheduled Actions Page (Placeholder Implemented)
• Implement Testimonials Page (Placeholder Implemented)

Phase 3: Enhancements and Refinements

• Implement Responsiveness (Pending)
• Add Placeholder Images and Icons (Pending)
• Basic Accessibility (Pending)

Future Phases (Beyond MVP):

• Implement user authentication and profiles.
• Develop full functionality for content creation and interaction (posting, voting, commenting).
• Integrate with external services or APIs (e.g., mapping for action locations).
• Enhance search and filtering capabilities.
• Implement detailed impact tracking and visualization.
• Develop administrative features for content moderation.

Getting Started (Local Development)

To get a local copy of the project up and running, follow these steps:

1. Clone the repository:

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:

export default tseslint.config([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      // Other configs...

      // Remove tseslint.configs.recommended and replace with this
      ...tseslint.configs.recommendedTypeChecked,
      // Alternatively, use this for stricter rules
      ...tseslint.configs.strictTypeChecked,
      // Optionally, add this for stylistic rules
      ...tseslint.configs.stylisticTypeChecked,

      // Other configs...
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
])

You can also install eslint-plugin-react-x and eslint-plugin-react-dom for React-specific lint rules:

// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'

export default tseslint.config([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      // Other configs...
      // Enable lint rules for React
      reactX.configs['recommended-typescript'],
      // Enable lint rules for React DOM
      reactDom.configs.recommended,
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
])