Nauti(cal) Phrases

Inspiration

We were inspired by our passion for nautical exploration and realized that learning nautical terms is very difficult without a visual aide. Not everyone has access to a boat!

What It Does

Our website is meant to teach users about the different parts of a sailboat through 3D modeling as well as providing simple definitions for other nautical terms. The site has buttons labeled with specific boat parts - that highlight the corresponding part of the sailboat and make other parts transparent when pressed. Lastly, the site can query the Kintone database for the nautical terms and display them as options to the user so they learn more about each one.

How We Built It

There are 3 main components to the project:

Frontend application built with React, three.js, & TailwindCSS. We used a library called react-three-fiber to easily use three.js objects in React component form. We used Autodesk Fusion 360 to create parts for the boat, and loaded them into the application as .glb files. We also made user of water shaders and lighting sources we found online (credited in code) to make our scene appear more realistic.
Kintone Database. In keeping with the sponsors, we stored our nautical terms on a Kintone app. There are three fields for each term: an ID, a name, a definition, and a phonetic pronunciation. This made it easy for us to scale our system with more definitions/terms.
Server built with Express.js. In order to communicate with the Kintone database, we created an Express server that sits between the DB and our frontend application. The server pulls all of the terms from the DB, and seeds them into the frontend on start.

By breaking the application into these parts, we were able to efficiently allocate tasks amongst the team.

Challenges That We Faced

Breaking Down Sailboat Model: One of our main features is highlighting the different parts of the sailboat. One of the challenges we ran into was isolating these specific parts of the boat to change their color. Initially we downloaded a sailboat 3D model from the internet, but soon found this would not be sufficient as the model was a single asset. Because of this we decided to create our own 3D Sailboat Model and from that we had the freedom to highlight different parts with ease.
Kintone Integration: Another problem we ran into was using Kintone successfully in our site and being able to pull data correctly. We were eventually able to solve this roadblock through a lot of brainstorming and research into the helpful documentation of Kintone. The use of an Express Server added a layer of complexity to the project and induced a lot of merge conflicts, but it was worthwhile in the end.
CORS on Deployment: One of the largest challenges we faced was during deployment. Having our frontend and backend services communicate with one another without CORS errors was a headache. We solved the issue by adding our Vercel links to the allowable origins, and restoring the cors() policy to its default setting in Express.

Accomplishments That We're Proud Of

We’re really proud of being able to create and deploy a Full-Stack website that can host an interactive 3D model. Having the capability to pull information on the site from Kintone and display it is something that we’re quite proud of as well. All in all, the site is an amazing representation of the culmination of our entire group’s engineering and computer science expertise. Our 3D model usage highlights the engineering skills we’ve picked up, the site’s link to Kintone highlights the database skills we’ve honed in on, and the site’s UI and UX are the result of our web development skills. We could have accomplished this in a Game Engine, however making it a website makes it much easier to access.

What we learned

A lot of skills around Three.js were learned during the duration of this hackathon. We learned how to bring 3D CAD models of our own into a JavaScript program that can not only display it but also edit its properties. We learned how to connect our website to Kintone created apps and pull from it.

What's next for Nauti(cal) phrases

The next steps for Nauti(cal) Phrases is to add more boat parts, add phonetics to the definitions of the words, and include more interactive controls for moving around the boat.

Built With

express.js
kintone
react
react-three-fiber
render.com
tailwindcss
three.js
vercel

Submitted to

HackNJIT 2023
- Winner Best Use of Kintone

Created by

I created the 3d model of the boat and all of its parts. I made the idle bobbing animation for the boat, as well as initializing the Kintone App. The logo and initial Figma design was also designed by me.

Rumi Loghmani
Engineering student with a passion for art and design
I worked on the 3D scene and implemented the interactivity for Port, Starboard, and Stern highlighting. I also built the base code for highlighting the ship parts, and handled the deployment of the server on Render.com & the frontend on Vercel

Christian Apostol
I spent most of my time working on the Frontend using React.js, TailwindCSS, and recreating wireframes from Figma. Some of the specific feature I worked worked on would be the the Nautical Term Translation dropdown-- creating setup logic for our API requests--, button layouts, and overall UI.

Shawn Aviles
I spent the majority of my time working on the back-end server to connect our front end to the Kintone database. This allowed for the saved data to render as options in the nautical term component. Some other components I contributed to involved making the inactive parts transparent in the render based on the button selection and the overall UI cards for the nautical terms and translations.

Justin Ferber