OpportunityMap

• 

  home page

• 

  map

• 

  opportunities

• 

  Opportunity Details

• 

  profile

• 

  login

• 

  dashboard

• 

  notification

• 

  favorite

Inspiration

What it does

How we built it

Challenges we ran into## Inspiration

In Burkina Faso, talent is everywhere, but opportunities are not. We noticed a recurring pattern: students in major cities like Ouagadougou were getting internships and hearing about competitions simply because of their physical proximity to university bulletin boards or their inclusion in exclusive WhatsApp groups. Meanwhile, brilliant students from other regions were being left behind—not due to a lack of merit, but due to a profound information gap. I wanted to build a bridge to close this gap. OpportuniMap was born from the belief that Information for all means opportunities everywhere.

What it does

OpportuniMap is a centralized, geolocation-based web platform that aggregates professional and educational opportunities across Burkina Faso. Instead of endlessly scrolling through fragmented social media groups, users can visit a single interactive map. They can filter opportunities by type (internships, competitions, training), by field of study, and by city. It also features a personalized dashboard where users can securely save their favorite opportunities and even contribute to the community by publishing new ones.

How we built it

I built OpportuniMap using a modern full-stack approach:

• Frontend: The user interface was crafted using HTML5, CSS3, and Vanilla JavaScript to keep it lightweight and fast. For the interactive map, I integrated the Leaflet.js library with OpenStreetMap data.
• Backend: The server-side logic is powered by Node.js and Express.js, which handles routing, user authentication, and data retrieval.
• Database: I used PostgreSQL to securely store user profiles, opportunity listings, and favorites.
• Security: User passwords are encrypted using bcrypt, and sessions are managed securely via JSON Web Tokens (JWT).
• Deployment: The entire application is hosted on Render, with the Node.js backend configured to seamlessly serve the static frontend files.

Challenges we ran into

One of the biggest hurdles was managing the state between the frontend and the backend, especially regarding asynchronous JavaScript. For example, I encountered a tricky TypeError when implementing the "Favorites" feature because the button reference (e.currentTarget) was becoming null after waiting for the server's response. Learning how to properly store UI references across asynchronous boundaries was a major "aha" moment.

Another challenge was the deployment phase. Initially, managing the frontend and backend as separate services caused routing complexities. I overcame this by restructuring the Express backend to serve the frontend as static files, resulting in a clean, unified deployment pipeline on Render.

What we learned

Building OpportuniMap was a massive learning experience. I significantly deepened my understanding of:

• Full-stack architecture: Connecting a relational database to a Node API, and consuming that API from a Vanilla JS frontend.
• Security best practices: Implementing JWT authentication from scratch and protecting sensitive routes.
• Debugging & DevOps: Troubleshooting modern Express routing issues and successfully deploying a full-stack application on a cloud platform.

What's next for OpportuniMap

In the future, I plan to:

• Implement a notification system to send users emails when an opportunity matches their profile.
• Partner with local universities and businesses to directly populate the database with real-time, verified data.
• Develop a mobile application version to better reach students who rely solely on smartphones for internet access.

Accomplishments that we're proud of

What we learned

What's next for OpportunityMap

Built With

• bcrypt
• css3
• express.js
• html5
• javascript
• json-web-tokens)
• jwt
• leaflet.js
• node.js
• openstreetmap-api
• postgresql
• render