College Website Using MERN Stack

Abstract

College Website is that the Growing significance of internet sites for various organizations is well known. Today, a well-planned digital strategy plays a significant role in an institution’s marketing strategies — especially considering younger generations’ growing dependence on technology. Put simply, a well-designed website will facilitate you’re engaging, current students, connect with prospective ones, and inform parents all without delay. It encompasses promoting school events, displaying course offerings, and showcasing campus life, etc. during this paper, we discuss the models submitted by our team, login, Admin panel, Instructor, Fees payment, and About us page. For these modules, we’ve used technical stacks React.js, Bootstrap (Front-end), Node.js, Express.js, and MongoDB for Database.

Introduction

I. INTRODUCTION

The College Website is developed to disallow the issues that are common in the institution's manual system. This software is carried out to get rid of and in some instances decrease the affliction faced by this current system. Moreover, this system is designed for the particular need of the company to carry out operations in a smooth and effective manner.

HTML, CSS, and Javascript are the foundation of Web development but are not long-lasting sufficient to carry out all the modern challenges. So we will be using MERN Stack to develop the website. MERN Stack: MERN Stack is a Javascript software Stack that is used for better and easier, faster deployment of full-stack web applications. MERN Stack comprises four key technologies namely: MongoDB, Express, React, and Node. js. It is designed to make the development process Effortless and trouble-free. it is cost-effective, UI rendering and performance are much more efficient than basic stacks, open-source, and Easy to switch between client and server.

This page accommodates information about Management, Campus, Facilities, Departments, Admission, fees payment, etc. The student login module helps the student to log in to the site and easily download documents. For that student must type the username and password correctly. Users can through our site and access the services offered by the Admin. Through the student panel student can access the fees payment model, online attendance, etc.

II. OBJECTIVE OF PROJECT

The key function of the project is to adapt the previous technical stacks (Html, CSS) into the modern technical stacks (MERN). All the elements of the MERN stack are open source, and thus you can bring them into use to create powerfully built web apps. Free templates are available online, which will save you tons of time. It would have taken at least three times as long to customize a theme compared to downloading a template solution.

This stack is completely dependent upon open-source technology so that the developer’s team can utilize it freely, which means you don’t have to make each component from the beginning. The underlying technology gets so well documented that you can deploy it with ease.

Most intrinsic is that MERN is a full-stack development technique that means you’re liable for constructing an application’s frontend and backend components. This technique extracts principles from both UI design and software engineering.

The objective of our project is to design, publish and maintain a website for our college which consists of all the information regarding the college like infrastructure, faculty, transport facilities, etc.

Our project is completely web-oriented application software that enables us to access the absolute extraction about the college, staff, students, facilities, etc. this website shows a virtual view of the Campus. On this website, we will find the latest data about the students and staff.

This generic application is designed for assisting the students of an institute regarding the information on the courses, subjects, classes, assignments, grades, and timetable. It also provides support that a faculty can also check about his daily schedule, can upload assignments, and notices to the students. Here the executive admin will be controls the accounts of the student and faculties, makes the timetable, and upload the latest information about the campus events at the site.

III. PROBLEM STATEMENTS

Our college has already a website but it needs to include more features in our website are the student login which will give easy access to students of college events, notice, and fees payment section. Also, the admin panel controls the website. Instruction module and about us page etc. The main drawback is storage and UI, and it was developed using Html and CSS which has drawbacks like time-consuming to keep up on the color scheme of web pages and build lists, tables, and forms. Also, security features are poor in HTML.

If we’d in particular write down brief code for developing a webpage then it generates some difficulty. And most important in today’s the role of a web design (UI) in the educational website makes attractive and interesting visuals for students, parents, and engaged visitors. In the digital world, Many students judged the credibility of the website based on its typography, color scheme, layout, font size, and overall design. Web design played a vital role in increasing sign-up numbers.

So to overcome these drawbacks we’re using the MERN stack technology for our website. So the chances of drawbacks of the previous website are reduced and we give the host access to the college administrator, so they can upload the improvements and make alterations easily.

IV. SYSTEM ARCHITECTURE

In this system, there are seven modules Home page, Administrator module, Student module, Instructor (staff) module, Office module, Alumni module, and Guest module.

Administrator module: This module has unique authority. Which maintains the entire management. Admin is the host of the system which will update and remove the data or renovate whenever necessary.

Student module: The student module is designed which have a login through which they can access the services of the site. Which are attendance, study material, admission, and fees payment modules.

1. Attendance Module: This module is accessible to students and the teaching staff as shown in the figure above. Daily attendance of the students will be recorded by the respective faculty members. The system will keep a check on the student’s daily attendance and will notify the parents through email and message if their wards attendance is below 75%. Formula to calculate attendance: (No.of days attended/total no. Of working days) x 100% Eq. (1)

2. Fees Payment Module: The Fees payment module is only accessible to the office section as shown in fig.1. This module intends to collect the fees from the students in a strategic manner, that is, the academic fees of the students will be divided into a fixed number of installments. At the end of each installment period, an email and a text message will be sent to the students as well as their parents to remind them about the payment of the installment amount to the college. In this way, it is ensured that the amount of the fees is collected in an efficient manner without burdening the students as well as the office staff.

3. Study Material: this module provides study materials like notes, books, and references shared by instructors.  Instructor Module: this module is for staff. In this staff details and student attendance and study materials staffs and students also a notice section where all the details about the examination, submission and assignments will be posted through instructors.

a. Office Module: office module is only accessible to the office section which will store all the admission details and fees details about students as shown in fig.1.

b. Alumni Module: This section consists of the pass-out student’s data and is accessible to the alumni members using a unique username and password. The data of the students who secure placement will also be displayed in this section. Apart from that, this section is open for the guest visitors in order to check the placement status of the college

c. Guest Module: Through the guest, module the user can only take a virtual view of the website. Guest can access the home page, About us, campus life, academics, admissions, and curriculum activities.

d. Login and Registration: The login section requires identification and authorization it provides access to an entire site or part of a website based on the user. And registration module takes data from new entries on the basis of their user role selection from students, alumni, and the staff it gives login authority.

V. SOFTWARE AND HARDWARE REQUIREMENTS

1. Operating System: Windows 7 and above
2. Language: Html, CSS, Javascript
3. Technology Stack: MongoDB, ExpressJs, ReactJs, NodeJs
4. Browser: Any browser and IE 8 and above.
5. Database Language: Mongodb
6. Processor: A single-core 2GHz processor
7. RAM: 512 Mb and above

VI. ACKNOWLEDGEMENT

We are extremely thankful to our guide Dr. Ritesh Patil for guidance and review of this paperwork.

Conclusion

The Project of “College Website using MERN” has developed dynamically. This project will be very helpful for students as well as staff in college to interact with the college. Any person can visit this website to obtain details about the college. This system is easy and convenient to use.

References

[1] Mr. Rohan Padwal, Mr. Pramod Tule, Mr. Dhiraj Chavan, Mr. Balaji Panchal, Mr. Rohan Lone, Mr. Mangesh Sanap, College Website Development January 2019 | IJIRT | Volume 5 Issue 8 | ISSN: 2349-6002 [2] Bharat Kalwani, Ambesh Sharma, Nitin Jain, Sohan Lal Gupta, College Query Management System by using MERN Stack, International Journal of Global Research in Science & Technology ISSN: 2455-3832, Volume No.-6, Issue No-1, Jan-Dec 2020 http://ijgrst.com/index.php/journal/index [3] YongKang Xing, JiaPeng Huang, YongYao Lai, Research and Analysis of the Front-end Frameworks and Libraries in E-Business Development, Conference Paper · February 2019 DOI: 10.1145/3313991.3314021 ResearchGate [4] Shubham Patil, Saurav Daware, Ameya Bhagat, Prof. Jayant Sawarkar, College ERP Using MERN Stack, International Journal of Scientific Research in Computer Science, Engineering and Information Technology ISSN: 2456-3307 (www.ijsrcseit.com) [5] Sanchit Aggarwal, Jyoti Verma, Comparative analysis of MEAN stack and MERN stack, Sanchit Aggarwal et al. International Journal of Recent Research Aspects ISSN: 2349-7688, Vol. 5, Issue 1, March 2018, pp. 127-132 [6] Sourabh Mahadev Malewade, Archana Ekbote, Performance Optimization using MERN stack on Web Application, International Journal of Engineering Research & Technology (IJERT) http://www.ijert.org ISSN: 2278-0181 IJERTV10IS060239 (This work is licensed under a Creative Commons Attribution 4.0 International License.) Published by: www.ijert.org Vol. 10 Issue 06, June-2021 [7] Suman Chatterjee, Manish Kumar Thakur, Smart Collage Management System International Journal of Engineering Research & Technology (IJERT) ISSN: 2278-0181 Published by, www.ijert.org NCRAEM - 2019 Conference Proceedings [8] Wang Bin, Gao Bingyun, Liu Peishun, Li Xiaoqing, A Study on Tactics for College Website at Search Engine Optimization, 2018 IEEE 3rd International Conference on Big Data Analysis [9] Ashwini Dalvi, Riya Saraf, Inspecting Engineering College Websites for Effective Search Engine Optimization, 2019 International Conference on Nascent Technologies in Engineering (ICNTE 2019) [10] Hema Krishnan, Research Scholar, CUSAT, MongoDB – a comparison with NoSQL databases, International Journal of Scientific & Engineering Research, Volume 7, Issue 5, May-2016 ISSN 2229-5518

Copyright

Copyright © 2022 Dr. Ritesh Patil, Vaishali Gentyal, Vaishnavi Mudaliar, Gauri Kanpurne, Devyani Ambi. This is an open access article distributed under the Creative Commons Attribution License, which permits unrestricted use, distribution, and reproduction in any medium, provided the original work is properly cited.