Refuge refuge logo

Step into a realm of hope and connection with Refuge! Inspired by the global effort to support displaced communities, this platform is crafted for those who aspire to bridge gaps and foster unity. Bringing together aid providers and seekers, Refuge stands as a testament to the power of solidarity in challenging times.

Description

Refuge - AidConnect/RefugeeAid emerges as a platform addressing the challenge of efficiently connecting aid workers and compassionate citizens with refugee camps or organizations. It ensures that assistance meets the refugees, asylees, and migrants' current and specific needs in an engaging, real-time feed. This initiative is a part of the Mod 4, Capstone Project at Turing School.

image

Live Demo

Engage with Refuge.

Upon entering the platform, users are greeted with a dynamic real-time feed showcasing the current needs of each camp. Navigate through the integrated map interface to locate nearby refugee camps swiftly. The platform also offers educational resources, empowering users with insights on effective assistance methods and cultural considerations.

image

Features

  • Real-time Feed: A dynamic feed showcasing each camp's current needs.
  • Integrated Map Interface: Swiftly locate and connect with nearby refugee camps.
  • Educational Resources: Empower yourself with insights on effective assistance methods and cultural considerations.
image

Preview of App

Refuge

image

Technologies:

Refuge is built using a blend of modern web technologies:

JavaScript HTML5 CSS3 Node.js Git React Cypress GraphQL Apollo Client CI/CD
image

Setup & Installation

Get Refuge running on your machine:

  1. Clone the repository from: git clone https://github.com/Refugee-Aid-Capstone/refugee-aid-fe
  2. Move to the project directory: cd refugee-aid-fe
  3. Grab the dependencies: npm install
  4. Fire up the app: npm start
image

Feedback & Contributions

We welcome feedback and contributions to Refuge. If you have suggestions, bug reports, or wish to contribute to the code or just want to, follow these steps:

  1. Fork the Repository: Start by forking the main repository.
  2. Clone Your Fork: git clone git@github.com:YOUR_USERNAME/REPO_NAME.git
  3. Create a New Branch: git checkout -b your-branch-name
  4. Make Changes & Commit: After making your changes, commit them with a meaningful commit message.
  5. Push to Your Fork: git push origin your-branch-name
  6. Open a Pull Request: Go to the main repository and open a pull request from your branch.

For bug reports and feedback, please open an issue on our GitHub issues page.

image

Learning Highlights

  • GraphQL Mastery: Delved deep into the world of GraphQL, harnessing its power for efficient and flexible data retrieval.
  • Apollo Client: A comprehensive state management library for JavaScript that enables you to manage both local and remote data with GraphQL.
  • CI/CD Implementation: Integrated Continuous Integration and Continuous Deployment pipelines, ensuring smooth transitions from development to production.
  • CI/CD Practices: Continuous Integration and Continuous Deployment/Delivery, a coding practice where team members integrate their work frequently to detect integration bugs as early as possible.
  • React & Router: Crafted a multi-page application, navigating the complexities of React Router.
  • Cypress: Delved into Cypress, ensuring a robust frontend testing experience.
  • User-Centric Design: Prioritized the user, focusing on their needs and feedback to drive the platform's features and design.
image

Meet the developers behind Refuge:

Ethan Black - Back-End Developer LinkedIn || GitHub
GitHub Avatar for Ethan Black
Artemy Gibson - Back-End Developer LinkedIn || GitHub
GitHub Avatar for Artemy Gibson
Davis Weimer - Back-End Developer LinkedIn || GitHub
GitHub Avatar for Davis Weimer
Renee Pinna - Front-End Developer LinkedIn || GitHub
GitHub Avatar for Renee Pinna
Parvin A. Sattorova - Front-End Developer LinkedIn || GitHub
GitHub Avatar
image

Reflections

Refuge posed challenges, however also provided immense learning. From designing a platform with a real-time feed to ensuring seamless navigation, each challenge paved the way for innovation and growth. The integration of Cypress for frontend testing highlighted the importance of reliable and comprehensive tests, ensuring a bug-free experience for users. The collaboration between frontend and backend teams was pivotal in realizing the project's vision, showcasing the essence of teamwork in software development.

logo Major Triumphs

  • Collaborative Spirit: The team showed a remarkable spirit of collaboration, with frontend and backend seamlessly integrating features and addressing challenges.

  • User-Centric Design: The consistent focus on the end-user and their needs ensured that every feature added value and enhanced the user experience.

  • Rapid Prototyping: Through iterative prototyping and feedback sessions, we were able to quickly pivot and refine our features, leading to a polished final product.

Logo Hurdles Overcome

  • Integration with Real-time Data: Initially, synchronizing the platform's real-time feed with the vast and dynamic data sources posed a challenge. Through collaboration and persistent debugging, we refined our data-fetching algorithms to ensure seamless updates.

  • Custom Map Interface: Designing an integrated map interface that was intuitive and user-friendly took several iterations and user feedback sessions. The final result was a blend of performance and aesthetics.

  • Responsive Design: Ensuring the platform was equally effective across devices was challenging, given the variety of interactive elements. We utilized SCSS and regular cross-device testing to achieve this.

  • Diverse Technologies: Integrating a plethora of modern web technologies, from GraphQL to CI/CD pipelines, required a steep learning curve and rigorous testing. Yet, the end product stands as a testament to our commitment and persistence.

image