Forem: Imad

User authentication with Node.js (reading series part 2): MongoDB setup

Imad — Thu, 12 Nov 2020 21:42:30 +0000

In the last post, we cloned the project repository and briefly talked about the project's essential dependencies.

In this part, we will cover the following points:

What is MongoDB + tutorial
Open MongoDB cloud account
Connect to MongoDB with mongoose

MongoDB setup

What is MongoDB?

MongoDB is an open-source cross-platform database and is currently the most popular NoSQL architecture.

MongoDB uses JSON-documents and schemas to store data.

If you want to learn more about MongoDB, here is a crash course tutorial from Travesty Media on Youtube.

Open MongoDB account

1- Head over to mongodb cloud and create an account.

2- Next, in the main dashboard click `New Project` from the top right.

3- Give your project a name and click `Next`, now your dashboard should look like this:

4- Click `Build a Cluster`.

From the list below, select a cloud provider and region, you can optionally give your cluster another name from Cluster Name tab.

5- MongoDB will offer you the choice between `Shared Cluster` and `Dedicated Cluster`, for this test project make sure to select a FREE option and Click `Create a Cluster`.

6- It can take up to 10 min (depending on where you are) for the cluster to complete, now it's time to grab a cup of tea! :)

7- When the cluster is ready, click the `connect` button on the left pane.

8- Next we need to whitelist our IP address, click `Add Your Current IP Address`.

9- Enter a database `Username` and `Password` and click `Create Database User`

10- Next, click `Choose a connection method`

11- Next, click `Connect your application`

12- `Copy` your connection string

Connect to MongoDB with mongoose.

MongoDB cloud account and the cluster are all set, we only need to find a way to connect the server application to our database.

In this application, we will make use of mongoose, an excellent MongoDB client.

I highly recommend going through mongoose docs, they offer extensive query guides and API resources. Find them here

Open the project with your favorite text editor

You can find the starter project repository here :

git clone https://github.com/2imad/node-js-authentication/tree/boilerplate
cd node-js-authentication
npm install

in `db` folder, find and open `mongoose.js` file

In this file we will :

Require in the mongoose module
Construct the connection URI and hide our credentials with dotenv
Attempt to connect to MongoDB with the URI
Handle connection errors

First, we need to create a .env file at the project root level to store our environment variables.

Open the `.env` file and set the following environment variables corresponding to your cluster's connection string, it should be like this :

mongodb+srv://<username>:<password>@<hostname>/<dbname>?retryWrites=true&w=majority

DB_USER_NAME=username
DB_USER_PASSWORD=password
DB_HOST=hostname
DB_NAME=dbname   // you can choose any name you like. ex. "users"

The environment variables will be automatically stored in process.env object once we start our server.

A server restart is required each time the content of .env file is changed.

Save the file and make sure to include it in .gitignore .

The content of this file should never be committed to the remote code base, we will insert these environment variables directly in Heroku when we deploy to production.

Now we are ready to write some code, in mongoose.js write the following :

// require mongoose module
const mongoose = require("mongoose");
// require dotenv module 
require("dotenv").config();

// construct connection URI with environment variables stored in .env
const URI = `mongodb+srv://${process.env.DB_USER_NAME}:${process.env.DB_USER_PASSWORD}@${process.env.DB_HOST}/${process.env.DB_NAME}?retryWrites=true&w=majority`;

// Attempt to connect to MongoDB using mongoose client 
mongoose.connect(URI, {    // pass the URI as first argument 
  useNewUrlParser: true,      // pass an options object with default mognodb parameters  
  useUnifiedTopology: true,
  useCreateIndex: true,
});

// listen to "connected event" and log "Connected to MongoDb"
mongoose.connection.on("connected", () => {
  console.log("Connected to MongoDb");
});

// listen to "error event" and log "Error connecting to MongoDb" + error message
mongoose.connection.on("error", (e) => {
  console.error("Error connecting to MongoDb", e.message);
});

At the top of the `index.js` file, add the following:

require("./db/mongoose");  // require mongoose.js file 
const express = require("express");
const app = express();
const PORT = process.env.PORT || 8000;
app.listen(PORT, () => console.log(`Listening on ${PORT}`));

Finally, run the following command to test the connection:

npm run server

Output :

[0] Listening on 8000
[0] Connected to MongoDb

Troubleshooting

It is very common for Mongodb to throw an error the first time you run it.
Here are some tips to solve any problems you might face.

1- Read carefully the error message, most of the time, the MongoDB team adds the solution right after the error.

2- Copy the entire error message and paste it into google, the chance that somebody else had the same problem as you is very high.

3- Some companies, schools, public networks, institutions, block the type of connection we are making to MongoDB, if you are using a VPN or proxy, you might face some issues.

4- If the problem persists, try connecting from another location.

5- Contact me on Twitter, I will do my best to help you out.

Conclusion

In this section, we set up an account on the MongoDB cloud platform, learned how to hide sensitive credentials using .env file and dotenv module.

Finally, we created mongoose.js file and successfully connected our app to the database.

In the next module, we will create the User schema with mongoose and learn how safely store users credentials with JSON web token and bcrypt

Thank you very much for reading!

Cheers

IYO

Bemoore

User authentication with Node.js series: boilerplate

Imad — Mon, 09 Nov 2020 20:31:55 +0000

Introduction

User authentication is the core feature of every website and mobile application. Writing authentication the correct and secure way prevents malicious users from accessing sensitive application data.

There are many technologies we can use to enforce secure access to application resources, the most common one is OAuth.

You can read more about OAuth here.

But, for this series, we will build the authentication system from scratch, and make it as simple as possible so it can be further customized and “plugged” with any existing application.

Prerequisites

To ensure a smooth and pleasant experience, please make sure before cloning the starter repository to have the following tools installed:

latest version of Node.js
latest version of npm
git
Text editor
Terminal

Project repository

In this section, we will clone the starter project hosted on Github, get familiar with the folder structure, and explore the project dependencies.

Open a Terminal session and run >

git clone https://github.com/2imad/node-js-authentication.git
cd node-js-authentication

Install server dependencies
```
npm install
```
Install client dependencies
```
cd client
npm install && cd ..
```
Git checkout boilerplate branch
```
git checkout boilerplate
```

Open the project with your favorite text editor, at this stage it should look like this:

|-- node-js-authentication
|-- config
|-- db
|-- mailer
|-- middlewares
|-- routes
|-- .env
|-- .gitignore
|-- index.js
|-- LICENSE
|-- package-lock.json
|-- package.json
|-- README.md
|-- client
|   |-- .gitignore
|   |-- package-lock.json
|   |-- package.json
|   |-- README.md
|   |-- public
|   |   |-- favicon.ico
|   |   |-- index.html
|   |   |-- logo192.png
|   |   |-- logo512.png
|   |   |-- manifest.json
|   |   |-- robots.txt
|   |-- src
|       |-- App.css
|       |-- App.js
|       |-- App.test.js
|       |-- index.css
|       |-- index.js
|       |-- logo.svg
|       |-- reportWebVitals.js
|       |-- setupTests.js

Start the development server
```
npm run server
```

If you see output like below, it means you are ready to roll :)

[nodemon] 2.0.6
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: js,mjs,json  
[nodemon] starting `node index.js`
Listening on 8000

Project dependencies

Here is the current dependency list as found on package.json.
With each list item, you find a link to the package homepage on npm and a brief introduction.

bcrypt bcrypt is a powerful hashing function, we will make use of its power to add hashing and salting to user passwords.
concurrently This package enables running multiple commands simultaneously.
cors Cross-Origin Resource Sharing (CORS) is an HTTP-header based mechanism that allows a server to indicate any other origins (domain, protocol, or port) than its own from which a browser should permit loading of resources. CORS also relies on a mechanism by which browsers make a “preflight” request to the server hosting the cross-origin resource, in order to check that the server will permit the actual request. In that preflight, the browser sends headers that indicate the HTTP method and headers that will be used in the actual request. During development, our client and server are both running on localhost. Most browsers deny cross-origin requests for security reasons, but Cors will help us get around that.
dotenv This package enables retrieving environment variables stored in the .env file and using them without risking sensitive data exposure. > Important note: .dotenv file should always be included in .gitignore before committing the code.
express express is the module we are using to create a server and configure authentication routes.
jsonwebtoken JSON Web Token (JWT) is an open standard (RFC 7519) that defines a compact and self-contained way for securely transmitting information between parties as a JSON object. This information can be verified and trusted because it is digitally signed. JWTs can be signed using a secret (with the HMAC algorithm) or a public/private key pair using RSA or ECDSA. - source.
mongoose Mongoose provides a straight-forward, schema-based solution to model our application data. It includes built-in type casting, validation, query building, business logic hooks, and more, out of the box.
nodemailer Nodemailer is a module for Node.js applications to allow easy email sending.
validator This library validates and sanitizes strings.

Resources

Finally, some additional resources to help you understand the functionality of each dependency we are using in the project, in case you know any other resources, please do let me know!

bcrypt

Article:Hashing in action

NPM: bcrypt

Playground: bcrypt generator.
cors

Article: MDN

Definition: W3C

Article: What is Cors
express

Homepage: Express

NPM: express

Article: MDN.
jsonwebtoken

Homepage: jwt

Playground: jwt

Source code: jwt
mongoose

Homepage: mongoose

NPM: mongoose

Tutorial:MDN
nodemailer

Homepage:Nodemailer
Full tutorial:Nodemailer

Conclusion

In this first part of the series, we talked about authentication with Node.js, cloned the starter repository, and installed the dependencies. Hopefully, you are as excited as I am to get to the next chapter where we will create a MongoDB database and connect it to our project with mongoose, and finally create the signup route.

The next chapter should appear soon, so stay tuned! or follow me and receive it immediately in your mailbox :)

Cheers!

IYO

Bemoore

6 Tips to improve your search engine results

Imad — Tue, 06 Oct 2020 12:55:10 +0000

Search engines are the most commonly used tools by developers when working on solving programming problems.

Routine tasks such as running “How to” and “plugin XYZ for...” search queries play a significant part in our daily lives as programmers.

Thanks to advanced technologies running behind the scenes, popular search engines like Google, DuckDuckGo often give a quick and accurate answer to most queries.

Yet, there are many query options you can use to unlock the search engine’s full potential.

Here are some tips to make the most of your search results :

1. Asterisk wildcard

This is a very powerful feature for enabling partial search, it can come in handy when you are not sure about the full query or just want to browse a certain topic.

The browser will take the asterisk (*) and replace it dynamically with all possible hits.

Example

Google top results:

How to create pages dynamically in gatsby.js.
How to get started with gatsby.js 2 and Redux.
How to source content with gatsby.js.
How to use images in gatsby.js.
How to secure gatsby.js.

2. Colon

The use of a colon (:) enables adding specificity to the query, it tells the browser to run the search term only on a specific website.

Example

The list will contain only posts from stackoverflow.com.
At the time of the writing, google found 1.2M results for the query above.

3. Hyphen

The hyphen (-) is used to exclude a certain category from the search results, this can be used when a term has different meanings.

Example

The query above will return all results related to “Mocha” excluding anything related to -coffee. as mocha is a coffee variant.

This query will return results related to Mocha, the Javascript testing framework.

4. The "OR" operator

Yes, OR operator works the same way in google search as in programming languages, this feature enables you, you guessed it, to run multiple queries in a single search term.

Example

5. Quotes

Adding quotes (" ") around the query tells the search engine to search for that exact term.

Example:

6. Image size

Adding image dimensions in your image search query will reduce your search time significantly, this feature allows you to add the widthxheight option to your query.

Example:

This query will return filtered cat images to 500px width and 500px height.

Conclusion

These tips are only a few of very powerful options you can pass to your query, in case you would like to explore more, here is a link to google search help documentation

Thank you for reading, if you liked this article, do not hesitate to share it with your friends.
Follow me on twitter for daily programming tips.

Have a nice day!

IYO

Free online tools for fast and easy image optimization

Imad — Sat, 03 Oct 2020 08:17:53 +0000

As web developers, we are often given the task to load assets to websites and applications.

Most of the time, unless you are working with a dream team of designers, the assets available are often either too large or incorrectly formatted.

Likely there are so many ways for developers to manipulate assets, before shipping them to the browser.

Here is a short list of free online tools I use myself on daily basis for image compressing

Image processing

*1.Tiny PNG *

Tiny PNG is a super powerful fast online tool to compress your .png or even .jpg files, you just need to drag and drop your photo and it compresses it automatically, with up to 60% of file size reduction.

Tiny PNG

*2.JPEG-optimizer *

JPEG optimizer is another great tool to compress jpg files, in the UI you can upload your photo and make and customize the compression level ( custom width in pixels ).

JPEG optimizer

Resizing

Picresize is my favorite tool, I use it almost every day, ( i used it to resize the header image of this post).
In this tool you can do the following :

Crop
Rotate
Flip on both axis
Resize with given % or custom values
Save the file in different format including png | jpg | gif

I highly recommend you to try it out and bookmark it on your favorite browser, it will come in handy, trust me.

picresize

The last but not least good practice to optimize images in your website is knowing what format to use for which kind of asset, there are plenty of resources out there explaining the difference between png and jpg, if you are curious about the topic let me know on twitter or email, I will be glad to point them out.

*Here is a good resource to test the loading time of your assets: *

imgix

On imgx you just need to copy-paste the URL of your website and receive a detailed report of your website load speed. Highly recommended

That's all folks,

**If you liked this post or you feel a good free resource ( no signup required) should be added to this list, please let me know in the comment section or on twitter.
Also please share the post with your friends :) * *

The best Udemy courses to fast forward yourself from a beginner to lead react.js developer.

Imad — Thu, 17 Sep 2020 20:44:01 +0000

Udemy is by far the most popular learning platform, offering a massive amount of video content from awesome creators.

Due to this massive offer, the platform might become overwhelming, especially if you are a beginner with no idea where to begin.

I still remember the time when I started using the platform back in 2017, at the time, I only knew some HTML and all I could do with CSS was change the text color.

It took me almost a month of research before finding the best and most valuable resources to expand my knowledge on HTML - CSS - JavaScript and finally React.js.

Here is the list of the courses I personally took and achieved my goal of becoming a lead developer working for one of the big 4 consultancy companies.

Disclaimer:
Following a self-teaching path is hard, but doable. You need a good dose of discipline, willpower, dedication, and perseverance.

In the following days, I will publish a full blog on how I organized my studies, tools, and tricks I used to stay focused.

The List

HTML - CSS

https://www.udemy.com/course/design-and-develop-a-killer-website-with-html5-and-css3/

When it comes to web development and design, you have to give it to Jonas, after finishing this 12hours course you will have a solid HTML and CSS knowledge foundation.

CSS

https://www.udemy.com/course/advanced-css-and-sass/

My styling really sucked until I took this course, Jonas explains in detail the most advanced CSS topics, project structure, CSS pre-processors, and compilers.

Javascript

https://www.udemy.com/course/the-complete-javascript-course/

This one is the top Javascript course on Udemy, it covers all topics from primitives to hardcore topics such as closures, prototypal chain, IEFE, etc…
Jonas just published a new update, and the course is now 28h long!!

React

https://www.udemy.com/course/react-redux/

When it comes to React, Stephen is arguably the best teacher out there.

The foundation of my career as a developer is built thanks to his knowledge.

Stephen explains every tiny piece of React in detail and keeps hammering on it until you get it.

Stephen’s teaching signature is highly effective, his videos do not exceed +/- 5min, this gives you the ability to absorb the content, and also reference a topic easily after you finish the course.

Stephen is one of the few teachers who I never heard saying “do it like this because it works that way”. Every single topic comes with a thorough explanation.

Stephen utilizes diagrams to help visual learners, like myself, get a good grasp of the topic.
You receive the diagrams together with the course repository for free.

Important note :

I’m not making paid marketing for any of the creators mentioned above, I don't think they need marketing after all.
The sole intention of my post is to share my learning path and help aspiring web developers.

Liked the article? Please share it with others.

Do you have a suggestion or a question?
Contact me on twitter

Thank you for your time!

Cheers

IYO

Bash functions to level up your aliases game!

Imad — Thu, 10 Sep 2020 21:06:50 +0000

Do you use bash aliases to customise your commands?
Of course you do!

....

But, did you know you can extend aliases to use bash functions and pass arguments?

bash functions enable you to concatenate multiple commands and add as many arguments as you can. Well, just like any function in any programming language.

I came across this when I was looking into condensing git commands. I AM EXTREMELY LAZY and running git add + git commit + git push every time, really hurts.

So let's make a function that does just that.

STEP 1

We need to make the alias persistent in bash profile.
Open a new bash terminal window and run :

STEP 2

Anywhere in your bashrc file, declare the function as shown below.

STEP 3

Save and exit nano.

Here is what we did, we declared pushtoremote function, which runs git add . git commit -m message and git push repository branch consecutively

$1 $2 $3 are placeholders for the variables passed to the alias upon executing. message repository branch (example follows).

STEP 4

We need to link the alias to the current session, so we can immediately start using it.

STEP 5

Here is a sample command with pushtoremote alias.

Note : some terminals like fish do not support && so you will have to replace it with and

If you make something extra cool with bash functions, please do let me know. :)))

I post snippets every day on twitter, join me there!

Cheers!

Imad

How to add custom fonts to a React Native project with Expo and React Navigation!

Imad — Tue, 04 Aug 2020 08:27:50 +0000

To achieve our goal, we will take the following steps :

Generate a new test project with Expo-CLI.
Install and import react-navigation, react-navigation-stack modules.
Create 2 screens and display some dummy text.
Download a Font and add it to the project.
Import and use loadAsync helper from Expo
Wire up the newly added font and use it in the project.

1- Generate a new Expo project

Head over to a directory of your choice and run :

Using npx: npx expo-cli init test-custom-font
OR
Using expo-cli: expo init test-custom-font

2- Install the dependencies

run the following to install react-navigation dependencies:

npm i react-navigation react-navigation-stack react-navigation-gesture-handler

While the installation is running, let’s open the project and add some boilerplate.

3- Create the screens and display some text

To keep this article short, i will skip the how-to-create-and-import-export-your-components section, and head over to the adding the Font.

At this point, your files should look like this :

App.js


import { createAppContainer } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";
import HomeScreen from "./src/screens/HomeScreen";
import DetailScreen from "./src/screens/DetailScreen";
const AppNavigation  = createStackNavigator(
  {
    Home: HomeScreen,
    Details: DetailScreen
  }
);
export default createAppContainer(AppNavigation);

HomeScreen.js

import React from "react";
import { View, Text, StyleSheet, Button } from "react-native";

const HomeScreen = ({ navigation }) => {
  return (
    <View style={styles.container}>
      <Text style={styles.textStyle}> Welcome to the Home Screen </Text>
      <Button
        title="See Details"
        onPress={() => navigation.navigate("Details")}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center"
  }
});

export default HomeScreen;

DetailScreen.js

import React from "react";
import { View, Text, StyleSheet } from "react-native";

const DetailScreen = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.textStyle}>
        Lorem Ipsum is simply dummy text of the printing and typesetting
        industry. Lorem Ipsum has been the industry's standard dummy text ever
        since the 1500s, when an unknown printer took a galley of type and
        scrambled it to make a type specimen book. It has survived not only five
        centuries, but also the leap into electronic typesetting, remaining
        essentially unchanged. It was popularised in the 1960s with the release
        of Letraset sheets containing Lorem Ipsum passages, and more recently
        with desktop publishing software like Aldus PageMaker including versions
        of Lorem Ipsum.
      </Text>
    </View>
  );
};
const styles = StyleSheet.create({
  container: {
    padding: 12,
    flex: 1,
    justifyContent: "center",
    alignItems: "center"
  }
});
export default DetailScreen;
```




run `expo start` the result should look like this : 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/go6ifzyv7yc751kp9k15.png)


**3- Download a Font and add it to the project.**


* Inside the assets folder, create a fonts folder.
* Head over to [google fonts](https://fonts.google.com).
* Download and unzip a font of your choice in any location on your machine.
* Copy/paste the .ttf file inside the font folder in the project.
* In this demo we will use "montserrat"

By now, the project structure should look like this :




![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/scfs2m5rykfo0orswoha.png)

**3- Import Expo Font module and wire up the custom font.**

Depending on whether you are using classes or functional components, loading the font is slightly different, let's have a look at both : 



According to Expo documentation, loading a custom font should be done using the built-in `Font.loadAsync` helper method, and since "as it's name suggests" its an `async` function, we should invoke it inside a life cycle method.

---

**Class based approach**


The current implementation of our App.js does not support a life cycle method, as the root component (App.js line 11)is created and exported immediately.

Likely for us, the only thing Expo expects from our App.js is a valid React component.
So let’s build and export a custom App component with our loaded font.

Your App.js should look like this now,



```
// import React 
import React, { Component } from "react";
// import Expo Font module 
import * as Font from "expo-font";
import { createAppContainer } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";
import HomeScreen from "./src/screens/HomeScreen";
import DetailScreen from "./src/screens/DetailScreen";
// import AppLoading helper 
//https://docs.expo.io/versions/latest/sdk/app-loading/
import { AppLoading } from "expo";

const appNavigator = createStackNavigator(
  {
    Home: HomeScreen,
    Details: DetailScreen
  },
  {
    initialRouteName: "Home"
  }
);

// instead of immediately exporting the AppNavigator component we assign in to a constant. 
const RootApp = createAppContainer(appNavigator);


// we create and export our own custom App component 
export default class App extends Component {

  state = {
    loaded: false
  };
// create a helper function to load the font 
  _loadFontsAsync = async () => {
// loadAsync returns true | error
    let isLoaded = await Font.loadAsync({
      // add as many fonts as you want here .... 
      Montserrat: require("./assets/fonts/montserrat.ttf")
    });
    this.setState({ loaded: isLoaded });
  };

// call _loadFontsAsync 
  componentDidMount() {
    this._loadFontsAsync();
  }

  render() {
    if (!this.state.loaded) {
      return <AppLoading />;
    }
    // from the custom App we return the component we assigned to RootApp.
    return <RootApp />;
  }
}
```



---

**Functional approach**

In functional components, we can make use of React hooks to solve this problem, likely for us, a font loading hook already exist and we do not have to build our own. 

We will make use of `@use-expo/font` from Expo to load our Font. 

lets install the package first, run `npm i @use-expo/font`

Next, let's implement it :



```
// import React 
import React from "react";
// import Expo Font module 
import * as Font from "expo-font";
// import useFonts hook  
import { useFonts } from "@use-expo/font";
import { createAppContainer } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";
import HomeScreen from "./src/screens/HomeScreen";
import DetailScreen from "./src/screens/DetailScreen";
// import AppLoading helper 
//https://docs.expo.io/versions/latest/sdk/app-loading/
import { AppLoading } from "expo";

const appNavigator = createStackNavigator(
  {
    Home: HomeScreen,
    Details: DetailScreen
  },
  {
    initialRouteName: "Home"
  }
);

// instead of immediately exporting the AppNavigator component we assign in to a constant. 
const RootApp = createAppContainer(appNavigator);
// require in the font 
const customFonts = {
  Montserrat: require("./assets/fonts/montserrat.ttf"),
};

const App = () => {
    // the same as Font.loadAsync , the hook returns  true | error 
    const [isLoaded] = useFonts(customFonts);


    if (!isLoaded) {
        return <AppLoading />;
    }
    // from the custom App we return the component we assigned to RootApp.
    return <RootApp />;

}

export default App
```



--- 

As you can see, the functional approach is way cleaner and more readable. 

---


**5- Use the newly added font:**

Now, all we have to do is add the font family to our style object, in both HomeScreen.js and DetailScreen.js :

`textStyle:{ fontFamily:'Montserrat'}`


**Result:**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/5mc6ov4s1ale0qs9dboo.png)

---

Like this post ? let me know, i will be posting about advanced topics on React, React Native or Node.js. 

You can find me on twitter too ! :)

Forem: Imad

User authentication with Node.js (reading series part 2): MongoDB setup

MongoDB setup

1- Head over to mongodb cloud and create an account.

2- Next, in the main dashboard click New Project from the top right.

3- Give your project a name and click Next, now your dashboard should look like this:

4- Click Build a Cluster.

5- MongoDB will offer you the choice between Shared Cluster and Dedicated Cluster, for this test project make sure to select a FREE option and Click Create a Cluster.

6- It can take up to 10 min (depending on where you are) for the cluster to complete, now it's time to grab a cup of tea! :)

7- When the cluster is ready, click the connect button on the left pane.

8- Next we need to whitelist our IP address, click Add Your Current IP Address.

9- Enter a database Username and Password and click Create Database User

10- Next, click Choose a connection method

11- Next, click Connect your application

12- Copy your connection string

In this application, we will make use of mongoose, an excellent MongoDB client.

Open the project with your favorite text editor

in db folder, find and open mongoose.js file

Open the .env file and set the following environment variables corresponding to your cluster's connection string, it should be like this :

Save the file and make sure to include it in .gitignore .

At the top of the index.js file, add the following:

Finally, run the following command to test the connection:

Troubleshooting

Conclusion

User authentication with Node.js series: boilerplate

Introduction

Prerequisites

Project repository

Project dependencies

Resources

Conclusion

6 Tips to improve your search engine results

Here are some tips to make the most of your search results :

Example

Google top results:

Example

Example

Example

Conclusion

Free online tools for fast and easy image optimization

The best Udemy courses to fast forward yourself from a beginner to lead react.js developer.

The List

Important note :

Bash functions to level up your aliases game!

STEP 1

STEP 2

STEP 3

STEP 4

STEP 5

How to add custom fonts to a React Native project with Expo and React Navigation!

To achieve our goal, we will take the following steps :

App.js

HomeScreen.js

DetailScreen.js

2- Next, in the main dashboard click `New Project` from the top right.

3- Give your project a name and click `Next`, now your dashboard should look like this:

4- Click `Build a Cluster`.

5- MongoDB will offer you the choice between `Shared Cluster` and `Dedicated Cluster`, for this test project make sure to select a FREE option and Click `Create a Cluster`.

7- When the cluster is ready, click the `connect` button on the left pane.

8- Next we need to whitelist our IP address, click `Add Your Current IP Address`.

9- Enter a database `Username` and `Password` and click `Create Database User`

10- Next, click `Choose a connection method`

11- Next, click `Connect your application`

12- `Copy` your connection string

in `db` folder, find and open `mongoose.js` file

Open the `.env` file and set the following environment variables corresponding to your cluster's connection string, it should be like this :

At the top of the `index.js` file, add the following: