[DMP 2024]: Unbundling Water Assets #387

[Lucky-Rathore]

Description

Visualize data from learning platforms (programs, content, people).

In the last 4 years, Arghyam's partners have trained over 23,000 front line functionaries on various aspects of water management across the country. This data about these front line workers, the trainings they attended and the content used for the trainings is available and is an asset for the sector.

Any future programs in these areas can utilize the services of these trained and skilled front line functionaries.

The visualization you build will reach out over 8 million readers of the India water portal while helping out the front line workers and programs for rural water security.

Goals & Mid-Point Milestone

Goals

• [Create a mobile responsive page]
• [Add All templates]
• [Visualize learners on Google Maps]
• [Add filters and make content downloadable]

Setup/Installation

No setup needed.

Expected Outcome

A mobile responsive web page that allows users to

1. Select a program and
2. See learners geotagged with the courses they have learnt
3. Select and download training content

Acceptance Criteria

No response

Implementation Details

Google Maps
NextJS
NodeJS
MySQL

Mockups/Wireframes

No response

Product Name

India Water Portal

Organisation Name

Arghyam

Domain

Water

Tech Skills Needed

Database, Node.js, Other

Mentor(s)

Gurudutt Ramachandra, Sreechand Tavva, Lucky

Category

Backend, Database, Frontend

[kanishka66]

Weekly Learnings & Update

Week 1

• Learning 1 : Got access to socion and widget (map) by arghyam
• Learning 2 : Learnt web scrapping tools and techniques: Web Scraper, Scrapper, Devtools Console.
• Learning 3 : Made csv and json file from website and consulted with mentors. Some changes are told and to be made in new csv files.
  This is website from which I scraped data for first week.

Week 2

• Learning 1 : Explored map widget and learnt scraping for participants and content section in map using devtools network.
• Learning 2 : Made Json file for data of people and content from map and converted them to csv .
  Consulted with mentors for further changes and explored database for these csv files.
  From this I scraped for second week.

Week 3

• Learning 1. Explored some new technologies : docker and ORM for storing the scraped data.
• Learning 2. Setup docker and postgres database on my laptop to implement learning 1.
• Learning 3. Tried queries on scraped test dataset.
• Learning 4. Started making mock-up for frontend design to start working on it from next week.

Week 4

• Learning 1. Learnt to make mockup.
• Learning 2. Made mockup for website and finalized it with mentor
• Learning 3. Started making frontend for mockup.

Week 5

• Started working on frontend part of website .
• Features implemented :
• 1. Collapsible Sidebar with all components - Home , About, People Assets, Content Assets and added corresponding routes to them.
• 2. Global search functionality for all users name, location, topics.

Week 6

• More features added to webpage
• 1. Segregated search bars for Name ,Location , Topic
• 2. Merged search functionality for cities ,districts , state in Location search bar
• 3. Toggle button to show data on map
• 4. Search functionality for Content Assets
• 5. Modified Home Page .

Week 7

• Showed work for mid point evaluation.
• Made changes in existing frontend features by discussing with mentors .
• Connected with Quintype team (Providing container for our web page and india water portal ).

Week 8

• Worked on backend.
• Setup postgres in local system and stored csv data in it.
• Made api's from postgres data using express .

Week 9

• Made api's for list view and map view for complete data fetching in one go.
• Fetched data from backend and showed it to frontend

Week 10

• Connected with quintype team for container and hosted postgres
• Added all tables to hosted postgres
• Made changes in backend code and fetched data for api from hosted postgres.

Week 11

• Worked on scalability of website and by breaking api calls
• Segregated map view api's for different levels on map : state , district and users details.
• Break down list view api to smaller chunks for search bar.

Week 12

• Worked on frontend part and made required changes .
• Worked on left bugs i.e data fetching from backend to frontend
• Added docker file and done test deployment!!

[Lucky-Rathore]

Weekly Goals

Week 1

• Understanding the Requirements
• Extracting(Scraping) Data

Week 2

• Understanding the Requirements
• Extracting(Scraping) Data
• Create JSON and CSV for topics and content

Week 3

• Explored Docker and ORM.
• Set up Docker and a PostgreSQL database.
• Executed test data queries.
• Started making mockups for frontend design.