Tech Stack & Bookmarks

Tech Stack Overview

💡 The oldest version of Node.js you can be on is 16.13.2 — newer versions are fine. If you’re on an older version (e.g. before 16.13.2) we recommend you reinstall or upgrade Node.

💡 The TypeScript version **we’re using is **4.9.5. Please DO NOT use 5.0.4, it will break the project for you locally!

The YVR Dashboard is built with the MERN stack (MongoDB, Express, React, Node) in the TypeScript language. The server runs on Node/Express/Mongo while the client uses React as a framework, and Chakra as the main UI library. Recoil is also used alongside standard React out-of-the-box hooks to manage global state.

All API fetching is done with Axios.

API testing is done with Postman.

The IDE which the Dashboard team uses is VSCode, but any IDE will do for this project.

All version control is done through Git. We do it through command line, but there are many GUIs which can help you, like GitKraken.

We also recommend installing MongoDB Compass to help with database management.

Links to Tools & Documentation

• TypeScript language https://www.typescriptlang.org/
• MongoDB https://www.mongodb.com/
• React (v. 18) https://reactjs.org/
• Express https://expressjs.com/
• Node.js (v. 16.13.2) https://nodejs.org/en/
• Recoil for state management https://recoiljs.org/
• Chakra UI https://chakra-ui.com/
• Axios https://www.npmjs.com/package/axios
• Postman https://www.postman.com/
• VSCode https://code.visualstudio.com/

💡 To install all dependencies, run npm i in the terminal for both the frontend and backend repository.

Designs

• UI Prototypes: https://xd.adobe.com/view/e8109ec0-7876-4d38-87e5-7682a0cd6e8d-bd43/grid/

• Low-fi Wireframes: https://excalidraw.com/#json=hFRoA0EDPcWhGC4hbM0jI,TrXP9xW6Q9mKUe7Z9ihztg

API Sites

• Weather API http://weatherapi.com/
• Storm Glass (tidal) https://stormglass.io/