Ideas for Web Technologies Semester Level Projects

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 it. As these involves a lot of self learning, thinking and expermenting etc.

1. WooCommerce and its REST API

Make a REACT app that shall perform common operations a user can perform using admin side of WooCommerce e.g. all things related to product, categories, and orders managemet. But do it using WooCommerce REST API. It would help you to learn how to use REST API, WooCommerce API, REACT and WooCommerce which are very usefull skills to have. If you learn basics of PHP and WordPress, you can serve lot of clients who need to setup ecommerce store and knowledge of REST API of WooCommerce shall help you to integrate such systems with other softwares. WooCommerce is just an example, you can also do same with Magento and Shopify API.

2. Facebook Chatbot

These days, companies use chatbots to address common queries, communicate and generate sales. Explore what are Facebook Apps and FB Messenger API. Make chatbot, an auto responder app that shall receive/intercept messages a user at FB page. If the message contain certain keywords, the app shall auto respond a specific message from pre configured list of messages. It shall also give options to user, to refine or understand user intent and respond accordingly... called dialog flow. To get an idea, what I am talking about, see following products: https://manychat.com/messenger-marketing-examples, and https://chatfuel.com/... these are very large scale and feature rich products. You need to make something like this, but a smaller versions. Higher the features, the better. You can brainstorm features from above listed products.

3. Live Audi/Video Chat using WebRTC

Few year ago, users were required to install plugins in web browsers for live audio and video communication, these plugins were developed as Java Applets or ActiveX Controls. Both of these technologies are obselete these days (or very rarely used). Now, using WebRTC, we can transfer multimedia content, live from web browser without installing any plugin. For example Google Meet, FB website messenger, etc use WebRTC. You are supposed to create a very basic app using Node, REACT and WebRTC. Two (or more) people shall be able to voice and video chat . You can use any APIs (perferably, free or opensource but commerical are also allowed). Better would be if you use no third API. You can start from basic demo project placed at Google CodeLab i.e. https://codelabs.developers.google.com/codelabs/webrtc-web/index.html and following the tutorial at https://www.tutorialspoint.com/webrtc/index.htm

4. Shopping Cart on Serverless 

Serverless is way/technology to implement backend to scale better and fast. Your task is to explore what it is and implement your basic project (a shopping cart for example) using REACT and Serverless. Explore what module you need to integrate with Node projects.

5. Shopping Cart on Google Firebase - using Firestore and Cloud Storage

Google's Cloud Firestore is a flexible, scalable database for mobile, web, and server development from Firebase and Google Cloud Platform. Firebase Clound Storage can store files of your ecommernce store e.g. products images, JS and HTML files. You are sopposed to create an ecommerce store using Firestore and Cloud Storage. It shall include very basic features e.g. products (with images and basic attributes e.g. name, model, price, description), product categories, shopping cart, orders etc. If you could also use Firebase Hosting and authentication, that would be awesome but not required. Applications that are designed using such archecture do not require you to setup server by your own and scale it when traffic increase. You buy serivces from third parties and scale accordingly i.e. as per you need. Using Firestore looks hard, but actually its very easy. I have used it in a proof of concept level project. Actually, its fun and tension free way to make apps in modern days. When you know your servers are Google servers, you can sleep with peace without worrying you site may go down at 3:00 AM :) Visit https://firebase.google.com/products for details.

6. Chrome Extension

Google Chrome Extension development is an area that require primarily HTTP and JavaScript knowledge/skills (definitely HTML/CSS is implicit when we talk about web and JS). Very few developers explore this area because of limited or absolutely no knowledge of opportunities available in this area. There are many projects in freelance websites in which you need to modify or develop browser extensions. Chrome has almost 70% browser market share that means, if you excel only Chrome Extension development you can serve lot of clients. Whats the project? Develop a Chrome exention that shall remove Google Ads sections from web page. That shall highlight certain keywords in currently opened web page. That shall monitor the web pages I visit and submit them to my Firebase FireStore database (or may be categorise them). That shall auto identify the products whose price has dropped, showing percent drop from last week price, displaying perccentage drop adjacent to product price, in a WooCommerce store. That shall save the FB profile URL that contain certian keywords in profile description or bio, so that I could target them for marketing etc. These features are just examples, ideas is to develop the skill to intercept page contents, modify them, do some processing, extracting required data from page and submitting the data to APIs. Hope you got the idea.