Hands-on MERN Workshop Conducted under AISE & IIC

On May 16, 2025, under the Association of Information Science and Engineering (AISE), in collaboration with the Institution Innovation Council (IIC), a hands-on technical session titled 'INNOStack: Building Backend & Frontend Innovation with MERN' was conducted for the students of the Department of Information Science and Engineering (ISE) and Department of Computer Science and Design (CSD). The session was led by Keerthan, a 6th semester student of ISE, who effectively guided participants through essential full-stack development concepts and practices. The session focused on integrating the backend and frontend using Node.js, MongoDB, Express, and React. Participants began by installing the MongoDB driver for Node.js and creating a script to connect to a shop database. Keerthan demonstrated how to implement basic CRUD operations—insert, find, update, and delete—using the Node.js MongoDB driver. The session also introduced Mongoose, through which students learned to define a product schema and insert data into the products collection. The backend component was developed using Express, with a /products API endpoint created to fetch all products. On the frontend, students used React to call this endpoint using fetch() and display the list of products dynamically. Additionally, a POST /products endpoint was created to allow insertion of new products from the frontend. After adding a product, the updated product list was fetched and rendered in real time, demonstrating dynamic state management in React. The event was supported by Prof. Sudarshan K., Head of the Department (HOD), ISE&CSD. The success of this event was made possible by the support and guidance of Prof. Sowmya, Staff Advisor of AISE, and Prof. Aparna N, who played a crucial role in organizing and coordinating the session, ensuring its smooth execution and active student participation. The session witnessed enthusiastic participation from students who gained practical insights into full-stack web development, API integration, and database operations. This hands-on experience not only enhanced students' understanding of backend and frontend connectivity but also encouraged them to explore real-world application development using modern web technologies. Future sessions could further delve into deployment, authentication, or advanced state management in React for a comprehensive full-stack learning journey.