Posts

Ideas for Web Technologies Semester Level Projects

Image
I am teaching Web Technologies this semester using MERN stack. Some of students has asked for semester project ideas for the course. First of all I suggest you to must get expertise in MERN development using assignments and lab tasks, as its core stack of our course. The better would be if you do the semester project in MERN too, as it would help you to explore more area to complete your project requirements. You can make any consumer website or small scale information system using MERN e.g. classifieds, shopping cart, assets management, fleet management, real estate websie with Google Maps API integration, etc. So these are conventional idea, you can think of any, if you get the idea what mean.
If you are confident on your MERN skills and looking for some interesting ideas or unique areas to explore, below are basic ideas, definitely not unique but has something interesting to explore, learn and implement and these are practical and need of the time. Do it only if you think you can do…

Server Side Rendering with Session and Cookies Handling - Lab Task 11

Last Updated On: July 30, 2020
Background
Modern web applications make extensive use of browser based libraries and frameworks e.g. REACT, Angular, Vue.js, etc. These apps are built on REST API i.e. final HTML code is generated at browser side, only data is sent and received from REST endpoints. Before these technologies and even today, in many web applications, complete web pages are generated at server side and sent to browsers where they are rendered and the output is displayed to user. OpenCart, Magento, Wordpress, OSCommerce, etc. which are very popular open source scripts for online stores, make use of server side rending (at least their inital versions). The objective of this task is to get hands on how server side rendered apps are built and different from REACT based apps.
Task Description
With reference to lecture 28, following is already implemented in code: Register, login and logout featuresProduct CRUDAdd and remove product in cart. and view cartExtend that applications addin…

Create REACT Application on REST API - Lab Task 13

Image
In Task 10, you developed a web application using core JavaScript and JQuery, etc. and connected with the REST API (see Task 7 and Task 8 for REST API and MongoDB schema details). 
Develop a new application, an updated version of Task 10 work, in new app, update the frontend to REACT using components you developed in Task 12. No changes in backend are required as the application would consume same REST endpoints.
This task is most comprehensive and it covers many things that we have done so far by integrateing different concepts in one application. Only authentication is left, that we would cover in some other task.

Create Components in REACT - Lab Task 12

Image
In this task, our objective is not to create a complete web application but to practice how components in REACT are created, how composite components are developed, how the state or data is managed and where we place data that is required in multiple components, etc. You can hard code data in your code or fetch it from any REST API, do as you feel convenient. Task 12.1With reference to the lecture on developing custom REACT component. Create REACT components for Student, Course, Address and PhoneNumber, in continuation of your previous example of user, course and address entities. The components shall meet following requirements: The UI shall be Bootstrap based. You may use Cards for it.The component data shall be stored in itself i.e. the REACT way.Develop components for Student, Address and Course. Remember, the Student component must be composed of Address component and array of Course and PhoneNumber components. As explained in earlier tasks, one student may register multiple cours…

Register a Domain, Configure DNS and Deploy the Web Application - Lab Task 15

Image
By now, you have built the REACT web app with backend in Node.js, Express and MongoDB. Its time to make our app available to world. For how to deploy on Heroku, watch video lecture about deployment at Heroku i.e. Lecture 4. If you want to deploy on your own virtual or dedicated server, you shall have basic knowledge of operating linux using command line interface.
No matter you deploy on Heroku or at your own server. We must buy and link the domains with our hosting server. So in this lab task you are supposed to do following: Choose a quality domain name that well present your objective. If its not available, choose another. You can use Godaddy.com to check whether a domain name you want to purchaes is availableBuy the chosen domain from Godaddy.com or some other registrar. For that, you must have a credit card or debit card (not all debit card work for intl' payments, but some do e.g. Meezan Bank)Define DNS server of the domainAdd "A RECORD" to link your domain with host…

Update CRUD Web App. by Connecting with your REST API - Lab Task 10

Image
In Lab Task 8, you developed REST API in Express and connected to MongoDB for storage. You tested its functionality using Postman. Its time to create your own web application using JQuery, JavaScript, Bootstrap, etc. to perform all operations exposed by your REST endpoints. It would help you to practice JavaScript in good enough detail (as you would be managed composie entities and relational stuff). It will help you to talk to any API from your application later in your professional projects e.g. Facebook APIs, Twitter APIs, etc. or custom APIs exposed by ERPs and ecommernce store (WooCommerce, Magento, Shopify etc. all are exposed as REST Services).
You may be thinking about what use cases you shall implement. I recommend you to implement all I described in Lab Task 8. I can understand it would take a lot of time, but its worth it. If you feel yourself very comfortable after doing some work, you may skip very basic use cases e.g. add new course, update course, delete course etc. in &…

Basic MongoDB Queries and Administration - Lab Task 9

Image
You must have decent knowledge of the persistense storage you are using with your application. 
Objective of this task is to make you comfortable with basic queries to run on MongoDB using MongoDB Compass or command prompt based client. These queries include: Apply conditions on single or multiple attributesSelect records or summaries based on groupingSort the fetched records by single or multiple fieldsFetch records based on nested objectsYou should also know basics of MongoDB administration like:  How user authentication workHow to add new users with restricted privilegesHow to take and restore backup of our database or collectionsHow to check storage taken by collectionChecking metrices of live serverYou can add or import some records to run above queries. Feel free to import from any public resource, as data is not important but running queries, in this task.