Inspiration
When I moved to a new country, my sister became my personal guide—my "Her Map." She showed me the places to go, the hidden gems where I’d feel welcome, and the unsafe areas to avoid. Her guidance gave me confidence and a sense of safety in an unfamiliar place. And then we realized something important—not everyone has that kind of support.
We started to ask ourselves: what if we could change that? What if every woman, no matter where she was, had access to a map built on the shared knowledge and experiences of other women? A map that could provide not just directions, but confidence, safety, and community. That’s how Her Map was born.
What it Does
Her Map is an interactive web application that enables users to:
- Explore a curated map featuring significant stories and locations shared by women.
- See and Add "Stories" and "Resources."
- Contribute their own pins with descriptions, creating a collaborative and evolving map.
How We Built It
- Frontend: Developed using React.js with TypeScript and CSS for a clean, modern, and responsive design.
- Mapping: Integrated Mapbox GL for interactive maps, allowing precise pin placement and filtering functionality.
- Backend: Utilized MongoDB and Express.js to handle user submissions and dynamically update the map data.
- Deployment: Hosted on Vercel, ensuring fast, reliable, and scalable performance.
Challenges We Ran Into
- Map Integration: Ensuring smooth Mapbox integration with React components was a key challenge, especially when managing state changes and rendering markers dynamically.
- Frontend Development: Initially using Tailwind CSS, encountered many difficulties with Tailwind interacting with the Typescript.
- Conflict Resolution: During development, managing Git conflicts and ensuring seamless team collaboration posed some hurdles.
Accomplishments That We're Proud Of
- Successfully created an intuitive, aesthetically pleasing interface that resonates with the project's mission.
- Overcame technical challenges with Mapbox to deliver a fully functional map experience, working with maps for the first time.
- Encountered many learning curves related to databases, querying data, and connecting the front to the backend, but we persisted.
- Built a platform that has the potential to empower and amplify underrepresented voices.
What We Learned
- Enhanced our understanding of integrating complex libraries like Mapbox with React.
- Delved into all things databases!
- Learned the importance of effective collaboration and version control in managing a multi-faceted project, using best practices in GitHub with issue tracking, branches and making pull requests.
What's Next for Her Map
- User Authentication: Enable users to create accounts for personalized experiences and secure contributions.
- Mobile App: Develop a mobile-friendly version to make Her Map more accessible on the go.
- Accessibility: Implement features to improve usability for individuals with disabilities, ensuring inclusivity.
Log in or sign up for Devpost to join the conversation.