NightOwl

Welcome Screen
Q@A w/ Peers
Group Sessions Based on Location
Create a New Study Group

NightOwl is a networking and education web app aimed at connecting students to study groups and getting them the help they need anytime, anywhere.

💭 Inspiration

We all have memories of that time of desperation during late night study sessions, feeling hopelessly lost and confused with no help in sight. Or maybe finding study partners for that one especially hard class proved difficult. NightOwl creates an all-in-one experience to network with peers and catch students in the deepest of pits in their studies.

Through this anonymous, Vanderbilt-tailored web app, users have a chance to meet new people in the same field in person and study together, have questions answered through all hours of the day by peers, and feel motivated to join in in the diligent studies of others.

🖥 What it does

Unlike Zoom or other platforms that allow for virtual study sessions, NightOwl provides a way for students to meet up in person on campus to study. Whenever a user wants to study with others, they can open the app to see how many students are on the app, to choose to study individually or as a group, and to learn where group study sessions are occurring. The group study sessions are labeled as either mixed or by subject. Subject study groups are tailored for discussions and interaction, while mixed study groups are there for when you want to be in a studious environment. The user would then physically join a study group, and once they have joined in person, they can enter into the study group on the website to reflect by filling out a short form containing their study location, whether or not they are studying with people of different or the same subject, and the subject—if the latter applies. Once they fill out the short form, their dot will be added to the right cluster of other students in the same study group. The spotted screen could potentially spark interests in other students to join in the quest for knowledge.

Additionally, if the user has a question—at any hour—they can post the question, and other users on the app will see the question and can provide their expertise. No longer will students feel helpless while studying at night, devoid of office hours and tutoring services. NightOwl offers personalized question and answer services from trusted sources, other Vanderbilt students, 24/7. NightOwl unites and harnesses the knowledge of the Vanderbilt community to serve the students in it.

🛠 How we built it

NightOwl is built with layers of technologies: React as front end and Firebase as backend. The languages used are HTML, JavaScript, CSS, and Python. For our front end, we organized our React app into different modules for easier development. We also used Figma to design the first rough draft of our app. For our back end, we implemented Google APIs to perform OAuth2 authentication at the login page to verify users before allowing them access to NightOwl. We used Firebase as our database to store user’s messages to the server. This allows us to have users communicate in the web app. For the data visualization of the study groups, we used HTML, JavaScript, and CSS in order to take the data from a CSV file and transform it into a format easier for users’ to visualize.

🛑 Challenges we ran into

Challenges are an inevitable and essential part of any process. It is because of these challenges that we are ever more proud of our journey.

“React was an entirely new field to me, but using it to work on NightOwl served as both a learning opportunity and as an avenue to broaden my skill set. A challenge I faced was learning and implementing React in the development of the front-end. This hackathon has helped me understand the basics of React and would serve as the genesis of my language exploration.” - Ekene Ifiora

“Web development using HTML and CSS is very new to me. One challenge I came across was partitioning and formatting the website into 2 parts for the home page. The process of creating the front end of this web app has allowed me to grow in my understanding of web design, databases, and coding structures and hierarchies. My patient teammates and Google were of great help and inspiration to me, and I plan to use the skills that I learned in my future projects.” - Lisa Liu

“The amount of unanticipated bugs we had to deal with was painstaking, but rewarding once we managed to fix it. My biggest challenge was ensuring that everyone in the team is familiar with the on-goings of the project, without losing focus on the final product we are aiming for. Delegating tasks was also particularly challenging in such a short amount of time. ” - Zi Teoh

“Throughout this event we encountered many difficulties ranging from bugs in technologies we were unfamiliar with to coming up with a catchy slogan for our product. As a result of this event and the challenges we faced, I believe that I’ve grown both as a coder and as a person and have developed my ability to think more deeply about topics. It is the process of working through these challenges with my group members that I feel were the most rewarding part of this event” - Adaline Leong

🏆Accomplishments that we're proud of

We’re very proud that we managed to put out a product despite being freshmen with limited knowledge of web development. We all made significant progress in our pursuit of computer science experience and knowledge. The front end programmers, Ekenne, Lisa, made sleek UI designs, despite being fairly new to HTML and CSS. We are also proud of the progress that our backend designer’s made, with Google authentication and the chat feature being fully functional and tackling on the difficult task of data representation. Countless errors were solved and many new APIs learned and implemented.

🧠 What we learned

Ekene has very limited software experience and Lisa is pretty new to web development but both made tremendous progress in Figma and UI design using CSS and HTML. Adeline and Zi, who have had some experience coding, completed substantial work in Google API, React, Firebase, and data representation.

Our frontend developers learned/got better at: Manipulating features like text, div, dropdown menus, and buttons Implementing advanced HTML and CSS features like animations, box shadows Importing photos and creating gradients Linking pages with boolean logic

Our backend developers learned/got better at: How to implement OAuth2 authorization using Google API Manipulating different types of Firebase data Representing data in clusters

🦉What's next for NightOwl

Our first priority is to make the app fully functional by connecting the backend of the group session system to the user input when creating or joining a study group, a complicated process we did not have time for during this Hackathon.

In addition, for NightOwl to be available to a larger sphere of students, we plan on expanding our services to other colleges by adding popular study spots in those universities to the web app.

Moreover, we plan on including a notification feature and mention system that informs the users of new questions posted and resolved questions. Adding a more interactive interface, such as a reward system based on points for asking and solving questions, is also something we look forward to incorporating.

Finally, as we look into the future, we will seek initiatives to continue improving technical aspects and user experience as well as integrating upcoming new, cross-platform technologies.