[DMP 2024]: Power up our Portals #389

[sbhaya]

Ticket Contents

Description

India Water Portal is a treasure trove of knowledge for water. Students, researchers and experts visit the site for new insights, knowledge and research.

Three features in this project revolve around user contributions. Some or all of these features currently exist, but are only available for editors. Our audience currently email us to contribute. This project aims to create

1. User contributed Opportunities and Events
2. User contributed articles
3. User contributed translations

India water portal has a section for events and opportunities, a lot of our audience open this section. In this project we enhance this section to have user contributions. Users should be able to share Title, dates, and add an attachment.

Goals & Mid-Point Milestone

Goals

• [ ] [Create Logged in User roles]
• [x] [User contributed Events and Opportunities]
• [x] [User contributed articles]
• [ ] [User contributed translations]

Setup/Installation No response

Expected Outcome A user should be able to login and contribute on India Water Portal. They can add a bio and contribute articles, events, opportunities and translations for existing articles

Finalist Contributor Yash Panjwani

Implementation Details Quintype

Mockups/Wireframes No response

Product Name India Water Portal

Organisation Name Arghyam

Domain Water

Tech Skills Needed Quintype CMS

Mentor(s) Sreechand Tavva, @sbhaya

[sbhaya]

Weekly Goals

Week 1

• [x] Create a Product Requirements Document
• [x] Develop User Personas
• [x] Design User Flow Journeys

Week 2

• [x] Research Quintype Content Management System (CMS)
• [x] Investigate Malibu, Metype, and Bold Backend CMS

Week 3

• [x] Revise Product Requirements Document
• [x] Enhance User Persona Profiles
• [x] Update User Flow Journeys

Week 4

• [x] Research Metype Forms
• [x] Familiarize with Pagebuilder Frontend Software
• [x] Develop a Publish/Contribute Button

Week 5

• [x] Apply custom CSS styling that is aligned with the organisation's identity to the contribution button.
• [x] Embed the Metype form into the project and customise it as per the requirements.

Week 6

• [x] Link the Metype form with the contribute button.
• [x] Test the form's functionality to ensure it sends data correctly to the Bold Backend CMS.
• [x] Troubleshoot and resolve any integration issues.

Week 7

• [x] Publish test inputs from the Metype form onto the demo website.
• [x] Validate the end-to-end process from user submission to live display.
• [x] Ensure the published content appears as expected and is fully functional.

Week 8

• [x] Integrate Quintype APIs and ensure proper URL redirection.
• [x] Understand the structure and integration of external APIs (Quintype APIs).
• [x] Implement authentication mechanisms by redirecting URLs to login for Metype Contributions.
• [x] Improve error handling and routing in the code.

Week 9

• [x] Enhance the UI of the User Contributions Page
• [x] Update user journey across the platform in the PRD.

Week 10

• [x] Understand and implement Reverse Proxy for handling API requests.
• [x] Troubleshoot API requests and use reverse proxies as a workaround when localhost fails.

Week 11

• [x] Begin understanding deployment processes and Docker setup
• [x] Explore the process of bundling the project for deployment and identifying potential bottlenecks

Week 12

• [ ] Deploy the project using Blacknight and create a Dockerfile

[younglord088]

Weekly Learnings & Updates

Week 1

• Deep dived into the functionalities and objectives of the India Water Portal.
• Understood the types of users who will use the services and contribute to the Portal.
• Crafted User flow journeys on the Portal.

  Week 2

• Introduced myself to the Quintype Content Management System and investigated its funtionalities.
• Researched Malibu (JS Framework), Metype(Forms and Comments) and Bold Backend CMS.

  Week 3

• Understood the Changes in the Product Requirements.
• The Overall development process was changing and I learnt the new Technologies required.

  Week 4

• Read the documentation Quintype had for Metype Forms.
• Used Page builder Software to add code to the Frontend.

  Week 5

• Tested the data flow from Metype form on Page builder to Bold Backend CMS.
• Posted different inputs of test data to the Demo Website from the Bold Backend CMS.

  Week 6

• Setup a new React Application and created the folder Structure.
• Tested the APIs provided by Quintype in Postman.

  Week 7

• Built User Contributions Page.
• Tested APIs of Quintype to receive data

  Week 8

• Integrating Quintype APIs in code.
• Redirecting Urls to Login for Metype Contributions.

  Week 9

• Enhanced UI of User Contributions Page.
• Created New flow documentation.

  Week 10

• Understood Reverse Proxy and read Quintype Documentation.
• Used Reverse Proxy as API requests from localhost was not working.

  Week 11

• Create 3 custom Metype forms to transfer data to Bold.
• Test

  Week 12

• Using Blacknight to deploy the project
• Create DockerFile of the Project