RichClicks

richclicks

Let us learn about MongoDB, Mongoose, Node, and other tech by building a simple URL shortener project. Have you ever wondered how you could create a quick URL shortener for yourself? Like how twitter shortens your links when you share them? Or how bit.ly works? Sure enough, these are complicated companies, but the concept for URL shorteners is simple. Let's learn about MongoDB and other backend tools by actually building this project in 7 steps. Introduction to Project We will be using this from codedamn to really, like really create and evaluate our hands-on project and see the feedback. free URL shortener classroom We will be using the following technologies: Mongoose as the ORM MongoDB as the backend database Node.js as the backend A simple embedded JS file as the frontend Lab 1: Setting up the Express server The link of this lab is here It's a fairly straightforward lab. We have to just create a route /short which should respond appropriately. This code would let us pass: express = ( ) app = express()

app.get( , (req, res) => {
	res.send( )
})

app.get( , (req, res) => {
	res.send( )
})

app.listen(process.env.PUBLIC_PORT, () => { .log( )
}) // Initialize express server on PORT 1337 const require 'express' const '/' 'Hello World! - from codedamn' '/short' 'Hello from short' console 'Server started' Lab 2: Setting up our view engine The link of this lab is here We're using a single .ejs file, so let's explore that a little. Again, a very simple lab because we just have to change the name of the variable. This should get us done: express = ( ) app = express()

app.set( , )

app.get( , (req, res) => {
	res.render( , { : })
})

app.listen(process.env.PUBLIC_PORT, () => { .log( )
}) const require 'express' const 'view engine' 'ejs' '/' 'index' myVariable 'My name is John!' console 'Server started' Lab 3: Setting up MongoDB The link of this lab is here In this lab, we'll connect to MongoDB correctly and insert a record, just for the record This is the solution which should get us to the next lab: app.post( , (req, res) => { db = mongoose.connection.db db.collection( ).insertOne({ : })

	res.json({ : })
}) mongoose.connect( , { : , : })
mongoose.connection.on( , () => { app.listen(process.env.PUBLIC_PORT, () => { .log( )
	})
}) '/short' const // insert the record in 'test' collection 'test' testCompleted 1 ok 1 // Setup your mongodb connection here 'mongodb://localhost/codedamn' useNewUrlParser true useUnifiedTopology true 'open' // Wait for mongodb connection before server starts console 'Server started' Lab 4: Setting up a Mongoose schema The link of this lab is here Finally, we define a schema in the models/url.js file for proper handling with Mongoose, and here's the code for that: mongoose = ( ) shortId = ( ) shortUrlSchema = mongoose.Schema({ : { : , : }, : { : , : , : shortId.generate
  }, : { : , : , : }
}) .exports = mongoose.model( , shortUrlSchema) const require 'mongoose' const require 'shortid' const new full type String required true short type String required true default clicks type Number required true default 0 module 'ShortUrl' Also, as part of the challenge, we update the `/short` route now. app.post( , (req, res) => { record = ShortURL({ : }) record.save()
	res.json({ : })
}) '/short' async // insert the record using the model const new full 'test' await ok 1 Lab 5: Linking the frontend, backend, + MongoDB This is also a simple lab. We just have to update the route to extract the URL passed and store it in the database using our schema. app.use(express.urlencoded({ : }))

app.post( , (req, res) => { fullUrl = req.body.fullUrl .log( , fullUrl) record = ShortURL({ : fullUrl
	}) record.save()

	res.redirect( )
}) extended false '/short' async // Grab the fullUrl parameter from the req.body const console 'URL requested: ' // insert and wait for the record to be inserted using the model const new full await '/' Lab 6: Displaying short URLs on the frontend Now, we display the URL set on our website using the .ejs variables passed. app.get( , (req, res) => { allData = ShortURL.find()
	res.render( , { : allData })
}) '/' async const await 'index' shortUrls Lab 7: Making the redirection work Finally, we link up the redirection scheme using dynamic express routes and correct status codes. app.get( , (req, res) => { shortid = req.params.shortid rec = ShortURL.findOne({ : shortid }) (!rec) res.sendStatus( ) rec.clicks++ rec.save() res.redirect(rec.full)
}) '/:shortid' async // grab the :shortid param const // perform the mongoose call to find the long URL const await short // if null, set status to 404 (res.sendStatus(404)) if return 404 // if not null, increment the click count in database await // redirect the user to original link Conclusion And we can call it a day! You just built a fully working URL shortener by yourself using Express + Node + MongoDB. Give yourself a pat on back! The final source code is available on GitHub If you have any feedback on this article or codedamn classrooms, feel free to reach out to me on and let's discuss :) twitter Also published at https://dev.to/mehulmpt/create-a-url-shortener-project-using-mongodb-node-but-hands-on-1ai2

Stories, News & Mentions about RICHCLICKS

Richclicks’s Stories on HackerNoon