Nautical Translator

A website that serves as an educational platform by providing an interactice display for learning different Nautical Terms. Hack NJIT 2023!

Setup

1. Clone the repository

2. Activate the server

cd backend
npm install
npm run dev

3. In a separate terminal, start the frontend

cd frontend
npm install
npm run dev

The website should now be running locally at http://localhost:5173/

Main Features:

• An interactive 3D display that let's the user highlight certain parts of a sailboat
• A translation feature that outputs the definition of different nautical terms stored on a Kintone App

Tech Stack

• React
• three.js / React Three Fiber
• TailwindCSS
• Express
• Kintone

Designs

Figma Wireframes/Mockups

Resources

• Setting up three.js, Tailwind, React in Vite
• Material UI Tailwind
• Kintone Quickstart
• Water Shader
• Ocean Water Shader
• Different Parts of a Sailboat
•