10 IV April 2022

https://doi.org/10.22214/ijraset.2022.41450
 International Journal for Research in Applied Science & Engineering Technology (IJRASET)
ISSN: 2321-9653; IC Value: 45.98; SJ Impact Factor: 7.538
Volume 10 Issue IV Apr 2022- Available at www.ijraset.com

College Website Using MERN Stack

Dr. Ritesh Patil1, Vaishali Gentyal3, Vaishnavi Mudaliar4, Gauri Kanpurne5, Devyani Ambi6
1, 2, 3, 4, 5, 6
Pune District Educations Association’s College of Engineering Manjari (BK), Pune 412307 (Maharastra) India

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.
Keywords: Full-Stack Development, College Website, Web Design, Web Development, Reactjs, Nodejs, Express, MongoDB.

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.

©IJRASET: All Rights are Reserved | SJ Impact Factor 7.538 | ISRA Journal Impact Factor 7.894 | 1096
 International Journal for Research in Applied Science & Engineering Technology (IJRASET)
ISSN: 2321-9653; IC Value: 45.98; SJ Impact Factor: 7.538
Volume 10 Issue IV Apr 2022- Available at www.ijraset.com

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)

Figure 1: Architectural View

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.

©IJRASET: All Rights are Reserved | SJ Impact Factor 7.538 | ISRA Journal Impact Factor 7.894 | 1097
 International Journal for Research in Applied Science & Engineering Technology (IJRASET)
ISSN: 2321-9653; IC Value: 45.98; SJ Impact Factor: 7.538
Volume 10 Issue IV Apr 2022- Available at www.ijraset.com

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. 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.

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

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

©IJRASET: All Rights are Reserved | SJ Impact Factor 7.538 | ISRA Journal Impact Factor 7.894 | 1098