README preview

Project-with-MEAN-Stack

With MEAN, we can build an application that is completely written using JavaScript technologies from frontend to backend and also at the database level. Delve deeper into MEAN Stack by building a real-world project. I have cover the complete code of end-to-end web application development with MongoDB, Express, Angular, and Node .js The goal of this code is to help you master MEAN stack development, and will get a broader understanding of MEAN applications and build amazing application.

MEAN Stack is an acronym for MongoDB, Express, Angular and Node.js – whereby all these four are integrated to form solution-built full-stack JavaScript applications

Why MEAN Stack App Development such a great choice?.

Using the same programming language in both the front and back ends of the application has multiple benefits. For one thing, it makes data communication between server and client simpler and faster. It makes modifications to either end easier. It also promotes reusing code across the multiple technologies that in turn helps keep the application secure and stable.

You will learn how to:

Create Nodejs server with Express.js
Use ES6 with Nodejs
Create Restful APIS with Nodejs, Express and Mongoose
Secure Restful APIS with Passport and JWT
Social Authentication in Node Js
CRUD(Create, Read, Update, Delete) Operation in Angular
Build Angular App with Angular11, Bootstrap4.5
Learn how to use Angular 11 Components in Real world Application
JSON Web Token Authentication in Angular

Steps

Download the code
Go to the folder & npm i
Npm start (http://localhost:5000/users)
Go to angular-src & npm i
Ng serve
http://localhost:4200/home

victortu4 /

Victor-Portfolio

★ 2

<!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Jayne Doe</title> <link rel="stylesheet" href="Portfolio.css"> </head> <body> <div class="wrapper"> <div class = "header"> <h1>Jayne Doe</h1> <h2>Master of Shadows and the Internet</h2> </div> <div class = "Biography"> <img src="photo_of_me.jpg" alt="photo_of_me"> <div class="About"> <h2>About</h2> <p>Hello! I'm an extremely driven and creative Full Stack Developer who is currently open for career oppurtunities as a front-end or back-end web developer in the Greater Seattle Area.</p> <br> <p>I'm a recent graduate of Coding Dojo, a coding school located in Bellevue, WA that teaches 3 full stacks in 3 months. I'm capable of learning new technologies very quickly, and am always looking for opportunities to further expand my skills and grow as a developer. <a href="#">Continue Reading</a></p> </div> </div> <div class="FlexBoxes"> <div class="Col"> <h3 class="Tag">La Mode</h3> <div class="Personal_Image1"> <img src="lamode.png" alt="lamode" class="Personal" > <p>La Mode is an Ecommerce website for designed to market various clothing products. Users are able to view the available garments, select their desired quantity, and complie a shopping cart for making a final purchase. </p> <div class="Tech_Buttons"> <h1>Technology</h1> <img src="JavaScript.png" alt="JavaScript" class= "Techs"> <img src="ajax.png" alt="ajax" class= "Techs"> <img src="bootstrap.png" alt="bootstrap" class= "Techs" > <img src="angular.png" alt="angular" class= "Techs"> <img src="c-sharp.png" alt="c-sharp" class= "Techs"> <img src="codeigniter.png" alt="codeigniter" class= "Techs"> <img src="codepen.png" alt="codepen" class= "Techs"> <img src="CSS.png" alt="CSS" class= "Techs"> <button>La Mode</button> </div> </div> </div> <div class="Col"> <h3 class="Tag">Family Contacts</h3> <img src="familycontacts.png" alt="family_contacts" class="Personal"> <p>Family Contacts is a free application for managing, sharing, and visualizing your family relationships for both extended and immediate family. As an essential feature of the the project, your log-in information determines who you can see and reveals how people are related to you.</p> <div class="Tech_Buttons2"> <h1>Technology</h1> <img src="d3.png" alt="d3" class= "Techs"> <img src="django.png" alt="django"class= "Techs" > <img src="expressjs.png" alt="expressjs" class= "Techs"> <img src="HTML.png" alt="HTML" class= "Techs" > <img src="iOS-Swift.png" alt="iOS-Swift" class= "Techs"> <img src="jQuery.png" alt="jQuery" class= "Techs"> <img src="LAMP.png" alt="LAMP" class= "Techs"> <img src="materialize.png" alt="materialize" class= "Techs"> <img src="MEAN.png" alt="MEAN" class= "Techs"> <button>Family_Contact</button> </div> </div> <div class="Col"> <h3 class="Tag">five Eleven</h3> <img src="fiveEleven.png" alt="fiveEleven"class="Personal" > <p>Five Eleven is a data visualization project built on the Python software stack. The application transforms the developer job-hunt into a more visual, user friendly experience. Based on location, technology popularity, and the other vast data sets, users may easily visualize the varying sizes and concentrations of the junior developer job market across nation.</p> <div class="Tech_Buttons3"> <h1>Technology</h1> <img src="mongodb.png" alt="mongodb" class= "Techs"> <img src="mysql.png" alt="mysql" class= "Techs"> <img src="nodejs.png" alt="nodejs" class= "Techs"> <img src="php.png" alt="php" class= "Techs"> <img src="python.png" alt="python" class= "Techs"> <img src="RUBY.png" alt="RUBY" class= "Techs"> <img src="sqlite.png" alt="sqlite" class= "Techs"> <img src="socket.png" alt="socket"class= "Techs" > <button>fiveEleven</button> </div> </div> </div> <div class="Footer"> <div class="p1"> <p>jdoe@gmail.com | 555-555-5555<sP> </div> <p class="p2"><img src="github.png" jaynedev width=40px; height=40px; alt="github"> <class="p2"><img src="linkedin.png" jaynedev width=40px; height=40px; alt="linkedin"><class="p2"><img src="twitter.png" jaynedevwidth=40px; height=40px;alt="twitter"><class="p2"><img src="codepen.png" jaynedev width=40px; height=40px; alt="codepen"></p> </div> </div> </body> </html>

Building-Mean-stack-based-AuthApp

Live repository statistics

Limited signals

README preview

Project-with-MEAN-Stack

Similar Open-Source Projects

Victor-Portfolio

Web_Ultradashboard

My_Angular_MEAN_Blog

E-Commerce-Website