![\"Demo\"\/](\"https:\/\/res.cloudinary.com\/practicaldev\/image\/fetch\/s--8zGgghdw--\/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880\/https:\/\/aviyel.com\/assets\/uploads\/files\/1637933630247-image-resized.png\")
<\/a><\/figure>\n\n\n\n<\/a><\/figure>\n\n\n\n<\/a><\/figure>\n\n\n\n<\/a><\/figure>\n\n\n\nThere is a separate article where you may learn about the MERN stack in very great detail.<\/p>\n\n\n\n Setting up the folder structure<\/em><\/strong><\/p>\n\n\n\n Create two folders inside your project directory called client and server, then open them in Visual Studio Code or any other code editor of your choice.<\/p>\n\n\n\n Now, we’ll create a MongoDB database, a Node and Express server, a database schema to represent our project case study application, and API routes to create, read, update, and delete data and information from the database using npm and the appropriate packages. So, open a command prompt, navigate to your server’s directory, and then run the code below.<\/p>\n\n\n\n Configuring package.json file<\/em><\/strong><\/p>\n\n\n\n Execute the following commands in the terminal to install the dependencies.<\/p>\n\n\n\n The “package.json” file should look like this after the dependencies have been installed.<\/p>\n\n\n\n And also, remember to update the scripts as well.<\/p>\n\n\n\n Now go to your server directory, create a src folder, and an index.js file there.<\/p>\n\n\n\n Setting up index.js<\/p>\n\n\n\n We may now utilize all of the other methods on that app instance. Let’s start with the fundamentals and very basic setups. Don’t forget to set up the port and cors, too.<\/p>\n\n\n\n Now it’s time to connect our server application to a real database. Here we’ll use the MongoDB database, specifically the MongoDB cloud Atlas version, which means our database will be hosted on their cloud.<\/p>\n\n\n\n MongoDB is a document-oriented database that is open-source and cross-platform. MongoDB is a NoSQL database that stores data in JSON-like documents and has optional schemas. All versions were given under the AGPL license prior to October 16, 2018. All versions released after October 16, 2018, including bug fixes for prior versions, are covered by the SSPL license v1. You can also learn more about MongoDB setup and configuration from the following article.<\/p>\n\n\n\n To set up and start your MongoDB cluster, follow the exact same steps mentioned below.<\/p>\n\n\n\n Official MongoDB website<\/em><\/strong>* Sign-up MongoDB<\/em><\/strong> Sign-in to MongoDB<\/em><\/strong> Create a Project<\/em><\/strong> Adding members<\/em><\/strong> Building Database<\/em><\/strong> Creating a Cluster<\/em><\/strong> Selecting a cloud service Provider<\/em><\/strong> Configuring Security<\/em><\/strong> Database Deployment to the Cloud<\/em><\/strong> Navigate to the network access tab and select “Add IP address.”<\/em><\/strong> Now, select the Choose a connection method.<\/em><\/strong> Connecting to cluster<\/em><\/strong> Create a new variable called DATABASE_CONNECTION inside index.js . Create a string and paste the copied mongo DB connection URL into it. Now, inside it, type your username and password, removing any brackets and entering your own credentials. We’ll create environmental variables to safeguard the credential later, but for now, let’s add it this way. The second thing we’ll need is a PORT, so just type in 4000 for now. Finally, we’ll use mongoose to connect to our database, so type in mongoose. connect(), which is a function with two parameters. The DATABASE_CONNECTION will be the first, and the object with two choices will be the second. The first is useNewUrlParser, which we’ll enable, and the second is useUnifiedTopology, which we’ll enable as well. These objects are optional, but we will see some errors or warnings on our console. Let’s chain it with .then() and .catch() inside,then() function. This will simply call the app and invoke listen, leading to two parameters: PORT and the callback function that will be executed if our application is successfully connected to the database. Finally, if the connection to the database is unsuccessful, we will simply console log our error message. Your index.js file should now look something like this.<\/p>\n\n\n\n Insert mongodb+srv into the .env file.<\/em><\/strong><\/p>\n\n\n\n We now have successfully connected our server to the database, let’s create middleware first before we get started on building our backend application’s routes and database schema. To do so, we’ll need to create a new file called middlewares.js and within that file, we will create a two function called notFound and errorHandler<\/p>\n\n\n\n and export those functions. So let create notFound middleware so typically this middleware should be the last middleware that is registered so this middleware takes in req, res, and next. Basically, if a request ever made it here, it means we didn’t locate the route users were searching for, so we’ll create a variable and send them a message, and then we’ll pass that to our next middleware, which is errorHander Middleware but before that don’t forget to pass the response status of 404 as well. Now let’s make our errorHandler middleware, which has four parameters instead of three, so we’ll have (error,req, res, next). The first thing we’ll do is set a status code and check whether it’s 200 or use the status code that’s already been specified, and then we’ll simply set the status code, and then we’ll respond with some JSON that will display the error message.<\/p>\n\n\n\n So, after modifying the middlewares.js file, import and use the middleware as needed in the index.js file.<\/p>\n\n\n\n let’s create a LogEntry model. Create a folder called models and inside it, create one file called LogEntry.model.js and within that following file structure your DB schema by defining title, description, comments, image, ratings, latitude and longitude as shown below.<\/p>\n\n\n\n The structure of your files and folders should now look like this.<\/p>\n\n\n\n Now that we’ve successfully created our DB Schema, let’s get started on creating our routes for our backend application. To do so, we’ll need to create a new folder inside the src directory and name it as routes Within the routes folder, we will create a js file called logs.routes.js.so first we must import express from “express” and also configure our router and import our recently created DB schema. Now we can begin adding our routes to it.<\/p>\n\n\n\n fetches all the pinned location information.<\/em><\/strong><\/p>\n\n\n\n Insert\/add a pinned location with authorized access<\/em><\/strong><\/p>\n\n\n\n exporting the router<\/em><\/strong><\/p>\n\n\n\n Your logs.routes.js should resemble something like this<\/p>\n\n\n\n Now, update your .env file<\/em><\/strong><\/p>\n\n\n\n Let’s get started by importing the logs routes into your index.js file. We can now connect map pinned log info to our application using express middleware. Finally, your root index.js file should be like the following.<\/p>\n\n\n\n After restarting the server, you should see something like this:<\/p>\n\n\n\n In the next step let’s start with the frontend and build it with react. The first thing you need to do is install Node.js if it isn’t already installed on your machine. So, go to the Node.js official website and download the most recent version. You’ll require Node js to utilize the node package manager, generally known as NPM. Now navigate to the client folder in your favorite code editor. Visual Studio Code will be my tool of choice. Then, in the integrated terminal, type npx create-react-app. This command will create a client application in the current directory with the name client.<\/p>\n\n\n\n There is a separate article where you may learn everything there is to know about<\/p>\n\n\n\n cleaning up boilerplate react project.<\/p>\n\n\n\n It’s time to install some packages within react-boilerplate now that you’ve installed and cleaned it. so copy and paste the following command into your terminal.<\/p>\n\n\n\n After installing all these packages your packge.json file of the client should look like this:<\/p>\n\n\n\n Let’s construct two separate folders \/components inside the components folder after we’ve installed all of our project’s dependencies and name it as RoadTripNav and TripEntryForm .<\/p>\n\n\n\n Your file and folder structure should look something like this once you’ve added all of your components.<\/p>\n\n\n\n Now that you have all of the project’s components set up, it’s time to start coding. First, import the ReactNavbar from “react-responsive-animate-navbar” and customize the color of your navbar, add the logo to the public folder and import it directly, and don\u2019t forget to add some social links as well. The following is an example of how the code should appear.<\/p>\n\n\n\n Before we go any further, let’s set up our Mapbox. First, go to the Mapbox site and log in or sign up if you don’t already have an account. Next, create your own custom map style in the Mapbox Studio and publish it. Finally, go back to the dashboard and copy the default public API key provided by MapBox.<\/p>\n\n\n\n Login or create your MapBox account<\/em><\/strong><\/p>\n\n\n\n Click on design a custom map style<\/em><\/strong><\/p>\n\n\n\n Customize your own style of the map inside the Mapbox studio<\/em><\/strong><\/p>\n\n\n\n Copy the default public token<\/em><\/strong> After you’ve successfully obtained your public token, go to the env file or create one if you don\u2019t have and after that create a variable named as REACT_APP_MAPBOX_TOKEN, then paste that token into that variable. This is what your env file should look like.<\/p>\n\n\n\n Before we go any further, let’s make an api and styles folder in our root source directory. Inside the api folder, make a API.js file, and inside the styles folder, make a index.css file where all our styles of the application will be added. This is how your folder structure should appear.<\/p>\n\n\n\n Now go to the newly created API file and construct two functions called “listLogEntries” to collect all the log entries from the backend and “createLogEntries” to create or send the post request \/ post the entries to the backend, as well as export these functions. Also, don’t forget to include the URL where your server is running.<\/p>\n\n\n\n Let’s make a submission form for the pinned map location. To do so, open the TripEntryForm component from the component folder we previously made, import the useForm hook from react-hook-form, import createLogentries from api, and then import the useState hook from the React library because this hook will enable us to integrate the state into our functional component. useState(), unlike state in class components, does not work with object values. If necessary, we can use primitives directly and create multiple react hooks for multiple variables. Now, create two states: loading and error, and then destructure register and handleSubmit from the useForm() hook from “react-hook-form” library.After you’ve completed that, it’s time to craft our form, but first let’s create a function to handle our submit request. To do so, create an asynchronous onSubmit function and inside it, simply create a try-catch block. Inside the try block set the loading to true, configure the latitude and longitude, console log the data, and invoke the onClose function, and finally inside the catch block, pass the error message to the error state, set the loading to false and simply console log the error message and then simply create a form inside the return statement exactly shown in the code below.<\/p>\n\n\n\n Also, don’t forget to add the TripEntryForm styles inside that very own component folder and name it as TripEntryForm.css and paste the exact CSS code as mentioned below<\/p>\n\n\n\n Now go to this repo and download all of the SVG files that are available there.<\/p>\n\n\n\n After you’ve downloaded all of the svg files, go to the main app component, and begin importing all of the key requirements from the libraries we previously installed, such as ReactMapGl, marker, and popup from the “react-map-gl” library, import all of the components as well as svgs from the assets folder, and finally create four state logEntries whose initial value is empty array, showPopup whose initial value is an empty object, addEntryLocation has a default value of null, and for viewport specify the initial value exactly like the code mentioned below or you can add whatever you want. Create an asynchronous function called getEntries that asynchronously calls the listLogEntries function that was previously established within the api file and whose main task is to retrieve all of the entries made by the users and feed them to the logEntries state and then call that function inside the useEffect() hook by using this Hook, you tell React that your component needs to do something after render.<\/p>\n\n\n\n React will remember the function you passed (we\u2019ll refer to it as our \u201ceffect\u201d), and call it later after performing the DOM updates. To this effect, we set the document title, but we could also perform data fetching or call some other imperative API. Placing useEffect() inside the component lets us access the count state variable (or any props) right from the effect. We don\u2019t need a special API to read it \u2014 it\u2019s already in the function scope. Hooks embrace JavaScript closures and avoid introducing React-specific APIs where JavaScript already provides a solution.useEffect() the hook is somewhat similar to the life-cycle methods that we are aware of for class components. It runs after every render of the component including the initial render. Hence it can be thought of as a combination of componentDidMount, componentDidUpdate, and componentWillUnmount.If we want to control the behavior of when the effect should run (only on initial render, or only when a particular state variable changes), we can pass in dependencies to the effect to do so. This hook also provides a clean-up option to allow cleaning up of resources before the component is destroyed. basic syntax of the effect: useEffect(didUpdate) .<\/p>\n\n\n\n Create a function named showMarkerPopup and provide the event parameters to it. Inside that function, destruct the latitude and longitude from “event.lngltd” and pass it to addEntryLocation state. Finally, employ all of the imported components within our return statement by simply following the code shown below.<\/p>\n\n\n\n The very final step is to add all of the styles to our project, which can be done by going to our previously established styles folder and copying and pasting the following mentioned code into the index.css file.<\/p>\n\n\n\n Finally, start both the client and the server.<\/p>\n\n\n\n This application’s entire source code is available here.<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\n<\/a><\/figure>\n\n\n\nnpm init -yes\n<\/code><\/pre>\n\n\n\nnpm install cors dotenv express express-rate-limit mongoose nodemon body-parser helmet morgan rate-limit-mongo\n<\/code><\/pre>\n\n\n\n<\/a><\/figure>\n\n\n\n<\/a><\/figure>\n\n\n\n<\/a><\/figure>\n\n\n\n<\/a><\/figure>\n\n\n\n\/\/src\/index.js\nconst express = require('express');\n\/\/ NOTE morgan is a logger\nconst morgan = require('morgan');\nconst helmet = require('helmet');\nconst cors = require('cors');\nconst mongoose = require('mongoose');\n\nrequire('dotenv').config();\n\n\/\/ app config\nconst app = express();\n<\/code><\/pre>\n\n\n\nconst express = require('express');\n\/\/ NOTE morgan is a logger\nconst morgan = require('morgan');\nconst helmet = require('helmet');\nconst cors = require('cors');\nconst mongoose = require('mongoose');\n\nrequire('dotenv').config();\n\nconst app = express();\n\nconst port = process.env.PORT || 4000;\n\napp.use(morgan('common'));\napp.use(helmet());\napp.use(cors({\n origin: process.env.CORS_ORIGIN,\n}));\n\napp.use(express.json());\n\napp.get('\/', (req, res) => {\n res.json({\n message: 'Hello There',\n });\n});\n<\/code><\/pre>\n\n\n\n<\/a>Setting up MongoDB Atlas cloud cluster<\/h3>\n\n\n\n
<\/a><\/p>\n\n\n\n
<\/a><\/p>\n\n\n\n
<\/a><\/p>\n\n\n\n
<\/a><\/p>\n\n\n\n
<\/a><\/p>\n\n\n\n
<\/a><\/p>\n\n\n\n
<\/a><\/p>\n\n\n\n
<\/a><\/p>\n\n\n\n
<\/a><\/p>\n\n\n\n
<\/a><\/p>\n\n\n\n
<\/a><\/p>\n\n\n\n
<\/a><\/p>\n\n\n\n
<\/a><\/p>\n\n\n\n\/\/src\/index.js\nconst express = require('express');\n\/\/ NOTE morgan is a logger\nconst morgan = require('morgan');\nconst helmet = require('helmet');\nconst cors = require('cors');\nconst mongoose = require('mongoose');\n\nrequire('dotenv').config();\n\nconst app = express();\n\nconst DATABASE_CONNECTION = process.env.DATABASE_URL;\n\nmongoose.connect(DATABASE_CONNECTION, {\n useNewUrlParser: true,\n newUnifiedTopology: true,\n});\n\napp.use(morgan('common'));\napp.use(helmet());\napp.use(cors({\n origin: process.env.CORS_ORIGIN,\n}));\n\napp.use(express.json());\n\napp.get('\/', (req, res) => {\n res.json({\n message: 'Hello There',\n });\n});\n\nconst port = process.env.PORT || 4000;\napp.listen(port, () => {\n console.log(`Currently Listening at http:\/\/localhost:${port}`);\n});\n<\/code><\/pre>\n\n\n\nPORT=4000\nDATABASE_URL=mongodb+srv:\/\/pramit:<password>@cluster0.8tw83.mongodb.net\/myFirstDatabase?retryWrites=true&w=majority\nCORS_ORIGIN=http:\/\/localhost:3000\n<\/code><\/pre>\n\n\n\n\/\/middlewares.js\nconst notFound = (req, res, next) => {\n const error = new Error(`Not Found - ${req.originalUrl}`);\n res.status(404);\n next(error);\n};\n\nconst errorHandler = (error, req, res, next) => {\n const statusCode = res.statusCode === 200 ? 500 : res.statusCode;\n res.status(statusCode);\n res.json({\n message: error.message,\n stack: process.env.NODE_ENV === \"production\" ? \"nope\" : error.stack,\n });\n};\n\nmodule.exports = {\n notFound,\n errorHandler,\n};\n<\/code><\/pre>\n\n\n\n\/\/src\/index.js\nconst express = require(\"express\");\n\/\/ NOTE morgan is a logger\nconst morgan = require(\"morgan\");\nconst helmet = require(\"helmet\");\nconst cors = require(\"cors\");\nconst mongoose = require(\"mongoose\");\n\nrequire(\"dotenv\").config();\n\nconst middlewares = require(\".\/middlewares\");\nconst app = express();\n\nconst DATABASE_CONNECTION = process.env.DATABASE_URL;\n\nmongoose.connect(DATABASE_CONNECTION, {\n useNewUrlParser: true,\n newUnifiedTopology: true,\n});\n\napp.use(morgan(\"common\"));\napp.use(helmet());\napp.use(\n cors({\n origin: process.env.CORS_ORIGIN,\n })\n);\n\napp.use(express.json());\n\napp.get(\"\/\", (req, res) => {\n res.json({\n message: \"Hello There\",\n });\n});\n\napp.use(middlewares.notFound);\napp.use(middlewares.errorHandler);\n\nconst port = process.env.PORT || 4000;\napp.listen(port, () => {\n console.log(`Currently Listening at http:\/\/localhost:${port}`);\n});\n<\/code><\/pre>\n\n\n\n\/\/models\/LogEntry.model.js\nconst mongoose = require(\"mongoose\");\nconst { Schema } = mongoose;\n\nconst requiredNumber = {\n type: Number,\n required: true,\n};\n\nconst logEntrySchema = new Schema(\n {\n title: {\n type: String,\n required: true,\n },\n description: String,\n comments: String,\n image: String,\n rating: {\n type: Number,\n min: 0,\n max: 10,\n default: 0,\n },\n latitude: {\n ...requiredNumber,\n min: -90,\n max: 90,\n },\n longitude: {\n ...requiredNumber,\n min: -180,\n max: 180,\n },\n visitDate: {\n required: true,\n type: Date,\n },\n },\n {\n timestamps: true,\n }\n);\n\nconst LogEntry = mongoose.model(\"collections\", logEntrySchema);\n\nmodule.exports = LogEntry;\n<\/code><\/pre>\n\n\n\n<\/a><\/figure>\n\n\n\n<\/a><\/figure>\n\n\n\nconst { Router } = require(\"express\");\n\nconst LogEntry = require(\"..\/models\/LogEntry.model.js\");\n\nconst { API_KEY } = process.env;\n\nconst router = Router();\n<\/code><\/pre>\n\n\n\nrouter.get(\"\/\", async (req, res, next) => {\n try {\n const entries = await LogEntry.find();\n res.json(entries);\n } catch (error) {\n next(error);\n }\n});\n<\/code><\/pre>\n\n\n\nrouter.post(\"\/\", async (req, res, next) => {\n try {\n if (req.get(\"X-API-KEY\") !== API_KEY) {\n res.status(401);\n throw new Error(\"Unauthorized Access\");\n }\n const logEntry = new LogEntry(req.body);\n const createdEntry = await logEntry.save();\n res.json(createdEntry);\n } catch (error) {\n if (error.name === \"ValidationError\") {\n res.status(422);\n }\n next(error);\n }\n});\n<\/code><\/pre>\n\n\n\nmodule.exports = router;\n<\/code><\/pre>\n\n\n\n\/\/src\/routes\/logs.routes.js\nconst { Router } = require(\"express\");\n\nconst LogEntry = require(\"..\/models\/LogEntry.model.js\");\n\nconst { API_KEY } = process.env;\n\nconst router = Router();\n\nrouter.get(\"\/\", async (req, res, next) => {\n try {\n const entries = await LogEntry.find();\n res.json(entries);\n } catch (error) {\n next(error);\n }\n});\n\nrouter.post(\"\/\", async (req, res, next) => {\n try {\n if (req.get(\"X-API-KEY\") !== API_KEY) {\n res.status(401);\n throw new Error(\"Unauthorized Access\");\n }\n const logEntry = new LogEntry(req.body);\n const createdEntry = await logEntry.save();\n res.json(createdEntry);\n } catch (error) {\n if (error.name === \"ValidationError\") {\n res.status(422);\n }\n next(error);\n }\n});\n\nmodule.exports = router;\n<\/code><\/pre>\n\n\n\nNODE_ENV=production\nPORT=4000\nDATABASE_URL=mongodb+srv:\/\/pramit:<password>@cluster0.8tw83.mongodb.net\/myFirstDatabase?retryWrites=true&w=majority\nCORS_ORIGIN=http:\/\/localhost:3000\nAPI_KEY=roadtripmapper\n<\/code><\/pre>\n\n\n\n\/\/src\/index.js\nconst express = require(\"express\");\n\/\/ NOTE morgan is a logger\nconst morgan = require(\"morgan\");\nconst helmet = require(\"helmet\");\nconst cors = require(\"cors\");\nconst mongoose = require(\"mongoose\");\n\nrequire(\"dotenv\").config();\n\nconst middlewares = require(\".\/middlewares\");\nconst logs = require(\".\/routes\/logs.routes.js\");\nconst app = express();\n\nconst DATABASE_CONNECTION = process.env.DATABASE_URL;\n\nmongoose.connect(DATABASE_CONNECTION, {\n useNewUrlParser: true,\n newUnifiedTopology: true,\n});\n\napp.use(morgan(\"common\"));\napp.use(helmet());\napp.use(\n cors({\n origin: process.env.CORS_ORIGIN,\n })\n);\n\napp.use(express.json());\n\napp.get(\"\/\", (req, res) => {\n res.json({\n message: \"Hello There\",\n });\n});\n\napp.use(\"\/api\/logs\", logs);\n\napp.use(middlewares.notFound);\napp.use(middlewares.errorHandler);\n\nconst port = process.env.PORT || 4000;\napp.listen(port, () => {\n console.log(`Currently Listening at http:\/\/localhost:${port}`);\n});\n<\/code><\/pre>\n\n\n\n<\/a><\/figure>\n\n\n\n
\n\n\n\n<\/a>Setting up the frontend with react<\/h3>\n\n\n\n
<\/a><\/figure>\n\n\n\nnpm i react-hook-form react-map-gl react-rating-stars-component react-responsive-animate-navbar\n<\/code><\/pre>\n\n\n\n<\/a><\/figure>\n\n\n\n<\/a><\/figure>\n\n\n\n<\/a><\/figure>\n\n\n\n<\/a><\/figure>\n\n\n\n<\/a><\/figure>\n\n\n\n\/\/ components\/RoadTripNav\nimport React from \"react\";\nimport * as ReactNavbar from \"react-responsive-animate-navbar\";\n\/\/ import roadTripSvg from \"..\/..\/assets\/roadtrip.svg\";\n\nconst RoadTripNav = () => {\n return (\n <ReactNavbar.ReactNavbar\n color=\"rgb(25, 25, 25)\"\n logo=\".\/logo.svg\"\n menu={[]}\n social={[\n {\n name: \"Twitter\",\n url: \"https:\/\/twitter.com\/pramit_armpit\",\n icon: [\"fab\", \"twitter\"],\n },\n ]}\n \/>\n );\n};\n\nexport default RoadTripNav;\n<\/code><\/pre>\n\n\n\n<\/a><\/figure>\n\n\n\n<\/a><\/figure>\n\n\n\n<\/a><\/figure>\n\n\n\n<\/a><\/figure>\n\n\n\n
<\/a><\/p>\n\n\n\nREACT_APP_MAPBOX_TOKEN= ************************************ \/\/ add token\n<\/code><\/pre>\n\n\n\n<\/a><\/figure>\n\n\n\n<\/a><\/figure>\n\n\n\n\/\/api\/API.js\nconst API_URL = \"http:\/\/localhost:4000\";\n\/\/ const API_URL = window.location.hostname === \"localhost\" ? \"http:\/\/localhost:4000\" : \"https:\/\/road-trip-map-mern.herokuapp.com\" ;\n\nexport async function listLogEntries() {\n const response = await fetch(`${API_URL}\/api\/logs`);\n \/\/ const json = await response.json();\n return response.json();\n}\n\nexport async function createLogEntries(entry) {\n const api_key = entry.api_key;\n delete entry.api_key;\n const response = await fetch(`${API_URL}\/api\/logs`, {\n method: \"POST\",\n headers: {\n \"content-type\": \"application\/json\",\n \"X-API-KEY\": api_key,\n },\n body: JSON.stringify(entry),\n });\n \/\/ const json = await response.json();\n \/\/ return response.json();\n let json;\n if (response.headers.get(\"content-type\").includes(\"text\/html\")) {\n const message = await response.text();\n json = {\n message,\n };\n } else {\n json = await response.json();\n }\n if (response.ok) {\n return json;\n }\n const error = new Error(json.message);\n error.response = json;\n throw error;\n}\n<\/code><\/pre>\n\n\n\n<\/a><\/figure>\n\n\n\n\/\/ components\/TripEntryForm.js\nimport React, { useState } from \"react\";\nimport { useForm } from \"react-hook-form\";\nimport { createLogEntries } from \"..\/..\/api\/API\";\nimport \".\/TripEntryForm.css\";\n\nconst TripEntryForm = ({ location, onClose }) => {\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState(\"\");\n\n const { register, handleSubmit } = useForm();\n\n const onSubmit = async (data) => {\n try {\n setLoading(true);\n data.latitude = location.latitude;\n data.longitude = location.longitude;\n const created = await createLogEntries(data);\n console.log(created);\n onClose();\n } catch (error) {\n setError(error.message);\n console.error(error);\n setLoading(false);\n }\n };\n\n return (\n <form onSubmit={handleSubmit(onSubmit)} className=\"trip-form\">\n {error ? <h3 className=\"error-message\">{error}<\/h3> : null}\n <label htmlFor=\"api_key\">Enter Password<\/label>\n <input\n type=\"password\"\n name=\"api_key\"\n placeholder=\"For demo, password => {roadtripmap} \"\n required\n ref={register}\n \/>\n\n <label htmlFor=\"title\">Title<\/label>\n <input name=\"title\" placeholder=\"Title\" required ref={register} \/>\n\n <label htmlFor=\"comments\">Comments<\/label>\n <textarea\n name=\"comments\"\n placeholder=\"Comments\"\n rows={3}\n ref={register}\n ><\/textarea>\n\n <label htmlFor=\"description\">Description<\/label>\n <textarea\n name=\"description\"\n placeholder=\"Describe your journey\"\n rows={4}\n ref={register}\n ><\/textarea>\n\n <label htmlFor=\"image\">Image<\/label>\n <input name=\"image\" placeholder=\"Image URL\" ref={register} \/>\n\n <label htmlFor=\"rating\">Rating (1 - 10)<\/label>\n <input name=\"rating\" type=\"number\" min=\"0\" max=\"10\" ref={register} \/>\n\n <label htmlFor=\"visitDate\">Visit Date<\/label>\n <input name=\"visitDate\" type=\"date\" required ref={register} \/>\n\n <button disabled={loading}>\n <span>{loading ? \"Submitting...\" : \"Submit your Trip\"}<\/span>\n <\/button>\n <\/form>\n );\n};\n\nexport default TripEntryForm;\n<\/code><\/pre>\n\n\n\n<\/a><\/figure>\n\n\n\n\/\/TripEntryForm.css\n@import url(\"https:\/\/fonts.googleapis.com\/css2?family=Fredoka+One&family=Poppins:ital,wght@0,200;0,400;1,200;1,300&family=Roboto:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap\");\n\n.trip-form label {\n margin: 0.5rem 0;\n display: block;\n width: 100%;\n color: rgb(255, 255, 255);\n font-family: \"Fredoka One\", cursive;\n}\n.trip-form input {\n margin: 0.5rem 0;\n background-color: #2c2e41;\n border-radius: 5px;\n border: 0;\n box-sizing: border-box;\n color: rgb(255, 255, 255);\n font-size: 12px;\n height: 100%;\n outline: 0;\n padding: 10px 5px 10px 5px;\n width: 100%;\n font-family: \"Fredoka One\", cursive;\n}\n\n.trip-form textarea {\n margin: 0.5rem 0;\n background-color: #2c2e41;\n border-radius: 5px;\n border: 0;\n box-sizing: border-box;\n color: rgb(255, 255, 255);\n font-size: 12px;\n height: 100%;\n outline: 0;\n padding: 10px 5px 10px 5px;\n width: 100%;\n font-family: \"Fredoka One\", cursive;\n}\n\n.error-message {\n color: red;\n}\n\n.trip-form button {\n background-color: #fb5666;\n border-radius: 12px;\n border: 0;\n box-sizing: border-box;\n color: #eee;\n cursor: pointer;\n font-size: 18px;\n height: 50px;\n margin-top: 38px;\n outline: 0;\n text-align: center;\n width: 100%;\n}\n\nbutton span {\n position: relative;\n z-index: 2;\n}\n\nbutton:after {\n position: absolute;\n content: \"\";\n top: 0;\n left: 0;\n width: 0;\n height: 100%;\n transition: all 2.35s;\n}\n\nbutton:hover {\n color: #fff;\n}\n\nbutton:hover:after {\n width: 100%;\n}\n\n.small_description {\n font-size: 60px;\n}\n<\/code><\/pre>\n\n\n\n<\/a><\/figure>\n\n\n\n\/\/src\/app.js\nimport * as React from \"react\";\nimport { useState, useEffect } from \"react\";\nimport ReactMapGL, { Marker, Popup } from \"react-map-gl\";\nimport { listLogEntries } from \".\/api\/API\";\nimport MapPinLogo from \".\/assets\/mapperPin.svg\";\nimport MarkerPopup from \".\/assets\/MarkerPopup.svg\";\nimport TripEntryForm from \".\/components\/TripEntryForm\";\nimport ReactStars from \"react-rating-stars-component\";\nimport RoadTripNav from \".\/components\/RoadTripNav\/RoadTripNav\";\n\nconst App = () => {\n const [logEntries, setLogEntries] = useState([]);\n const [showPopup, setShowPopup] = useState({});\n const [addEntryLocation, setAddEntryLocation] = useState(null);\n const [viewport, setViewport] = useState({\n width: \"100vw\",\n height: \"100vh\",\n latitude: 27.7577,\n longitude: 85.3231324,\n zoom: 7,\n });\n\n const getEntries = async () => {\n const logEntries = await listLogEntries();\n setLogEntries(logEntries);\n console.log(logEntries);\n };\n\n useEffect(() => {\n getEntries();\n }, []);\n\n const showMarkerPopup = (event) => {\n console.log(event.lngLat);\n const [longitude, latitude] = event.lngLat;\n setAddEntryLocation({\n longitude,\n latitude,\n });\n };\n\n return (\n <>\n <RoadTripNav \/>\n <ReactMapGL\n {...viewport}\n mapStyle=\"mapbox:\/\/styles\/pramitmarattha\/ckiovge5k3e7x17tcmydc42s3\" \n mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_TOKEN}\n onViewportChange={(nextViewport) => setViewport(nextViewport)}\n onDblClick={showMarkerPopup}\n >\n {logEntries.map((entry) => (\n <React.Fragment key={entry._id}>\n <Marker latitude={entry.latitude} longitude={entry.longitude}>\n <div\n onClick={() =>\n setShowPopup({\n \/\/ ...showPopup,\n [entry._id]: true,\n })\n }\n >\n <img\n className=\"map-pin\"\n style={{\n width: `${5 * viewport.zoom}px`,\n height: `${5 * viewport.zoom}px`,\n }}\n src={MapPinLogo}\n alt=\"Map Pin Logo\"\n \/>\n <\/div>\n <\/Marker>\n {showPopup[entry._id] ? (\n <Popup\n latitude={entry.latitude}\n longitude={entry.longitude}\n closeButton={true}\n closeOnClick={false}\n dynamicPosition={true}\n onClose={() => setShowPopup({})}\n anchor=\"top\"\n >\n <div className=\"popup\">\n <ReactStars\n count={10}\n value={entry.rating}\n size={29}\n activeColor=\"#ffd700\"\n \/>\n <div className=\"popup_image\">\n {entry.image && <img src={entry.image} alt={entry.title} \/>}\n <\/div>\n <h3>{entry.title}<\/h3>\n <p>{entry.comments}<\/p>\n <small>\n Visited :{\" \"}\n {new Date(entry.visitDate).toLocaleDateString(\"en-US\", {\n weekday: \"long\",\n year: \"numeric\",\n month: \"long\",\n day: \"numeric\",\n })}\n <\/small>\n <p>Ratings: {entry.rating}<\/p>\n <div className=\"small_description\">{entry.description}<\/div>\n <\/div>\n <\/Popup>\n ) : null}\n <\/React.Fragment>\n ))}\n {addEntryLocation ? (\n <>\n <Marker\n latitude={addEntryLocation.latitude}\n longitude={addEntryLocation.longitude}\n >\n <div>\n <img\n className=\"map-pin\"\n style={{\n width: `${8 * viewport.zoom}px`,\n height: `${8 * viewport.zoom}px`,\n }}\n src={MarkerPopup}\n alt=\"Map Pin Logo\"\n \/>\n <\/div>\n {\/* <div style={{color:\"white\"}}>{entry.title}<\/div> *\/}\n <\/Marker>\n\n <Popup\n latitude={addEntryLocation.latitude}\n longitude={addEntryLocation.longitude}\n closeButton={true}\n closeOnClick={false}\n dynamicPosition={true}\n onClose={() => setAddEntryLocation(null)}\n anchor=\"top\"\n >\n <div className=\"popup\">\n <TripEntryForm\n onClose={() => {\n setAddEntryLocation(null);\n getEntries();\n }}\n location={addEntryLocation}\n \/>\n <\/div>\n <\/Popup>\n <\/>\n ) : null}\n <\/ReactMapGL>\n <\/>\n );\n};\n\nexport default App;\n<\/code><\/pre>\n\n\n\n<\/a><\/figure>\n\n\n\n\/* styles\/index.css *\/\n@import url(\"https:\/\/fonts.googleapis.com\/css2?family=Fredoka+One&family=Poppins:ital,wght@0,200;0,400;1,200;1,300&family=Roboto:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap\");\n\nbody {\n margin: 0;\n font-family: \"Fredoka One\", cursive;\n height: 100vh;\n width: 100vw;\n overflow: hidden;\n}\n\ncode {\n font-family: source-code-pro, Menlo, Monaco, Consolas, \"Courier New\",\n monospace;\n}\n\n.map-pin {\n position: absolute;\n transform: translate(-50%, -100%);\n z-index: -1;\n}\n\n.popup {\n width: 20vw;\n height: auto;\n padding: 1rem;\n background-color: #8661d1;\n border-radius: 5px;\n z-index: 999;\n}\n\n.popup img {\n width: 40%;\n height: auto;\n border-radius: 5%;\n justify-content: center;\n align-items: center;\n margin: 0 auto;\n padding-top: 1rem;\n}\n\n.popup_image {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.small_description {\n font-size: 1.5rem;\n color: #fff;\n border-radius: 5px;\n z-index: 999;\n}\n\nbutton {\n border: none;\n color: #fa5252;\n padding-right: 1rem;\n border-radius: 50%;\n font-size: 4rem;\n margin-top: 0.2rem;\n height: auto;\n cursor: pointer;\n}\n<\/code><\/pre>\n\n\n\n<\/a><\/figure>\n\n\n\n<\/a>Application up and running<\/h2>\n\n\n\n
<\/a><\/figure>\n\n\n\n