CrossConnect

Add event page
User/calendar page
Home page
Find event page

Inspiration

We originally started off with a meal planning app but because we could not figure out how to get this data or how it would be visualized that makes it innovative compared to current nutrition apps (e.g. Yuka), we decided to pivot to our next idea of making an event planner website that focuses on cultural and political events in one's local community. We were inspired by this to push a product that helps connect people together and increase political awareness / participation.

What it does

This website allows users to look for nearby events happening soon. The homepage contains a list of the most up-to-date events near one's location. There is an add event section where a user can post events, here the user input data is sent to the backend where it is stored in an SQL database. The homepage is sorted because we keep our database sorted from most to least recent. There is also a find event page, where the user sends the query of what event he/she is interested in, and our product returns from the SQL database a list of events matching the user's requests. These events are displayed as cards, with their name, category, date, and address on a side panel, as well as on a map powered by leaflet.js and OpenStreetMap. This map plots events by converting the address to coordinates using OSMnx (python), yet still displays the address (and other relevant info) when the location markers are clicked. Lastly, there is a user page with user data and a calendar.

How we built it

The frontend was constructed using react.js for the algorithms/programming and JXS for the website elements. CSS was used for the graphics and I contributed to integrating the map using leaflet.js and OpenStreetMap. Gia and Tanvi contributed to the frontend's react, JXS, and CSS, while I helped interface it with the backend. For the backend, we primarily used python (Flask). I contributed to programming the object-oriented sections of the backend, as I designed event and location classes to organize our data into objects. Andranik coded the vast majority of the data processing algorithms in the backend, such as getting events from the SQL database and putting events into the database. I added some functions getting coordinate data using OSMnx, debugged it by making sure variable names are consistent, and interfaced it with the frontend. The events were stored in an SQL database, and the backend and frontend were interfaced using node.js and jsonify. Nickzad contributed greatly to the interfacing part. Arnon helped debug and contribute by attending workshops, and we worked on the final presentation towards the end.

Challenges we ran into

A challenge that I ran into was a lack of proper communication of what we are doing in our code, especially in sections we are collaborating over. This was harder for me as I am very unfamiliar with using GitHub (this hackathon is my first time ever using that) so I was not used to liveshares and teammates working on the same code as I am behind the scenes. This also made myself installing relevant files, running the code, and cloning/pushing/pulling/branching take much longer than it needed to. We also used many languages that I am not as familiar with (e.g. react.js, JXS) though these were easy to learn due to my extensive background in C and Python.

Accomplishments that we're proud of

We are proud of ending this hackathon with a working product, and this is my first time succeeding in a hackathon.

What we learned

We learned many things, such as valuable teamwork skills, how the different stacks are like. For myself, I learned to be more open in communication to what I am doing in my code. I also learned different stacks, as towards the end I was working on both the front and back end to integrate the map and to make sure everything is interfaced properly. This required great full-stack attention to detail in both JavaScript and Python. I also learned JXS, making a Firebase database, how to interface front and backend using jsonify and node.js, and brushed up on object-oriented programming. Though the hackathon was very challenging at the beginning, I was able to get used to everything and all the new languages and get a good idea of how the syntax works.

What's next for CrossConnect

What's next for CrossConnect is to not just run on manually-inputted data, but on web data through API's This will make our website much more functional. The user page with the calendars is also not fully practical, as the user information is a placeholder. There are also lots of unpolished UI elements such as unstyled fonts on the dashboard homepage, with these requiring extra attention to detail.