Opportunity Hack 2020: Vidyodaya

A high-quality, updated website that allows visitors to see new posts created by admins

Comment

Team-02: Vidyodaya

Check out the live site!

https://vidyodaya.netlify.app/

About Vidyodaya

Vidyodaya’s mission is to improve the quality of education received by underprivileged children in adivasi communities and to establish a culturally appropriate learning system with active participation of the community.

Our task is to create a website for Vidyodaya that is more appealing and user-friendly for new visitors.

Requested Features:

  • Modernize the current website
  • Make the website more kid-friendly, yet contains tribal elements
  • Improve the navigation to various web pages
  • Create a login for admins, and allow new admins to be created
  • Allow admins to add reports and articles to the site
  • Create a contact form

What We Are Building: Front-End

We created an initial design in Figma which you can experience by clicking on the image below.

Home Page

What We Are Building: Back-End

Below you can see our database table layout for the backend.

[Database Tables]

How We Built It

The frontend solution for Vidyodaya includes:

  • HTML
  • CSS
  • JavaScript
  • React
  • Context
  • Styled Components

The backend solution for Vidyodaya includes:

  • Java
  • Spring
  • PostgresSQL
  • OAuth 2.0
  • Cloudinary

The project for Vidyodaya is hosted on:

  • Netlify for the frontend
  • Heroku for the database

Challenges We Ran Into

Initially we started out working on the Zuri's Circle project which we thought was a Website project. When we understood that it was supposed to be an Mobile App we looked for solutions to build it with our current skillsets. Ultimately we determined we were not currently up to the challenge of picking up new languages so quickly, and we ended up changing to the Vidyodaya project. This left us with only 4 days to complete the project instead of the original 7 days.

Accomplishments We Are Proud Of

We are extremely proud of our communication skills and quick work, considering how little time we had to pull this together. Our entire team was excellent to work with.

Our Members

How We Addressed Each Of The Judging Critera:

CSV / FILE UPLOAD-DOWNLOAD

NPOs can easily download information about their volunteers in a CSV format which will be updated by the volunteer form on the website. There currently is no need for any other information to be downloaded, but it would be simple to add.

PROBLEM STATEMENT

Our task was to create a website for Vidyodaya that is more appealing and user-friendly for new visitors. Their current website has many buried tabs and it is difficult for users to find what they are looking for. We modernized the current website and made it more kid-friendly, yet containing tribal elements that the NPO requested.

DOCUMENTATION

Since we paired down how many pages existed on the site, and improved the navigation to various web pages, this made it easy for both the admins and the visitors to find what they are looking for. In addition we prepared backend documentation for any future programmers working on this website.

SECURITY

We created a secure login for admins using OAuth2, and the ability for new admins to be created. Only Admins have the ability to add and remove files from the site.

POLISH

The NPO could use this site as their own starting today. The backend is currently deployed with Heroku and the front end is deployed on Netlify. The main features of the site are fully functional. Some features we would still want to add are:

  • News Letter sign up
  • Chat Feature (to have more active engagement with visitors of the site)
  • Visitor Login
  • Donor Dashboard (so admins can track their interactions and donations, and send updates to those whom they have helped.)
  • Volunteer Dashboard (so volunteers can see progress, future activities, current tasks, and comprehensive detail for their role as a volunteer.)
  • For this website to be a progressive web app that will help the NGO manage and interact with people within and outside the organization.
  • A form to add Committee members to the committee page
  • Password recovery for admins
  • A fully mobile responsive website
Share this project:

Updates