Integrate the deployed database

[aakshitaa]

The database is currently deployed on- https://osoc-lost-and-found.cyclic.app/ Integrate this with the project. Refer to this for reference-

To integrate a MongoDB backend, deployed on Cyclic, with a React.js project, you can follow these general steps:

1. Set up your MongoDB database on Cyclic:

   • Create a database on Cyclic and note down the connection details, such as the connection URL, username, password, and database name.

2. Create a React.js project:

   • Set up a new React.js project using Create React App or any other preferred method.

3. Install the required dependencies:

   • Open a terminal in your React.js project directory and install the necessary packages by running the following command:

     npm install mongoose axios

   • The mongoose package allows you to interact with MongoDB, and axios is used for making HTTP requests to your backend.

4. Create a MongoDB connection file:

   • Create a new file, such as db.js, in your React.js project's source folder.
   • Inside db.js, import the mongoose package and establish a connection to your MongoDB database using the connection details from Cyclic.

   • Here's an example of how your db.js file might look:

     import mongoose from 'mongoose';
     
     const DB_URL = 'mongodb://username:password@host:port/database_name';
     
     mongoose.connect(DB_URL, {
     useNewUrlParser: true,
     useUnifiedTopology: true,
     });
     
     const db = mongoose.connection;
     db.on('error', console.error.bind(console, 'MongoDB connection error:'));

5. Set up API endpoints:

   • Create a new file, such as api.js, in your React.js project's source folder.
   • Inside api.js, import the axios package and define functions that make API requests to your backend.

   • Here's an example of how your api.js file might look:

     import axios from 'axios';
     
     const BASE_URL = 'http://backend-url'; // Replace with your actual backend URL
     
     export const getUsers = async () => {
     try {
      const response = await axios.get(`${BASE_URL}/users`);
      return response.data;
     } catch (error) {
      console.error('Error getting users:', error);
      throw error;
     }
     };
     
     // Add more API functions as needed

6. Use the API functions in your React components:

   • Import the API functions from api.js into your React components where you need to fetch or send data to the backend.
   • Call the API functions as needed, and use the retrieved data to update your React component's state or perform other operations.

That's a basic overview of how you can integrate a MongoDB backend, deployed on Cyclic, with a React.js project. Remember to replace the placeholder values with your actual connection details and backend URL.

[ThapaVinay]

i want to work on this

[aakshitaa]

Sure @ThapaVinay

[aakshitaa]

This issue was completed by @ThapaVinay