Sometimes it's hard to navigate all the amazing events on campus. Some are posted on department websites or sent in email, others are created on Facebook, and a few only appear on the club's Instagram story. Our inspiration was to create a universal platform where students, faculty and staff could create and subscribe to these events.

What it does

On our homepage we have a selection of the most recent events added to our system.Every user can view, create and subscribe to events. Hovering over/clicking on any event in our event gallery/grid pulls up the events information and by pressing going the user can subscribe to that event. To confirm attendance and inform the event organizer about the number of attendees we ask the user for their email and student ID or school ID when subscribing to an event. We used the Sendgrid API to send a confirmation email to both parties. By pressing the + button on our home screen the user can input all the important information about their event into our simple event creation window, post a picture for the event and add notes.

How we built it

For implementing the web page we started by sketching out our design on paper, building a moodboard, figuring out our color scheme and experimenting with a few looks, until we figured out which one we liked. After that we built the wireframe and mockup, using Adobe Xd, and prototype of our final design using Invision.

CSS was used to style the homepage, and Express.js and HTML was used to create a form allowing anyone to create a new event and to add it to the homepage. After the user submits a new event, a post request is made to a controller created using Node.js. The post request in the controller receives the submitted event data and stores it in a MySQL database. After the data is stored, a get request to the homepage is made, causing event data to be parsed from the database and rendered with the homepage. The user is then redirected to the homepage where the first 12 events received from the database are iterated over and formatted to visually display as a clickable component. The events are sorted by dates, so the soonest event will be found at the top, and the furthest event will be found at the bottom.

Challenges we ran into

We tried to store our data using GCP, but we ran into some difficulties so we decided to store it locally for now. As our web page and event data set grows however, we would like to store our information in cloud.

We are using the Sendgrid API for sending out our notifications, however it is a little slow. We would like to speed up this process in the future.

Accomplishments that we're proud of

We have the core of our website up and running and had a chance to explore new topics, languages and tools for web development.

What we learned

We learned about the design process of a web page, how to store our events data and how to build a website using javascript.

What's next for UCI Connect

There's plenty of space for us to grow and we truly believe this app could have a real benefit for college communities. We would like to continue building and expanding our project after HackUCI and create a simple and ergonomic interface for clubs and organizations to use on campuses throughout the country.

Share this project: