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:

   git clone https://github.com/Ashhad1200/MERN.git
   cd MERN

2. Install dependencies for both backend and frontend:

   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=<your-mongodb-uri>
     JWT_SECRET=<your-jwt-secret>
     PORT=<desired-port>
     

4. Run the application:

   • Start the backend server:

     cd backend
     npm run start

   • Start the frontend development server:

     cd frontend
     npm run dev

5. Access the application: Open 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)

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 <p>Loading...</p>;
  if (error) return <p>Error fetching data</p>;

  return <div>{JSON.stringify(data)}</div>;
};

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.