CRUD Operations using Angular8, Node.js, and MongoDB Atlas.

This blog will walk you through creating a MongoDB Atlas database and running a full-fledged Student application that can perform Create, Read, Update and Delete operations. Github link

Note: More focus is on back-end functionality.

Functionality:

• Signup and Login for Admin

Login Page

• Add Student (Create)

Student Registration Page

• Display Student List (Read)

Student Display Page

• Edit the Student details (Edit)

Student Update Page

• Remove Student from List (Delete)

Setup:

• Angular CLI
• Node.js
• Visual Studio Code (Optional)
• Git

Guidelines MongoDB Atlas Account and Database Setup

1. Create an Account on MongoDB website,
2. In Database Access, add new database user →fill password authentication( eg. node-crud) → give Read and Write to any database.(Database User Privileges) →Add User.
3. In Network Access, add IP Address → Add Current IP Address →Confirm.
4. In Clusters, cluster will created, Go to Clusters →Connect → Choose the Connection Method: Connect your application →Driver : NodeJS → Version: 3.6 and later.
5. Copy MongoDB link (We will come back to this).
6. Go to Clusters → Collections → Create Database → Database Name(eg. node-app) and Collection Name (eg. user) → Create.

Clone the Repository

git clone https://github.com/tejashreeSalvi/StudentApp-CRUD.git

You will see STUDENTAPP-CRUD downloaded on your machine, which has two folders.

• student-back-end (Database Operation)
• student-front-end (User Interface)

How to Run the code

Open the project in any IDE (Visual Studio Code).

Copy MongoDB Link

• Now, search for .env file.
• DB_CONNECTION: paste the MongoDB link here.
• Replace <username> and <password>with the Database Access Credentials (eg. node-crud, refer Step 2 from above). Here, I had keep username and password same but feel free to change it.
• Replace <dbname> with name of database(eg.node-app, refer Step 6 from above).

mongodb+srv://node-crud:node-crud@mongodbcluster.o6zje.mongodb.net/node-app?retryWrites=true&w=majority

Note : Remove <> brackets from the link.

RUN CLIENT

• Open new terminal & go to folder student-front-end.
• Run: npm i to download the dependencies
• Run: ng s to start the server
• Go to browser and you can see Login Page. Hurray 😍

> Angular by default runs on 4200 port number.

http://localhost:4200

RUN SERVER

• Open a new terminal (Note: Keep the Front-end terminal as it is).
• Go to folder student-back-end.
• Run: npm i to download the dependencies.
• Run: npm start to start the node.

Mongodb Atlas Collections Saved Data.

You have successfully executed code 🙌 .

One applause 👏 for yourself 😄. Thanks for reading guys. You all are truly amazing. Lets connect on LinkedIn and Github.