Scribd
Upload
535 views4 pages

Build A Book Store Crud App With MERN Stack - Web - Development (Uncompleted)

This document provides steps to build a book store CRUD app using the MERN stack, which includes MongoDB, Express, React, and Node. It outlines setting up the necessary components: 1) initializing the project with npm init, 2) installing dependencies like Express, Mongoose and Nodemon, 3) creating JavaScript files, 4) connecting to a MongoDB database, and 5) running the app. The goal is to develop a full-stack web application to perform basic CRUD operations on a MongoDB database using the MERN technology stack.

Uploaded by

adyatma ardi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
535 views4 pages

Build A Book Store Crud App With MERN Stack - Web - Development (Uncompleted)

This document provides steps to build a book store CRUD app using the MERN stack, which includes MongoDB, Express, React, and Node. It outlines setting up the necessary components: 1) initializing the project with npm init, 2) installing dependencies like Express, Mongoose and Nodemon, 3) creating JavaScript files, 4) connecting to a MongoDB database, and 5) running the app. The goal is to develop a full-stack web application to perform basic CRUD operations on a MongoDB database using the MERN technology stack.

Uploaded by

adyatma ardi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

BUILD A BOOK STORE CRUD APP WITH MERN

STACK
Achmad Adyatma Ardi1
Programmer, Data Scientist, Engineer
*Corresponding author : [email protected]
Saturday, April 23, 2022

Abstract

With good knowledge and good tools to analyze the data, datas can tell you
everything you want. Programming languages is good one for this purposes. In this
research, I will show you how to visualize data using python. The data set used is
weather data contained 14 variables to analyze. To execute programming statement
we use Jupyter Notebook. Kind of visualization data using seaborn library include :
barplot, displot, joinplot, pairplot, stripplot, swarmplot, boxplot, countplot, pointplot,
lmplot

Keyword : data science, python programming, visualize data, seaborn library,


pandas library, jupyter notebook

Introduction
main purpose of using MERN stack is
CRUD webssite is an acronym to develop apps using JavaScript only.
for ways one can operate on stored MERN stands for MongoDB, Express,
data. It is a mnemonic for the four React, and Node.
basic functions of persistent storage. 1. MongoDB
CRUD stands for Create, Read, MongoDB is an open source No
Update, and Delete. The MEAN stack SQL database management
crud it’s a very comprehensive step – program. NoSQL is used as an
by – step guide for building the create alternative to traditional relational
CRUD web application from the databases. The NoSQL databases
scratch using MERN tack which is one are quite useful for working with
of the most popular web application large sets of distributed data.
stack based on node. MERN stack is a MongoDB is a tool that can
collection of technologies that enables manage document – oriented
faster application development. The

Achmad Adyatma Ardi


information, store or retrieve 2. Install and execute several npm
information. (Node Package Manager) you need
2. Express on your terminal (powershell) :
Express.js is a server – side a. init
application framework that wraps npm init <initializer> can be
HTTP requests and responses, and used to set up a new or existing
makes it easy to map URLs to npm package. The primary
server – side functions. Rather than purposes of npm init is to
writing the code using node.js and initialize your project. Once
creating loads of node modules, you have decided to initialize
Express makes it simpler and your project by typing npm init
easier to write the back – end code. in the command line, then a
Express.js is a js framework. prompt begins to ask for
3. React different input step by step,
React.js is a JavaScript framework here is the following order : (1)
that allow you for creating project’s name, (2) version, (3)
dynamic client – side applications description, (4) entry point, (5)
in HTML. React lets you build up test command, (6) git
complex interfaces through simple repository, (7) keywords, (8)
components, connect them to data author, (9) license. The npm
on your backend server, and render init command provides a
them as HTML suggestion next to the prompt,
4. Node you can press enter to accept
Node.js is a JavaScript runtime the default. Once you have run
environment. Its executes all your through the steps, a generated
server – side code. Express is a file named package.json is
framework that provides basic placed in the root directory
features for developing a web
application in node.js. Node allows on terminal :
you to write JavaScript code that
runs directly in a computer process > npm init

itself instead of in a browser.


You should set,
Development Stage (1) Project’s name : backend
(2) Version : (default by
To develop an application using system)
MERN, you can follow these steps : (3) Description : (optional
1. Open visual studio code (an filled)
Integrated Development (4) Entry point : app.js
Environment / IDE), open your (5) Test command : (blank)
folder location (crtl + K then ctrl + (6) Git repository : (blank)
O) to save your all project files on (7) Keywords : (blank)
spesific folder. (8) Author : (optional filled)

Achmad Adyatma Ardi


(9) License : (default by mongoose is a object data
system) modelling (ODM) library for
MongoDB distributed as an
b. nodemon npm package. Its used to
nodemon is a tool that helps translate the code and its
develop node.js based representation from MongoDB
applications by automatically to the node.js server. The
restarting the node application advantages mongoose module
when the file changes in the is collection validation of the
directory are detected MongoDB database can be
done easily
on terminal :
on terminal :
> npm i nodemon
> npm i mongoose
On package.json (square
brackets scripts), connect e. start
nodemon with script: Its used to execute the defined
file in it without typing its
“scripts”: { execution command.
“start”: “nodemon app.js”,
“test” : “echo\”Error: on terminal :
no test specified\” && exit
1” > npm start

},
3. Create JavaScript files named
c. express app.js for executing code
express is the most popular 4. Build databases
node web framework, and is a. Visit application datas form
the underlying library for a based on MongoDB link :
number of other popular node https://www.mongodb.com/
web frameworks. It provides b. Sign up and log in on it
mechanism to : write handlers c. On MongoDB dashboard click
for request with different new project, named your
HTTP verbs at different URL project “Book-Store”, then
paths (routes) click cresate project.
d. On Book-Store project create
on terminal : new cluster
e. Open network access, add an
> npm i express IP address, set allow access
from anywhere, then confirm it
d. mongoose f. Open database access, create a
database user, fill password

Achmad Adyatma Ardi


authentication with name
“admin” and password just let
generated by system, save the
password with comments on
your source code, click add
user
g. Open database deployments, on
cluster had you create before
connect your database by click
connect your application, copy
the generated link.

# as noted
Replace <password> with the
password for the admin user.
Replace myFirstDatabase with
the name of the database that
connections will use by default.
Ensure any option params are
URL encoded.
h. Connect with script (app.js)

const express =
require(“express”); (1)
const mongoose =
require(“mongoose”) (2)

const app = express(); (3)

mongoose
.connect(
“mongodb+srv://admin:
[email protected]
ngodb.net/bookStore?
retryWrites=true&w=majority”) (4)
.then(() => console.log(“Connected
To Database”)) (5)
.then(() => {
app.listen(5000);
}) (6)
.catch((err) => console.log
(err)); (7)

(14.59)
i.
5. ads

Achmad Adyatma Ardi

You might also like