"Project K5 Progress" aims to drive climate action at the grassroots level, creating a sustainable and
resilient future for the Philippines. Together, we can win the race against the climate crisis.

---

Motivation. The Philippines faces severe climate challenges, from natural disasters to rising sea levels and biodiversity loss. It's essential to bridge the gap between climate promises and effective action, especially as a signatory to The Paris Agreement.

Empathy. Project K5 Progress" empathizes with diverse stakeholders:

• Filipino Civil Society: They need reliable, real-time climate information for effective climate engagement.
• Public Health Authorities: Similar to the COVID-19 pandemic, climate action requires real-time data communication and a pipeline between the general public and the authorities.
• Filipino Youth: Engaging the youth is vital for a sustainable future.

Definition. Existing information systems lack timely, localized climate data. Misinformation on the internet exacerbates this issue, necessitating a trusted climate information system.

Ideation. Inspired by COVID-19 dashboards, "Project K5 Progress" creates a web app for Filipinos with:

• Real-time Climate Data
• Climate Reporting
• Community Engagement
• Youth Empowerment
• Global Climate Commitment Tracking

Objectives

1. Develop a user-friendly web app for monitoring, reporting, and promoting climate progress in the Philippines.
2. Provide accurate climate data for informed decision-making.
3. Empower and engage local individuals and communities, with a focus on youth involvement.

Tech Stack

The selection of our technical stack is driven by the imperative of time constraints. There is a need to ensure the timely development and deployment of a functional web application. Therefore, the project lead has chosen technologies that strike a balance between efficiency, reliability, and ease of implementation.

Getting Started

Prerequisites

Before you begin, make sure you have the following software and tools installed:

• Node.js - for running ReactJS.
• Python - for the backend.
• Django - a Python web framework.
• MongoDB - a NoSQL database.
• PyMongo - Python driver for MongoDB.

Django Project Dependencies

To run this project, you'll need to install the following Python packages and their specified versions:

• asgiref==3.7.2
• certifi==2023.7.22
• charset-normalizer==3.2.0
• Django==4.1.11
• django-cors-headers==4.2.0
• djangorestframework==3.14.0
• djongo==1.3.6
• dnspython==2.4.2
• docopt==0.6.2
• idna==3.4
• pipreqs==0.4.13
• pymongo==3.12.3
• pytz==2023.3.post1
• requests==2.31.0
• sqlparse==0.2.4
• tzdata==2023.3
• urllib3==2.0.5
• yarg==0.1.9

You can use pip to install these packages in your Python environment:

pip install -r requirements.txt

API Server

http://k5api.aidre.codes/swagger/

Installation

1. Clone the repository:

   git clone https://github.com/aidrecabrera/project_k5.git
   cd project_k5

2. Frontend Setup:

   • Navigate to the frontend directory:

     cd frontend

   • Install dependencies:

     npm install

     or

     pnpm install

3. Backend Setup:

   • Navigate to the backend directory:

     cd backend

   • Create a virtual environment (optional but recommended):

     python -m venv venv

   • Activate the virtual environment:

     • On Windows:

       venv\Scripts\activate

     • On macOS and Linux:

       source venv/bin/activate

   • Install Django and PyMongo:

     pip install django pymongo

   • Apply database migrations:

     python manage.py migrate

Usage

1. Frontend Development:

   • Start the React development server:

     npm start or pnpm start

   • Access the frontend in your browser at http://localhost:3000.

2. Backend Development:

   • Start the Django development server:

     python manage.py runserver

   • Access the backend API at http://localhost:8000.

Setting up Django Framework

Installing an official release with pip

This is the recommended way to install Django.

1. Install pip. The easiest is to use the standalone pip installer. If your distribution already has pip installed, you might need to update it if it’s outdated. If it’s outdated, you’ll know because installation won’t work.

2. Take a look at venv. This tool provides isolated Python environments, which are more practical than installing packages systemwide. It also allows installing packages without administrator privileges. The contributing tutorial walks through how to create a virtual environment. However, in this instance, I will use Poetry.

3. After you’ve created and activated a virtual environment, enter the command:

   $ python -m pip install Django

Creating a project

$ django-admin startproject k5

This will create a k5 directory in the current directory.

k5/
    manage.py
    k5/
        __init__.py
        settings.py
        urls.py
        asgi.py
        wsgi.py

The development server

Change into the outer mysite directory, if you haven’t already, and run the following commands:

$ python manage.py runserver

You’ll see the following output on the command line:

Watching for file changes with StatReloader
Performing system checks...

System check identified no issues (0 silenced).

You have 18 unapplied migration(s). Your project may not work properly until you apply the migrations for app(s): admin, auth, contenttypes, sessions.
Run 'python manage.py migrate' to apply them.
September 28, 2023 - 21:15:05
Django version 4.2.5, using settings 'k5.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CTRL-BREAK.

Making the Rest API application in the project

The following command will create an application for the project that will handle the API-related transactions within the project.

$ python manage.py startapp api

Setting up React Framework via ViteJS

Scaffolding the frontend with pnpm (I replaced npm due to the benefits): $ pnpm create vite@latest k5_frontend

Then follow the prompts. I am using the JavaScript without the SWC.

$ cd k5_frontend

$ pnpm install

Packages: +265
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Progress: resolved 287, reused 211, downloaded 54, added 265, done
node_modules/.pnpm/esbuild@0.18.20/node_modules/esbuild: Running postinstall script, done in 473ms

dependencies:
+ react 18.2.0
+ react-dom 18.2.0

devDependencies:
+ @types/react 18.2.23
+ @types/react-dom 18.2.8
+ @vitejs/plugin-react 4.1.0
+ eslint 8.50.0
+ eslint-plugin-react 7.33.2
+ eslint-plugin-react-hooks 4.6.0
+ eslint-plugin-react-refresh 0.4.3
+ vite 4.4.9

Done in 9.2s

Installation of Tailwind CSS

Install tailwindcss and its peer dependencies, then generate tailwind.config.js and postcss.config.js files.

pnpm install -D tailwindcss postcss autoprefixer

Packages: +49
+++++++++++++++++++++++++++++++++++++++++++++++++
Progress: resolved 336, reused 312, downloaded 2, added 49, done

devDependencies:
+ autoprefixer 10.4.16
+ postcss 8.4.30
+ tailwindcss 3.3.3

Done in 3.5s

pnpx tailwindcss init -p

Created Tailwind CSS config file: tailwind.config.js
Created PostCSS config file: postcss.config.js

Add the paths to all of your template files in your tailwind.config.js file.

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Add the @tailwind directives for each of Tailwind’s layers to your ./src/index.css file.

@tailwind base;
@tailwind components;
@tailwind utilities;