Skip to content

h-sane/Haven-html

Repository files navigation

Haven-html

Haven: Connecting You with NGOs for a Sustainable Tomorrow. Screenshot 2025-02-20 121155

About the HAVEN Project

Inspiration

The idea for HAVEN emerged from our shared passion for the environment and the recognition that effective environmental change requires collaboration. We noticed that while numerous NGOs are doing impactful work, there wasn’t a single platform that connected these organizations with passionate volunteers and donors. We envisioned HAVEN as the solution to bridge that gap and empower communities to tackle environmental challenges together.

What it does

HAVEN is a comprehensive platform that connects users with NGOs dedicated to solving environmental issues. The website offers:

  • A Home page showcasing recent NGO posts and achievements.
  • An NGOs section where users can explore various organizations and their missions.
  • A Donate page that allows users to contribute anonymously to their favorite causes.
  • A Support tab where users can raise community concerns and share issues, helping NGOs prioritize local environmental challenges.
  • A Profile page that tracks user engagement, connected NGOs, and rewards through badges.

How we built it

We began by mapping out the user journey and designing wireframes for each section. The project was built using:

  • HTML and CSS: For structuring and styling the pages.
  • Bootstrap: To ensure a responsive and modern design across all devices.
  • JavaScript: For interactive elements such as search functionality, modal dialogs, and form handling. Our iterative development approach allowed us to test and refine features continuously, ensuring a seamless user experience.

Challenges we ran into

  • Design Consistency: Achieving a uniform look across all pages, especially balancing overlays and text contrast, required several iterations.
  • Responsive Layouts: Adapting the design for a wide range of devices—from desktops to mobile phones—posed its own set of challenges.
  • Image Integration: Maintaining the correct proportions for various images (e.g., hero images, card images, badge icons) was tricky. We experimented with CSS properties like object-fit to ensure images stayed visually appealing.
  • Time Management: Coordinating multiple aspects of the project—from design to development and testing—with a tight schedule was a significant challenge that pushed us to prioritize core functionalities.

Accomplishments that we're proud of

  • User-Centric Design: We built a platform that is not only visually appealing but also intuitive, making it easy for users to connect with NGOs and contribute to environmental solutions.
  • Seamless Integration: HAVEN successfully brings together various features—volunteering, donating, and raising community concerns—into one cohesive platform.
  • Responsive and Accessible: Our design ensures that the website looks great and works well on any device, reaching a wider audience.
  • Collaborative Spirit: The project stands as a testament to our ability to work together and innovate in the face of environmental challenges.

What we learned

Working on HAVEN taught us the importance of collaboration—not just among team members but also within communities striving for environmental change. We deepened our understanding of web development, responsive design, and user experience. Additionally, we learned that iterative testing and user feedback are crucial for refining a project and ensuring it meets real-world needs.

What's next for HAVEN

Looking ahead, our roadmap for HAVEN includes:

  • Data Integration: Connecting the platform to live APIs and databases for real-time updates on NGO projects and community issues.
  • Enhanced User Features: Implementing user authentication, personalized dashboards, and more interactive elements to engage our community further.
  • Mobile App Development: Expanding HAVEN’s reach by developing a dedicated mobile application.
  • Wider NGO Partnerships: Partnering with more environmental organizations to broaden the impact and reach of the platform.
  • Continuous Improvement: Leveraging user feedback to refine features and expand the platform's capabilities, ensuring HAVEN remains a vital resource for environmental change.

Together, we are building HAVEN to not only connect people but to drive tangible, positive environmental impact.

Snapshots of the Website

Screenshot 2025-02-20 125518 Screenshot 2025-02-20 125537 Screenshot 2025-02-20 125603 Screenshot 2025-02-20 125710 Screenshot 2025-02-20 125742 Screenshot 2025-02-20 125803 Screenshot 2025-02-20 125851

About

Haven: Connecting You with NGOs for a Sustainable Tomorrow.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors