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 with 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.
Technologies Used
I have used React Js, Node Js, and Mongo DB, for the development of the project.
React is the frontend library for javascript. We have used it to create the 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 Atlas
Features of Project
Sign and log in with Mongo DB.
Create Event, Edit Event, delete an 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.
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 toasty which enables us to give nice and simple alerts to the user. And finally, anxious 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.
Here the some pics of projects.
0 Comments