Dieting is neither easy nor fun, but accountability in any form would enable anyone to achieve their dieting goals. This daily meal plan web application was made to help users build meal plans that would ensure they maintain a healthy diet.<\/p>\n
GridDB<\/a> is the database that will be used to store meal plans.<\/p>\n In this article, we will use what is called the GERN stack (GridDB, ExpressJS, ReactJS, and NodeJS) to build a Fullstack meal planning web application.<\/p>\n While I installed WSL<\/a> (Windows Subsystem for Linux) on my Windows to have access to Linux (Ubuntu) on my machine, you could also follow along with this tutorial using Docker. The GridDB documentation<\/a> provides you with a detailed installation process to successfully install the database on your computer. There are also top-notch YouTube videos on their YouTube channel<\/a> for those who prefer videos to written documentation. The entire code for the web application is available on Github<\/a>.<\/p>\n Open your terminal and clone the repo using this command<\/p>\n This application is divided into 2 parts \u2013<\/p>\n The backend in this project ensures the correct meal data is gotten from the frontend, and then saved to the GridDB database. We are able to perform functionalities with the GridDB database.<\/p>\n The proper CRUD functionalities are carried out in the app.<\/p>\n These are the packages that are needed to build the backend.<\/p>\n Joi<\/a>: A schema description language and data validator for JavaScript<\/p>\n<\/li>\n UUID<\/a>: This package will be used to create a random ID.<\/p>\n<\/li>\n<\/ul>\n Follow the steps as explained below;<\/p>\n Create a \u201cserver\u201d folder and initialize npm to generate a package.json file. You can name the folder anything you want:<\/p>\n We are going to install all the required packages at once by running the following line of code:<\/p>\n Addition<\/em><\/strong><\/p>\n While it is not required to install nodemon, it’s nice to have in development so that the server would restart automatically when any change is saved. This is the command to install nodemon as a dev dependency:<\/p>\n Create a server.js file and insert the following code:<\/p>\n If you installed nodemon as a dev dependency, you\u2019ll need to add this line of code to the \u201cscripts\u201d section in your package.json file:<\/p>\n If you installed nodemon, you could use \u2018npm start\u2019 to start the application, however, this would require you to restart the application any time you make changes, going against what nodemon is intended for. The following method doesn\u2019t require you to restart the application when you make any changes (the benefit of nodemon):<\/p>\n We will connect to the GridDB database using the griddb-node-api package. We then set the container name of the project. I chose “meal-planner”<\/em> because it is related to the project. However, you can call it whatever you want.<\/p>\n The initStore function connects the app to the GridDB Cluster using the host, port, clusterName, username, and password. The initContainer function is used to set the columns for the container and the datatypes for the different columns. The createContainer creates the container while initGridDbTS initializes the database connection.<\/p>\n To create a meal plan;<\/p>\n We use the Joi package to validate the request body sent from the frontend and then insert into the container that is created in step 6.<\/p>\n Before that, the uuid package is used to generate a random id. After the meal plan is saved to the database, we then query the meal plan using the created random id to get the details of the saved meal plan.<\/p>\n The meal plan details are then sent to the frontend as a json response.<\/p>\n The id of the meal plan that is required is gotten from the params of the request data.<\/p>\n Then id of the meal plan is then queried with the data in the database and a 200 response with the meal plan data is sent if the meal plan is found.<\/p>\n To edit a meal plan, again the id of the required meal plan is sent in the params of the request. The meal plan is queried using the given id and the old details of the meal plan is replaced by the new ones.<\/p>\n The id is gotten from the params or the request data and that is used to delete the row containing the required meal plan.<\/p>\n To get list of all meal plans in the database, you have to do this;<\/p>\n This returns all the meal plans in the database.<\/p>\n The beauty of this meal plan app is that the UI allows users to add, view, edit, and delete a meal plan. The following libraries were used to build the UI for this project:<\/p>\n ReactJS is a JavaScript library built and maintained by Meta for building user interfaces.<\/p>\n Material UI is a comprehensive library of components from Google’s Material Design system.<\/p>\n Redux Toolkit is a state management library.<\/p>\n To view the frontend of the app change to the client directory.<\/p>\n Now install the required dependencies<\/p>\n Then run the app using<\/p>\nThe Application<\/h2>\n
git clone https:\/\/github.com\/griddbnet\/Blogs.git --branch meal-planner<\/code><\/pre>\n<\/div>\nThe App Classification<\/h2>\n
\n
Prerequisites<\/h2>\n
\n
The Backend<\/h2>\n
\n
Step-by-Step Guide to Building the Meal Plan App<\/h2>\n
Step 1: Create a Server Folder<\/h2>\n
npm i<\/code><\/pre>\n<\/div>\nStep 2: Install Required Packages<\/h2>\n
npm i express morgan joi uuid griddb-node-api cors<\/code><\/pre>\n<\/div>\nnpm i -D nodemon<\/code><\/pre>\n<\/div>\n{\n \"name\": \"meal-planner-server\",\n \"version\": \"1.0.0\",\n \"description\": \"backend for meal planner\",\n \"main\": \"server.js\",\n \"scripts\": {\n \"test\": \"echo \"Error: no test specified\" && exit 1\",\n \"dev\": \"nodemon server.js\"\n },\n \"keywords\": [\n \"meal-planner\",\n \"meal\",\n \"planner\",\n \"griddb\",\n \"griddb_node\"\n ],\n \"author\": \"Oyafemi Babajide\",\n \"license\": \"ISC\",\n \"dependencies\": {\n \"cors\": \"^2.8.5\",\n \"express\": \"^4.18.2\",\n \"griddb_node\": \"^0.8.4\",\n \"griddb-node-api\": \"^0.8.6\",\n \"joi\": \"^17.11.0\",\n \"morgan\": \"^1.10.0\",\n \"uuid\": \"^9.0.1\"\n },\n \"devDependencies\": {\n \"nodemon\": \"^3.0.1\"\n }\n}<\/code><\/pre>\n<\/div>\nStep 3: Create Server.js File<\/h3>\n
const express = require(\"express\");\nconst morgan = require(\"morgan\");\nconst app = express();\nconst cors = require(\"cors\")\n\nconst PORT = 4000 || process.env.PORT;\n\napp.use(morgan(\"dev\"));\napp.use(express.json());\napp.use(express.urlencoded({ extended: false }));\napp.use(cors(\"*\"))\napp.use(\"\/api\", require(\".\/routes\/mealRoutes\"));\n\napp.listen(PORT, () => {\n console.log(`Server started on ${PORT}`);\n});<\/code><\/pre>\n<\/div>\n\"dev\": \"nodemon index.js\"<\/code><\/pre>\n<\/div>\nStep 4: Run the Application<\/h3>\n
npm run dev<\/code><\/pre>\n<\/div>\n![\"\"](\"https:\/\/griddb.net\/wp-content\/uploads\/2024\/01\/1.jpg\")
<\/a><\/p>\nStep 5: Setup the GridDB Database<\/h3>\n
const griddb = require(\"griddb-node-api\");\n\nconst containerName = \"meal-planner\";\n\nconst initStore = async () => {\n const factory = griddb.StoreFactory.getInstance();\n try {\n \/\/ Connect to GridDB Cluster\n const store = await factory.getStore({\n host: \"127.0.0.1\",\n port: 10001,\n clusterName: \"myCluster\",\n username: \"admin\",\n password: \"admin\",\n });\n return store;\n } catch (e) {\n throw e;\n }\n};\n\nfunction initContainer() {\n const conInfo = new griddb.ContainerInfo({\n name: containerName,\n columnInfoList: [\n [\"id\", griddb.Type.STRING],\n [\"title\", griddb.Type.STRING],\n [\"calories\", griddb.Type.DOUBLE],\n [\"fat\", griddb.Type.DOUBLE],\n [\"cabs\", griddb.Type.DOUBLE],\n [\"protein\", griddb.Type.DOUBLE],\n [\"days\", griddb.Type.STRING],\n [\"breakfast\", griddb.Type.STRING],\n [\"lunch\", griddb.Type.STRING],\n [\"dinner\", griddb.Type.STRING],\n [\"snack1\", griddb.Type.STRING],\n [\"snack2\", griddb.Type.STRING],\n [\"snack3\", griddb.Type.STRING],\n ],\n type: griddb.ContainerType.COLLECTION,\n rowKey: true,\n });\n\n return conInfo;\n}\n\nasync function createContainer(store, conInfo) {\n try {\n const collectionDB = await store.putContainer(conInfo);\n return collectionDB;\n } catch (err) {\n console.error(err);\n throw err;\n }\n}\n\nasync function initGridDbTS() {\n try {\n const store = await initStore();\n const conInfo = await initContainer();\n const collectionDb = await createContainer(store, conInfo);\n return { collectionDb, store, conInfo };\n } catch (err) {\n console.error(err);\n throw err;\n }\n}<\/code><\/pre>\n<\/div>\nStep 6: Create a Meal plan<\/h3>\n
router.post(\"\/add-meal\", addMealPlan);<\/code><\/pre>\n<\/div>\n\/\/meal plan validation rules\nconst mealPlanValidation = async (field) => {\n const schema = Joi.object({\n title: Joi.string().required(),\n calories: Joi.number().integer().required(),\n fat: Joi.number().integer().required(),\n cabs: Joi.number().integer().required(),\n protein: Joi.number().integer().required(),\n days: Joi.array()\n .items(\n Joi.string().valid(\n \"sunday\",\n \"monday\",\n \"tuesday\",\n \"wednesday\",\n \"thursday\",\n \"friday\",\n \"saturday\"\n )\n )\n .max(7)\n .min(1)\n .required(),\n breakfast: Joi.string().required(),\n lunch: Joi.string().required(),\n dinner: Joi.string().required(),\n snack1: Joi.string().required(),\n snack2: Joi.string().required(),\n snack3: Joi.string().required(),\n });\n try {\n return await schema.validateAsync(field, { abortEarly: false });\n } catch (err) {\n return err;\n }\n};\n\n\n\n\nasync function insert(data, container) {\n try {\n await container.put(data);\n return { status: true };\n } catch (err) {\n if (err.constructor.name == \"GSException\") {\n for (var i = 0; i < err.getErrorStackSize(); i++) {\n console.log(\"[%d]\", i);\n console.log(err.getErrorCode(i));\n console.log(err.getMessage(i));\n }\n\n return { status: false, error: err.toString() };\n } else {\n console.log(err);\n return { status: false, error: err };\n }\n }\n}<\/code><\/pre>\n<\/div>\nasync function queryByID(id, conInfo, store) {\n try {\n const cont = await store.putContainer(conInfo);\n const row = await cont.get(id);\n return row;\n } catch (err) {\n console.log(err, \"here\");\n }\n}\n\nconst addMealPlan = async (req, res) => {\n \/\/validate req.body\n\n const { collectionDb, store, conInfo } = await initGridDbTS();\n\n const { details } = await mealPlanValidation(req.body);\n if (details) {\n let allErrors = details.map((detail) => detail.message.replace(\/\"\/g, \"\"));\n return responseHandler(res, allErrors, 400, false, \"\");\n }\n\n try {\n const {\n title,\n calories,\n fat,\n cabs,\n protein,\n days,\n breakfast,\n lunch,\n dinner,\n snack1,\n snack2,\n snack3,\n } = req.body;\n\n const id = uuidv4();\n\n const data = [\n id,\n title,\n calories,\n fat,\n cabs,\n protein,\n days.join(\";\"),\n breakfast,\n lunch,\n dinner,\n snack1,\n snack2,\n snack3,\n ];\n\n const saveStatus = await insert(data, collectionDb);\n\n if (saveStatus.status) {\n const result = await queryByID(id, conInfo, store);\n return responseHandler(\n res,\n \"Meal plan saved successfully\",\n 201,\n true,\n result\n );\n }\n\n return responseHandler(\n res,\n \"Unable to save meal plan\",\n 400,\n false,\n saveStatus.error\n );\n } catch (error) {\n responseHandler(res, \"Error saving meal plan\", 400, false, error);\n }\n};<\/code><\/pre>\n<\/div>\n![\"\"](\"https:\/\/griddb.net\/wp-content\/uploads\/2024\/01\/2.jpg\")
<\/a><\/p>\n![\"\"](\"https:\/\/griddb.net\/wp-content\/uploads\/2024\/01\/3.jpg\")
<\/a><\/p>\nStep 7: Get a Meal Plan Details<\/h3>\n
router.get(\"\/meal-detail\/:id\", mealPlanDetails);<\/code><\/pre>\n<\/div>\nconst mealPlanDetails = async (req, res) => {\n const { store, conInfo } = await initGridDbTS();\n const { id } = req.params;\n\n const result = await queryByID(id, conInfo, store);\n\n return result\n ? responseHandler(res, \"meal plan detail found\", 200, true, result)\n : responseHandler(res, \"No meal plan found\", 400, false, \"\");\n};<\/code><\/pre>\n<\/div>\n![\"\"](\"https:\/\/griddb.net\/wp-content\/uploads\/2024\/01\/4.jpg\")
<\/a><\/p>\n![\"\"](\"https:\/\/griddb.net\/wp-content\/uploads\/2024\/01\/5.jpg\")
<\/a><\/p>\nStep 8: Edit a Meal Plan<\/h3>\n
router.put(\"\/edit-meal\/:id\", editMealPlan);<\/code><\/pre>\n<\/div>\nconst editMealPlan = async (req, res) => {\n const { store, conInfo } = await initGridDbTS();\n const { id } = req.params;\n\n const result = await queryByID(id, conInfo, store);\n\n if (!result) {\n return responseHandler(res, \"incorrect meal plan ID\", 400, false, \"\");\n }\n\n const {\n title,\n calories,\n fat,\n cabs,\n protein,\n days,\n breakfast,\n lunch,\n dinner,\n snack1,\n snack2,\n snack3,\n } = req.body;\n\n const data = [\n id,\n title,\n calories,\n fat,\n cabs,\n protein,\n days.join(\";\"),\n breakfast,\n lunch,\n dinner,\n snack1,\n snack2,\n snack3,\n ];\n\n const check = await editByID(store, conInfo, data);\n\n if (check[0]) {\n const result2 = await queryByID(id, conInfo, store);\n\n return responseHandler(\n res,\n \"meal plan edited successfully\",\n 200,\n true,\n result2\n );\n }\n return responseHandler(res, \"Error editing meal plan\", 400, false, \"\");\n};\n\nconst editByID = async (store, conInfo, data) => {\n try {\n const cont = await store.putContainer(conInfo);\n const res = await cont.put(data);\n return [true, \"\"];\n } catch (err) {\n return [false, err];\n }\n};\n<\/code><\/pre>\n<\/div>\n![\"\"](\"https:\/\/griddb.net\/wp-content\/uploads\/2024\/01\/6.jpg\")
<\/a><\/p>\nStep 9: Delete a Meal Plan<\/h3>\n
router.delete(\"\/delete-meal\/:id\", deleteMealPlan);<\/code><\/pre>\n<\/div>\nconst deleteMealPlan = async (req, res) => {\n const { store, conInfo } = await initGridDbTS();\n const { id } = req.params;\n\n const result = await deleteByID(store, id, conInfo);\n\n return result[0]\n ? responseHandler(res, \"meal plan deleted successfully\", 200, true, \"\")\n : responseHandler(res, \"Error deleting meal plan\", 400, false, \"\");\n};\n\n\n\/\/Delete entry\nconst deleteByID = async (store, id, conInfo) => {\n try {\n const cont = await store.putContainer(conInfo);\n let res = await cont.remove(id);\n\n return [true, res];\n } catch (error) {\n return [false, error];\n }\n};<\/code><\/pre>\n<\/div>\n![\"\"](\"https:\/\/griddb.net\/wp-content\/uploads\/2024\/01\/7.jpg\")
<\/a><\/p>\n![\"\"](\"https:\/\/griddb.net\/wp-content\/uploads\/2024\/01\/8.jpg\")
<\/a><\/p>\nStep 10: Get List of All Meal Plans in the Database<\/h3>\n
router.get(\"\/all-meals\", getAllMealPlans);<\/code><\/pre>\n<\/div>\nconst getAllMealPlans = async (req, res) => {\n const { store, conInfo } = await initGridDbTS();\n const result = await queryAll(conInfo, store);\n\n return result.length\n ? responseHandler(\n res,\n \"all meal plans in the database successfully retrieved\",\n 200,\n true,\n result.results\n )\n : responseHandler(res, \"Unable to retrieve meal plans\", 400, false, \"\");\n};\n\nasync function queryAll(conInfo, store) {\n const sql = `SELECT *`;\n const cont = await store.putContainer(conInfo);\n const query = await cont.query(sql);\n try {\n const rowset = await query.fetch();\n const results = [];\n\n while (rowset.hasNext()) {\n const row = rowset.next();\n results.push(row);\n }\n return { results, length: results.length };\n } catch (err) {\n console.log(err);\n return err;\n }\n}\n<\/code><\/pre>\n<\/div>\n![\"\"](\"https:\/\/griddb.net\/wp-content\/uploads\/2024\/01\/9.png\")
<\/a><\/p>\n![\"\"](\"https:\/\/griddb.net\/wp-content\/uploads\/2024\/01\/10.jpg\")
<\/a><\/p>\nThe Frontend<\/h2>\n
ReactJs<\/a>:<\/h3>\n
Material UI<\/a>:<\/h3>\n
Redux Toolkit<\/a>:<\/h3>\n
cd client<\/code><\/pre>\n<\/div>\nnpm i<\/code><\/pre>\n<\/div>\nnpm start<\/code><\/pre>\n<\/div>\n
![\"\"](\"https:\/\/griddb.net\/wp-content\/uploads\/2024\/01\/Screenshot-2024-01-12-at-1.54.40\u202fPM.png\")
<\/a><\/p>\n