Environmentor Progressive Web App

Connect with environmental experts

As part of the Massachusetts Institute of Technology India Initiative, I was chosen as one of 25 researchers from over 500 nationwide applicants to design solutions for ecological resilience. I focused on the critical issue of limited access to vetted environmental experts. This lack of reliable and timely expertise often results in delays and inefficiencies, worsening existing ecological problems. I developed a web application that connects users with formally trained experts and local community leaders who deeply understand regional issues. The app is designed to be progressive, ensuring accessibility and functionality even in low-connectivity areas where environmental projects are frequently undertaken.

As part of the Massachusetts Institute of Technology India Initiative, I was chosen as one of 25 researchers from over 500 nationwide applicants to design solutions for ecological resilience. I focused on the critical issue of limited access to vetted environmental experts. This lack of reliable and timely expertise often results in delays and inefficiencies, worsening existing ecological problems. I developed a web application that connects users with formally trained experts and local community leaders who deeply understand regional issues. The app is designed to be progressive, ensuring accessibility and functionality even in low-connectivity areas where environmental projects are frequently undertaken.

Environmentor Web App Demo

Organization

MIT India Initiative

Core Technologies

Next.js TailwindCSS Zod validation Prisma PostgreSQL Vercel Blob Storage

Domain

Full-stack Web Development

Date

June 2020

Environmentor Mockup
Environmentor Mockup
Environmentor Mockup

Technical highlight

The homepage of the app allows a user to look through paginated directory of experts from different fields, filter for specific attributes, and also add an expert to the directory. The homepage search and filter functionality works even without an active JS enabled to ensure access to experts' contact details even in low connectivity areas.

Dynamic filtering
Dynamic filtering
Dynamic filtering

Technical highlight

Accomplished a seamless filtering experience for users, as measured by the ability to filter environmental experts based on field, search query, and other criteria, even with JavaScript disabled, by implementing a server-side filtering solution.

This approach utilized progressive enhancement techniques, where server-side rendering was employed to ensure core functionality remained accessible in low-bandwidth or script-disabled environments.

The applied filters dynamically update both the page title and metadata, ensuring the search results are accurately reflected and enhancing discoverability for users.

React hook form
React hook form
React hook form

Technical highlight

I developed functionality to add ecological experts to a database, focusing on robust form validation with React Hook Form and Zod. Using useFormState and useFormStatus, I dynamically managed form states and error handling. I built reusable components with Tailwind CSS and integrated React-markdown to create a rich text editor for expert descriptions.

On the backend, I integrated Vercel Postgres with Prisma ORM to support efficient data management and full-text search, and implemented file uploads to Vercel Blob for seamless asset handling.

Admin dash board
Admin dash board
Admin dash board

Technical highlight

I developed a secure admin dashboard with Clerk authentication, leveraging middleware to ensure access is restricted to authorized users. The dashboard enables administrators to efficiently approve or delete requests from experts seeking to be featured on the platform.

I implemented APIs that interact with a Postgres database, allowing for real-time updates to the approval status of experts. This streamlined process ensures that only qualified experts are featured, maintaining the platform’s integrity.

Takeaways

This project solidified my expertise in developing progressive web applications with Next.js. It reinforced that simple solutions, when they meet genuine needs such as equitable access to reliable experts, can effectively tackle complex environmental issues. Looking ahead, I aim to incorporate multilingual functionality to include local communities with non-English speakers. Their deep, practical wisdom is crucial for crafting holistic solutions to ecological challenges.

This project solidified my expertise in developing progressive web applications with Next.js. It reinforced that simple solutions, when they meet genuine needs such as equitable access to reliable experts, can effectively tackle complex environmental issues. Looking ahead, I aim to incorporate multilingual functionality to include local communities with non-English speakers. Their deep, practical wisdom is crucial for crafting holistic solutions to ecological challenges.

This project solidified my expertise in developing progressive web applications with Next.js. It reinforced that simple solutions, when they meet genuine needs such as equitable access to reliable experts, can effectively tackle complex environmental issues. Looking ahead, I aim to incorporate multilingual functionality to include local communities with non-English speakers. Their deep, practical wisdom is crucial for crafting holistic solutions to ecological challenges.