Skill Exchange

Connecting neighbors to share skills, learn new ones, and build a stronger community!

Comment 1

Inspiration

The inspiration for Skill Exchange came to us during a walk through our neighborhood. We noticed several community bulletin boards—covered in notes with tear-off tabs. Each note represented someone’s need or offer: guitar lessons, help with gardening, or a request for French tutoring. It was a simple, analog way for people to share their skills or learn something new, but it felt limited by the small reach of a physical board. Curious, we researched online to see if there was a platform where users could create profiles that could be viewed by their community for skill-sharing, but we found none that fit the idea we had in mind. We realized there was a gap and an opportunity to create something impactful. Inspired by the spirit of those paper notes, we set out to digitalize this concept—preserving the sense of community exchange, but leveraging technology to expand its reach and accessibility. Thus, Skill Exchange was born: a platform where neighbors can effortlessly connect to share talents, teach, and learn in an interactive way.

What it does

Skill Exchange is a platform we built to empower individuals in our community to connect with each other by creating personalized profiles that list their skills offered and skills they wish to learn. We envisioned a space where users could discover neighbors within a 10 km radius who have matching interests or complementary skills, fostering an environment of collaboration and knowledge-sharing. We designed Skill Exchange so that each user can create a detailed profile, including their name, location, skills offered, skills wanted, availability, contact preferences, and a short bio. This detailed information helps create an authentic community atmosphere where everyone can understand each other's expertise and needs. We focused on making the interface seamless, allowing users to easily edit their profile details whenever they need, ensuring that the information remains current and useful.

To help users connect locally, we leveraged geolocation technology to make finding neighbors easy and engaging. Users can search for specific skills and view others’ profiles in a map-based format. Once a user finds a profile that meets their needs, they can initiate contact by sending an invite. This invite starts a messaging conversation, making it easy to coordinate logistics, discuss needs, and arrange meetings, all within the platform. We also added a review feature to Skill Exchange, allowing users to leave feedback after collaborating. This helps build accountability and trust within the community, making our platform more reliable and transparent. We believe that these reviews not only enhance trust but also help others make informed decisions, leading to stronger and more effective skill-sharing relationships.

How we built it

The Skill Exchange Portal was designed with multi-feature integration, employing state-of-the-art frameworks, APIs, and front-end technologies for a highly interactive and engaging user experience. In the backend, we utilized Node.js with the Express.js framework, creating support for asynchronous processing and an advanced routing system to ensure fluid server-side operations. Express-session was integrated for stateful session management, enhancing security and enabling personalized user interactions. On the front-end, HTML5, CSS3, and ES6 JavaScript were used, incorporating CSS Flexbox for a responsive, grid-based layout. We used Google Fonts for professional typography and Leaflet.js for interactive mapping, while addresses were translated into geospatial coordinates via the OpenStreetMap Geocoding API. The node-fetch package was employed to streamline server-client data flow, enhancing user interactivity with real-time mapping. We also leveraged modern browser APIs for precise geolocation, enhancing localized experiences for users.

The JavaScript DOM layer ensured dynamic interaction without page reloads, providing a seamless user experience. CSS animations, hover effects, and transitions added a refined touch to all user actions, enriching the interface with subtle yet impactful visual feedback. Responsive design principles, including media queries and flexible layouts, ensured usability across diverse devices, maintaining functionality and visual consistency. This comprehensive approach to device compatibility supports continuous engagement and accessibility.

Challenges we ran into

Throughout the development of Skill Exchange, we faced several challenges that pushed us beyond our comfort zone. One major hurdle was ensuring a seamless integration of multiple APIs for mapping and geolocation, specifically using Leaflet.js and OpenStreetMap. We wanted to provide accurate and interactive geographical data to enhance user experience, but it required a lot of precise coordination to make the maps dynamic and intuitive. Another significant challenge for us was creating a user interface that was both intuitive and engaging, while also being accessible across different devices and screen sizes. We have a strong background in backend development, but we had less experience with front-end technologies. Designing an interface that felt easy to use while maintaining all the necessary functionality required multiple iterations. Balancing simplicity and depth while ensuring responsiveness was not easy, but it was crucial for making the platform user-friendly.

In addition, saving and managing data for multiple accounts during testing was a challenge. Ensuring that each user's information was correctly stored, securely managed, and easily retrievable was something we had to work through carefully to maintain reliability. Lastly, this was our first hackathon together, which brought its own set of challenges. We had to learn to collaborate effectively under a tight timeline while dealing with new tools and technologies. Despite these challenges, we worked together to create something we are truly proud of, and each challenge became a learning opportunity that helped us grow as a team.

Accomplishments that we're proud of

Looking back, there are a few key accomplishments that really stand out to us. First off, we managed to build a solid backend system using Node.js and Express.js that effectively handles user registration, session management, and data storage. Another huge accomplishment for us was integrating geolocation features into our platform. It wasn't easy figuring out how to convert user addresses into latitude and longitude, but using geocoding APIs and working with Leaflet.js taught us so much about connecting real-world data to our project. It felt amazing when we finally got our interactive map up and running, seeing users' locations come to life. We also took on the challenge of designing a modern and intuitive user interface, which was a big step for us as we were beginners in front-end development. Learning how to craft a UI that was both visually appealing and functional was challenging, but seeing the final design, especially the map feature and profile interface, really felt like an accomplishment we could all be proud of. It’s those small wins—like when the map pins finally aligned perfectly or when we got the design just right—that made the entire journey worth it.

What we learned

Throughout the journey of building Skill Exchange, we learned so much more than we ever expected. As creators, diving into both frontend and backend development was an eye-opening experience. We learned the importance of solidifying the backend infrastructure with technologies like Node.js and Express.js—how crucial it is to have a secure, well-structured backend to make everything else run smoothly. Working with APIs, especially for geolocation, really tested our problem-solving skills. Turning user addresses into precise map points wasn’t just about coding—it was about understanding how data can truly connect people. It also taught us a lot about debugging, patience, and thinking outside the box. We also discovered that UI design is not as easy as it looks. We started with basic HTML and CSS, but through countless tweaks and iterations, we started to get the hang of creating something user-friendly and visually appealing. The small changes that improved the user experience were rewarding, and we learned how important those details are in making a product people actually enjoy using. More than anything, this project showed us the value of perseverance and collaboration. We hit plenty of roadblocks along the way—whether it was figuring out the back-end logic or making the UI look exactly how we wanted—but we stuck it out, worked together, and came out stronger for it.

What's next for Skill Exchange

As we reflect on Skill Exchange, we're eager to continue expanding its capabilities. One of our main priorities moving forward is to set up an online meeting feature, allowing users to connect more easily without needing to meet in person immediately. We believe this addition will help make skill exchange accessible to everyone, regardless of location. We’re also excited about enhancing our messaging system to support real-time communication between users. We want Skill Exchange to be as responsive and engaging as possible, allowing members to chat seamlessly as they coordinate skill-sharing sessions or just get to know each other better.

In addition, we’re planning to connect with local organizations to facilitate group sessions, providing more structured and diverse learning experiences for our users. We think these partnerships will help foster a stronger sense of community while expanding the range of skills available. To make our platform even more impactful, we want to introduce trained professionals who can offer specialized skills for a fee. This will allow users to access more advanced training opportunities, while also helping us monetize the platform in a sustainable way. Ultimately, we’re committed to continually enhancing Skill Exchange to make it more interactive, accessible, and valuable for everyone in our community.

Built With

Share this project:

Updates