Drone Data

Description:

Drone Deploy Data with React.js application with Node.js backend that can be used to display Dummy Data.

Technology Stack

• Frontend/Client: React.js, HTML5, CSS, etc..
• API: Open AI - TBD
• Backend/Server: node.js/express, dummy data

Run Code (Environment)

Front-End Instructions

• confirm that config is appropriate:

> node -v
> npm -v
> git --version

• Initial package.json & install dependenies(localhost:3000):
  • Must be cd'd into frontend/client for install
  • MUI, react-router-dom, redux, formik, etc... (see resources)

> npx create-react-app <project name>
> cd <project name>
> npm install @mui/icons-material @mui/material @emotion/styled @emotion/react
> npm install cors

• Test front-end once pages are generated (ctrl-c to exit):

> npm run start

Back-End Helpful Hints (Node.js)

• confirm that config is up to date:

> node -v
> npm -v
> git --version
> npm express -v 

• Initial package.json & install dependencies (localhost:8080):

> cd <backend name>
> npm init -y
> npm install express cors
> npm install -g nodemon

• In a separate terminal run this or the other command.

> npm start

> node index.js

• Avoid npm run start and use the npm run develop.
• Allow server to restart with each edit (see resources):
  • Content-Type Builder: Item entry
  • Media Library: upload photos
  • Permissions: Settings > Roles > Public
• In frontend fetch item from backend (localhost:5000):

const grouping = "items"
const items = await fetch(
`http://localhost:5000/api/${grouping}`
)

---

Resources & Requirements:

• *Material UI for design here

• *Open AI for API here

  • node.js

helpful hints:

• Object and list looping should always be checked first, common issue...
• In the event of ctl-s going wrong check Grid numbers (max 12 in MUI)
• issues with importing data, maybe fixed

  "type": "module",