"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
- Develop a user-friendly web app for monitoring, reporting, and promoting climate progress in the Philippines.
- Provide accurate climate data for informed decision-making.
- Empower and engage local individuals and communities, with a focus on youth involvement.
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.
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.
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
http://k5api.aidre.codes/swagger/
-
Clone the repository:
git clone https://github.com/aidrecabrera/project_k5.git cd project_k5
-
Frontend Setup:
-
Navigate to the frontend directory:
cd frontend
-
Install dependencies:
npm install
or
pnpm install
-
-
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
-
-
Frontend Development:
-
Start the React development server:
npm start or pnpm start
-
Access the frontend in your browser at
http://localhost:3000
.
-
-
Backend Development:
-
Start the Django development server:
python manage.py runserver
-
Access the backend API at
http://localhost:8000
.
-
This is the recommended way to install Django.
-
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. -
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.
-
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.
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
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/[email protected]/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
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;