University Event management Using React - Node JS - Mongo DB

-

 University Event Management Using React, Nodejs & MongoDB


The project is made using React as the Frontend library, Nodejs as a server-side language, and MongoDB as the database.
The react application is Divided into components In the Hierarchy where the root or the main component is the App.js and the branches start under it.

The Hierarchy of the React application is given in the Bellow Figure.



In react, the Web Page or the Application is divided into components and these components are nested inside one another to form a single page.

In react we write the code in the .js file but it renders HTML content onto the Browser, this is done with the JSX also known as "JavaScript XML", the JSX is similar to HTML with a slight difference in the syntax such as the class in HTML is className in JSX as the class is a reserved word in the JS.

unlike HTML where we use the anchor tag to jump on the other page, we still can use the anchor tag to jump on other pages but there is another way we can handle routing in React, The Routing is done By the react-router-dom which has the BrowserRouter, with this we can perform Routing in react.

the difference between the anchor tag and the BrowserRouter is that an anchor tag when the link is clicked the request is made to the server and the server, in turn, responds to the request, but in the BrowserRouter the React bypasses the request that the browser makes to the server and it handles that himself, and hence we won't see the refresh when you click on the link.

Introduction

The project is made in ReactJS as frontend for UI, NodeJS as the backend for server side handling and MongoDB as the database and Cloudinary for storing images on cloud. With this project we are able to create, edit, delete events, make the PDF on based of the details used during creating event. A dashboard which can be used to get the quick look at the events happened in the past.

Literatur Survey

    A. In any university on an average 2 – 3 events are conducted every week. The management of the record of these events is a big pain on the conductors of the events and the organizers of the events. [1]

    B. React is remarkably flexible. Once you have learned it, you can use it on a vast variety of platforms to build quality user interfaces. React is a library, NOT a framework. Its library approach has allowed React to evolve into such a remarkable tool. [2]

React is one of the most popular frontend library. It is used to create user interface or client side library for java script. Node.js is an opensource server environment. Also known as the server side language. And the Mongodb as the database as it is on of the most famous database used with react and nodejs.

    C. The web application is used to create, update, edit, delete the events. The application is also capable of creating PDF of the pre event and post event. First user needs to login inorder to do any operation the login is done with mongodb as well as google login.

In the project a lots od npm packages are used axios, chartjs, file-saver, react-google-login, react-toastify, nodemon, bcryptjs, html-pdf, jsonwebtoken, mongoose, react-router-dom. And few more all these packages were used for the different functionalities of the application.

Frequently used Keyword

  1. Component: a component is the basic element of any react application 
  2. useState Hook: useState lets you use local state within a function component. You pass the initial state to this function and it returns a variable with the current state value (not necessarily the initial state) and another function to update this value. It is used to make the application dynamic
  3. useEffect Hook: useEffect let us do something when the component is mounted or the component is rendered on the browser.
  4. JSX(Java script XML):  React uses JSX for templating instead of regular JavaScript. It is not necessary to use it, the bellow are some of the feature of JSX.
    • It is faster because it performs optimization while compiling code to JavaScript.
    • It is also type-safe and most of the errors can be caught during compilation.
    • It makes it easier and faster to write templates, if you are familiar with HTML.

Technologies Used

I have used React Js, Node Js, Mongo DB, for the development of the project.
React is the frontend library for the java script. We have used to create User interface.

Node Js is a server side language and it is used to create server side code for the application and to serve the frontend.

MongoDB is the database we have used to store the data of the event into it. here we have used the cloud service of the mongodb the Mongodb Atlas

We have also used cloudinary cloud for the multimedia storage on the cloud.

Features of Project

  • Sign and login with google and mongo DB.
  • Create Event, Edit Event, delete event, create PDF.
  • Capable to generate PDF of the pre event while pre event was created and the final PDF with pre event and post event.
  • A dashboard which gives the quick look at the events created, with the analysis with the charts which gives the details of the events created up till now.
  • The charts can be manipulated with by changing the range of the years.

Project Details

A. Project Content

The project includes a responsive web application in which the user will be able to create, edit, update, delete event. Capable of generating PDF and can get the quick overview on the events created up till now, and wit the charts can get the analysis of all the events created.

B. Project Structure

The react application is Divided into components In the Hierarchy where the root or the main component is the App.js and the branches start under it.

In our application the root component is App.js and every component is react starts from capital letter. In the App.js the Navbar.js component is rendered and it will always render no matter what we do.

Now if we want to go to another page, as we use in HTML with anchor tag to perform routing, now the thing happens in that case is that every time we click on any link our Browser makes a fresh new request and in turn the server send the necessary files to the browser and that file is rendered in our browser.

In case of React we can surely use the anchor tag but it is not considered the best practice as it makes our applications slow. So the react have a alternate method called Browser Router of the react-router-dom package.

In this the Routing is handled by the react so when the Browser Router is used and our page loads only once as the browser send the package that include every file that we used to create the web application. now when we click on the link the request is still made to the server but the react intercept that request and it render the necessary Component on the browser. The difference we observer in both of the way is that the browser router is more quick.

In this Project I have used JSX also knows as Java script XML to design the User Interface. The JSX is quit similar to HTML with a few changes in the syntax like, in HTML the class we use to give styling is replaced with className in react as the class is an reserved word in Java script. Same with for as the for is also a reserved word in JS so in place of for we use htmlFor. And so on but the actual syntax is almost similar to HTML. For the styling we have used the CSS to give styles to the UI. For the charts we have used the npm package called chartjs which allows us to generate very beautiful and interactice yet simple and responsive charts so it cab provide the best user experience.

For signin/Login we have used another npm package called react-google-login to login with react this package just provide the interactivity that we see when we use google login in any other website, also we have used the form submission as well to sign in and aal the data is being saved to the mongodb atlas database.
For notification and alerts we have used yet another package called sweet-alert2 and toastify which enables us to give nice and simple alerts to the user. And finally asxios which is used to make the GET and POST request to the server.

On the server side we have used a few packages to extend the functionality and make the work of the developer simple. 
The one and the main package that we used is the express it is the backend web application framework which Allows to set up middlewares to respond to HTTP Requests. And create server side logic.

The second main package we used is mongoose, Mongoose is an Object Data Modeling (ODM) library for MongoDB and Node. js. It manages relationships between data, provides schema validation, and is used to translate between objects in code and the representation of those objects in MongoDB.[4]

Html-pdf package that enable us to create PDF out of html structure as that functionality we need in our application in order to generate the pdf and send it to the user.

C. Screen Shots






Conclusion

I think i was able to solve the problem of the university event management of the records of the events that are happend in the universities. i noticed that the react was the better option than the HTML as the web application made in react was more responsive and fast as compared to HTML. here in this project we have used JSX it is fine and good as the syntax is similar to HTML so it is easy to work with also there is one other alternate which is more efficient to code called styled Component.


Live Demo


Reference

[1] Gackenheimer, Cory. "What is react?." Introduction to React. Apress, Berkeley, CA, 2015. 1-20.



Comments

Post a Comment

Popular posts from this blog

Sign Language Detection Using open-cv and Haar cascade

-
Image
  Sign Language Detection Using open-cv python Haar Cascade classifiers are an effective way for object detection. This method was proposed by Paul Viola and Michael Jones in their paper Rapid Object Detection using a Boosted Cascade of Simple Features . The algorithm implemented in OpenCV can also be used to detect other things, as long as you have the right classifiers. My OpenCV distribution came with classifiers for eyes, upper body, hands, frontal face and profile face. Haar Cascade is a machine learning-based approach where a lot of positive and negative images are used to train the classifier. Frequently used keywords haar Positive Images:  These images contain the images which we want our classifier to identify. Negative Images:  Images of everything else, which do not contain the object we want to detect. Features  Initially, the algorithm needs a lot of positive images (images of hand) and negative images (images without hand) to train the classifier. Then we need to extract
Read more

Internship - II (IT446)

-
Internship - II (IT446) Full Stack Intern This internship started from 14th April to 15th July. it was a three months internship at Dev Squirrel private limited. My Role Position Title:  Full Stack Developer Intern Start  Date: April 14, 2022 End Date:  July 14, 2022 Stipend:  Performance based (Range of Rs. 1k 4k / month worked o n project) M y Responsibilities Maintaining & updating websites based on React /  NextJS Developing & maintaining APIs Writing clear, maintainable and testable code Tools and Technologies ReactJS / NextJS NodeJS AWS DynamoDB Lambda Supabase Redis Work done during Internship 1st month Initially for the 1st week some basic training was provided which include understanding the project and updating some minor modification to the code. Understanding the Frontend part which was in NextJS and Optimizing the site by removing the unused components and css. 2nd month Updating certificate page in NextJS Adding Domain Whitelabelling feature Added SMTP settings A
Read more