
Turn any express app into a single page app with a creative plugin, avoid extra javascript, and see improved performance on server and client while using frameworks side by side.
learn to set up a node.js express single-page app by installing node.js and npm, choosing a text editor, and initializing the project with express, MongoDB, and the ejs engine.
Connects to a MongoDB database with mongoose, creates a user, runs on port 1890, and sets up express middleware for file uploads, body parsing, and a public directory.
Organize an Express app by creating a routes folder, exporting route functions, and wiring main routes, then implement an EJS master layout with Bootstrap to render HTML pages.
Create a new pin page in a Node.js Express app by defining routes, rendering the create view, and building a Bootstrap form to post pins.
Create a new pin page by defining the pin model in a MongoDB database, wiring up fields for title, description, user, and a required file upload, and render the form.
Create a pin via a post handler, collecting title, description, and user name, saving to MongoDB with the pin model, uploading an image to public/files, then render the pins index.
Create a pins list page in a Node.js Express single-page app by looping pins to display image, title, and description in a container with details link and delete option.
Implement delete functionality in the Node.js Express single-page app by adding a delete route, parsing the pin id, removing the pin from MongoDB, and redirecting to the index page.
Implement the pin details page by wiring the route, passing the pin id to the server, and rendering a Bootstrap card with the pin's image, title, description, and actions.
Implement a pin edit page in a complete Node.js express single-page app by fetching a pin by id, pre-filling the title and description, and saving updates to the database.
Implement the pin save functionality by wiring the /pins/save/:id route to a callback that toggles the saved status and navigates to the pin details page.
Implement search functionality by creating a get route that reads the search term from the query, queries pins by title from database using a contains-like filter, and displays sorted results.
Add a left side bar to the bootstrap-based single-page app in the Node.js Express project, wrap content in a main div, implement a toggle with icons, and display saved pins.
Turn a traditional multi-page app into a single page application within two minutes by wiring a plugin, middleware, and ajax-driven partial updates.
Watch the final project demo for the nodejs express single-page app, showcasing a saved details page, form submission with name and image, a five-item list, and backward/forward navigation.
Master the first rule to display Ajax response anywhere by exploring Ajax target attribute, class selector, attribute selector, and element selector within a form submission.
Execute an ajax response to fill the body content and display a bootstrap modal after form submission, hiding fields from section 1.
Follow the third rule by attaching a function to the form submit attribute and ensuring it runs before submitting, prior to calling ajax.
Apply the four rules for Bootstrap modal use in a Node.js Express app, specify content with a selector, target elements accurately, and manage adx response data inside the model Windu.
Explore the fifth rule to stop calling the Ajax method. Learn how form interactions can trigger a full browser refresh and how to prevent it.
Caution: Each Student will need to purchase The Plugin which is not belongs to this Course. I have used paid Plugin on this Course.
I HELP ALL STUDENTS VIA TeamViewer USING Skype CALL TO FIX ALL INITIAL ISSUES.
Creative way to turn any version of NodeJs Express Application Into Single-Page Application Within 2 minutes after using my (toufiqElahySPA.js)Jquery Plugin. Here, toufiqElahySPA.js is a Jquery Plugin which is responsible to turn any web application into single page application. I developed this Plugin to minimize developer's effort while working on Creating Single Page Application. Let's see, how my Plugin can make developers life better.
Single page applications are more capable of decreasing load time of pages and the amount of data transfer from server to client.
Why This Course?
There are several pain points while working with Javascript framework like AngularJs, React, VueJs, Knockout, meteor e.t.c. in a NodeJs Express application in order to create Single-Page Application. Few Pain Points Are:
Need to specify routing for each request
Need to modify Server side technology according to Javascript framework
Only possible to debug on run time
Hard-coded data-binding caused too many error
Increase the complexity a lot
developer no need to learn any javascript framework and also no need to write much Jquery code to make Single Page Application after using my Jquery Plugin(toufiqElahySPA.js).
Note: developer can also use other JavaScript framework(angularjs, knockout, react e.t.c.) side by side with my Jquery Plugin. But no need, i will prove.
I applied the Plugin in a Nodejs Express Web application. This plugin will also work for Other Web Technologies too. I will show in my future course.
This course is so important to Developer who loves:
Strongly Typed data-binding
Compile time error checking,
auto code completion(IntelliSense),
Re-usability ,
not to get Run-time error unexpectedly
to get rid from complexity should definitely take this course.
Why (toufiqElahySPA.js)Jquery plugin is better than any JavaScript framework:
(1) Developer won't need to write too much Javascript code after using my plugin wheres developer usually writes too many javascript code while working with AngularJs(javascript framework)
(2) Developer won't need to write Jquery ajax code because the plugin has ajax function specified which will be called automatically as a common function
(3) Developer won't need to specify routing as like AngularJs because My plugin will follow nodejs express routing by default.
(4) Developer can learn using my plugin easily and quickly. just need to follow only 5 rules of my plugin and any complex scenario can be achieved through this plugin like AngularJs [i will prove]
(5) Developer can also make Single-Page app even not following those 5 rules of the plugin. Those rules are for critical situation. First 2 rules is enough to solve any heavy lifting work.
What technology is used in front-end?
Mainly Jquery
HTML Code
What technology is used in back-end?
Nodejs
Mongodb
Javascript
What tools you will need?
Any text editor
Nodejs will need to be installed in your Machine
Any browser Whatever you like most
Why I applied My Plugin to NodeJs Express application:
Cross-platform needs.
High-performance and scalable systems.
Within this course I will Show: How powerful and complex cross-platform single page application we can build with my Plugin And how my SPA technique can improve the Software performance both on server and client side.
How toufiqElahySPA.js(jquery plugin) works:
If End user click any Link or submit any Form or click Backward or Forward button on browser, the common ajax function of the Plugin will be invoked automatically.
5 rules of the plugin to handle critical situation:
I will explain all these 5 rules within this course. True fact is: learning these 5 rules are enough to learn this entire Course. Learn By Doing.
If something is still unclear, you can ask question in the forums, i will reply. Make sure you followed my video's and source code and specially my 5 rules. Happy Coding!
I hope! You will Enjoy this magic Course.
Important Notice:
i want to ensure all the Student that my Plugin(toufiqElahySPA.js) will not be responsible for any server related error while applying the Plugin(toufiqElahySPA.js) in your own Project. you may just need to modify toufiqElahySPA.css according to your application need. If you get a server related exception that means your implementation has problem which need to be fixed. Don't ever think that the Plugin maybe the reason for this exception.
please, give good ratings and comments if you want to get this type of creative and unique course in future. Good feedback will definitely encourage me to make more course on Udemy. Thank you!
Notice(to all):
If i don't get good ratings and comments, i will not able to get inspired to share more content. if u really want to get Advanced Topics . please give me true ratings and comments.