1 of 20

PARD PROJECTS WEBSITE

Leveraging Technology to Showcase Faith-Based SDG Initiatives

2 of 20

Team Introduction

  • Software Engineering Head
  • Data science graduate student

Abishek Chiffon

​

Sudeep Khandekar

Computer science graduate student

​

Chandan Kumar

​

Computer science graduate student

Tanvi Patel

Nithin Sarva

Computer science graduate student

Computer science graduate student

Hari Prasannaa Thangavel Ravi

​

​

Data science graduate student

Computer science graduate student

Divya Nidamanuri

3 of 20

Purpose of the Project

  • Goal: Showcase projects by PaRD members addressing climate and environment-related SDGs.
  • Scope:
    • Focus on SDGs 6, 13, 14, and 15.
    • Include projects running or closed within the last 5 years.
  • Output: A user-friendly, mobile-compliant web interface.

4 of 20

Features

Searchable Database with Key Filters:

    • By SDG, tags, country, or organization.
    • Maps for visual representation.
    • Mobile and Desktop Friendly.
    • Accessible design with inclusive colors(EU) and fonts.
    • Admin portal for easy data updates.
    • Easy data management for PaRD secretariat
    • Downloadable reports and searchable content

5 of 20

Challenges and Considerations

    • Storing the data in a secure space.

Data security:

    • Verification of entries and updates to the dataset.

Future Maintenance:

6 of 20

Tech Stack

Backend: Supabase – A powerful open-source Firebase alternative built on PostgreSQL, providing instant RESTful APIs, authentication, and real-time subscriptions out of the box.

Frontend: Next.js + React – Combines the power of React for dynamic UI components with Next.js for optimized performance, server-side rendering, and seamless routing.

Database: Supabase (PostgreSQL) – Offers a scalable SQL-based structure for efficient data storage, real-time updates, and seamless integration with the backend services.

Deployment: Vercel – Used for hosting the Next.js frontend, enabling fast, global deployments with automatic CI/CD and custom domain support.

7 of 20

Design PHASE

  • Wireframes: Created using Figma.
  • Created comprehensive Figma wireframes
  • Designed 7 key pages
  • Validated designs with PaRD team
  • Page Designs:
  • Pages developed in the fall semester
    • - Landing Page: Overview and navigation.
    • - Topics Page: Lists SDG topics with tags and search.
    • - Project List Page: Projects filtered by SDG or tags.
    • - Organization List Page: Similar functionality.
  • Pages developed on spring semester
    • Project Details Page: Displays location, organizations, and SDG themes.
    • Admin project page
    • Admin Organisation page

8 of 20

PAGES DEVELOPED��

Project Details and organization page

  • Contains details about the project and the dataset used
  • Also contains few charts that are pre-designed for the entire dataset.

9 of 20

Pages developed�

Admin Login Page

Landing Page

Login access controlled using supabase

10 of 20

Admin Dashboard(Organisations)

Design and workflow��

11 of 20

Admin Dashboard (Project)

Design and workflow

12 of 20

Admin Dashboard (Project)

Design and workflow

13 of 20

Admin Dashboard (Project)

Design and workflow

14 of 20

BACKEND

Migrated both project and organization tables into supabase and created apis for the tables.

15 of 20

BACKEND

16 of 20

Development Achievements

  • Backend Development:
  • Designed and structured database schema in Supabase (PostgreSQL).
  • Integrated Supabase authentication and real-time capabilities.
  • Frontend Development:
  • Built dynamic, reusable React components using Next.js for enhanced routing and server-side rendering.
  • Developed responsive Landing Page, Topics Page, Project List Page, Admin login, Admin project and and admin organization.
  • Utilized Supabase auto-generated APIs for retrieving topics, project lists, and detailed project information.�Deployment:
  • Deployed the full-stack application on Vercel for seamless CI/CD, custom domain support, and optimized global performance.

​

17 of 20

Pages Developed last semester

Landing page

Topics page

18 of 20

PAGES Developed last semster

Projects filtered by SDG or tags.

Displays location, organizations, and SDG themes.

Projects list page

19 of 20

Next Steps

Future Goals:

- Complete APIs.

- Develop the admin interface for new data uploads and deletion

- Ensure dynamic data handling and feature testing.

- Collaborate with PaRD for project details and organization details page

- Optimize UI/UX for accessibility.

20 of 20

Conclusion

Successful technical stack implementation

Comprehensive database design

Functional API development

Mobile-responsive interface

EU-compliant visual design