Landing page! (photo from unDraw)
The signup screen couldn't be simpler!
User dashboard: here, users can choose what to fill in
Organization dashboard: here, companies can manage their bulletins.
Editing a bulletin...
For a user: see all the bulletins on the Bulletins page.
See the bulletins that are relevant to you, by pressing the blue button.
Many organizations have began to offer benefits and relief measures that apply to specific demographics (e.g. students, the employed, seniors). It's easy to lose track of everything there is despite how financially important these measures are to people in need. That's why I thought of FundNet, a platform where we can see everything that applies to us.
What it does
For everyday people, make an account and you are presented with a screen where you can fill out some personal info such as your age, income, and special "attributes" (e.g. home-owner, veteran, student). Nothing is required, but each field is a way for organizations that are offering support, to target you when they publish a bulletin.
Organizations can create bulletins with a title, description, link, and filters that correspond with the personal info that users may fill out. For example, the CERB is limited to people fifteen years and older, and it's as simple as changing the minimum age field to 15 (along with other fields like employment status and minimum income) for the bulletin to match the appropriate audience.
How I built it
I started with a backend based on GraphQL. I decided to use a federated graph (which consists of a gateway and a few implementing services) with the power of Apollo Federation. To name-drop some other technologies I used: MongoDB Atlas to store users, organizations, and bulletins in their own collections, Mongoose to easily query and validate those models, bcrypt and jwt to hash my passwords and generate tokens (and send them as cookies), and of course Node and Express have everything run.
For the front-end, I started with create-react-app and added the appropriate packages (Apollo client, graphql-tag, etc.) to connect to my gateway. React Router helped me control the navigation of the page. I used Bulma (CSS framework) to make things look better.
Some other things: I used Illustrator for a quick logo. Landing page graphic comes from unDraw
Challenges I ran into
- I overestimated how long 22.5 hours is. (Forgot I needed sleep)
- Hackathon mode leads to messy code which leads to slower debugging, especially for why certain GraphQL queries weren't working
- How am I going to record the video in time
Accomplishments that I'm proud of
- Getting a whole project submitted in 20ish hours!
- Being able to speedily develop an idea I'm passionate about
- Squashed most bugs
What I learned
- I went from not completely understanding the concept of GraphQL, to speedtyping & relying on queries and mutations!
- I learned how a federated graph works! Thanks Apollo
- I now understand just how important sleep is, if I want my typing to make sense.
- In future strictly-timed events, I should put less time on UI design and more time on developing core functionality
- Upon researching some information for this project, I learned a lot about various demographics and the benefits they are often eligible for.
What's next for FundNet
- set up job listings: users can optionally select their location and remote work availability, and employers can create job listings that will target users (similar to how bulletins can have filters for the demographic)
- clean things up from a code perspective and a design perspective too
- app version of FundNet! using React Native
- feedback would be appreciated :)