https://github.com/ashhad1200/ems
Event Management System (EMS) – A Full-Stack MERN Application
https://github.com/ashhad1200/ems
coreui nodejs react react-router reactqueryv5
Last synced: 4 days ago
JSON representation
Event Management System (EMS) – A Full-Stack MERN Application
- Host: GitHub
- URL: https://github.com/ashhad1200/ems
- Owner: Ashhad1200
- Created: 2025-02-13T07:38:20.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-13T11:50:32.000Z (about 1 year ago)
- Last Synced: 2025-07-27T03:45:04.597Z (7 months ago)
- Topics: coreui, nodejs, react, react-router, reactqueryv5
- Language: JavaScript
- Homepage:
- Size: 897 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# MERN Project
## Overview
This repository showcases a full-stack web application built with the **MERN** stack, which includes:
- **MongoDB**: For database management.
- **Express.js**: As the server-side framework.
- **React.js**: For building a responsive and dynamic front-end.
- **Node.js**: For backend runtime.
Additionally, it leverages **React Query** to manage server state efficiently and improve data fetching and caching.
## Features
- User authentication and authorization.
- CRUD operations.
- Efficient server-state management using React Query.
- Responsive design with React.
- RESTful APIs for seamless client-server communication.
- Scalable and maintainable project structure.
## Prerequisites
- **Node.js** and **npm** installed.
- MongoDB installed locally or an active MongoDB Atlas cluster.
## Getting Started
1. Clone the repository:
```bash
git clone https://github.com/Ashhad1200/MERN.git
cd MERN
```
2. Install dependencies for both backend and frontend:
```bash
cd backend
npm install
cd ../frontend
npm install
```
3. Configure environment variables:
- Create a `.env` file in the `backend` folder.
- Add the following variables:
```
MONGO_URI=
JWT_SECRET=
PORT=
```
4. Run the application:
- Start the backend server:
```bash
cd backend
npm run start
```
- Start the frontend development server:
```bash
cd frontend
npm run dev
```
5. Access the application:
Open [http://localhost:3000](http://localhost:3000) in your browser.
## Folder Structure
- **backend/**: Contains the server-side code with routes, models, and controllers.
- **frontend/**: Contains React components, hooks, React Query integration, and styling for the client-side.
## Technologies Used
- **Frontend**: React, React Query, Axios
- **Backend**: Node.js, Express
- **Database**: MongoDB
- **Authentication**: JSON Web Tokens (JWT)
- **Styling**: [Mention your styling tools if used, e.g., Bootstrap, TailwindCSS]
## Using React Query
The project integrates **React Query** for:
- Data fetching with automatic caching.
- Server state synchronization.
- Smooth UI updates with background refetching.
Key hooks used:
- `useQuery` for fetching data.
- `useMutation` for submitting data changes.
### Example (Frontend Code Snippet)
```jsx
import { useQuery } from 'react-query';
import axios from 'axios';
const fetchData = async () => {
const { data } = await axios.get('/api/resource');
return data;
};
const MyComponent = () => {
const { data, isLoading, error } = useQuery('resourceKey', fetchData);
if (isLoading) return
Loading...
;
if (error) return Error fetching data
;
return
{JSON.stringify(data)};
};
```
## Contributing
Contributions are welcome! To contribute:
1. Fork this repository.
2. Create a feature branch: `git checkout -b feature-name`.
3. Commit your changes: `git commit -m 'Add feature-name'`.
4. Push to the branch: `git push origin feature-name`.
5. Open a pull request.
## License
This project is licensed under the [MIT License](LICENSE).