Dream Events

1. Customizing the Color Scheme

The color scheme of the Dream Events template can be adjusted to match your event planning business's branding. Here's how to modify it in a React project:

• Open the stylesheets/styles.scss file.
• Search for the CSS variables like --primary-color, --secondary-color, and others in the SCSS file.
• Update these variables with your desired color values. For example, change:

:root { --primary-color: #3498db; }

• Once updated, the changes will be reflected on the frontend immediately after saving the file.

2. Connecting to MongoDB Using Compass

To connect to MongoDB and manage your database using MongoDB Compass, follow these steps:

• Install MongoDB Compass from the official MongoDB website: MongoDB Compass Download.
• Once installed, open MongoDB Compass and click on the New Connection button.
• Enter your MongoDB connection string. This can be obtained from your MongoDB Atlas account or your local MongoDB setup.
• Click on the Connect button to establish a connection with your MongoDB instance.
• In the "Database" section of MongoDB Compass, you will see all your collections and documents. You can now manage your data easily using the Compass interface.
• For more detailed steps, refer to the MongoDB Compass Documentation.

3. Integrating Stripe for Payments

To integrate Stripe for payments in your Dream Events dashboard, follow these steps:

• Create a Stripe account by visiting Stripe's official website.
• Once your account is set up, you can obtain your API keys (publishable key and secret key) from the Stripe Dashboard under the API section.
• In your Dream Events React project, install the Stripe package and Stripe React libraries using npm:

npm install @stripe/stripe-js @stripe/react-stripe-js

• In the backend (assuming you're using Express.js), create an API route to handle payment processing:

    import Stripe from 'stripe';
    const stripe = new Stripe('your-secret-key'); // Use your Stripe Secret Key here
    
    app.post('/api/payment', async (req, res) => {
      try {
        const paymentIntent = await stripe.paymentIntents.create({
          amount: 5000, // Amount in cents
          currency: 'usd',
          payment_method: req.body.paymentMethodId,
          confirmation_method: 'manual',
          confirm: true,
        });
    
        res.status(200).json({ clientSecret: paymentIntent.client_secret });
      } catch (err) {
        res.status(500).json({ error: err.message });
      }
    });
        

• On the frontend, use the Stripe React libraries to handle the payment process. Create a PaymentComponent.js and integrate Stripe as follows:

    import { useEffect, useState } from 'react';
    import { loadStripe } from '@stripe/stripe-js';
    import { Elements, CardElement, useStripe, useElements } from '@stripe/react-stripe-js';
    
    const stripePromise = loadStripe('your-publishable-key');
    
    const PaymentComponent = () => {
      const [clientSecret, setClientSecret] = useState(null);
      const stripe = useStripe();
      const elements = useElements();
    
      useEffect(() => {
        // Create a PaymentIntent when the component mounts
        fetch('/api/payment', { method: 'POST' })
          .then((res) => res.json())
          .then((data) => setClientSecret(data.clientSecret));
      }, []);
    
      const handlePayment = async () => {
        const cardElement = elements.getElement(CardElement);
    
        const { error, paymentIntent } = await stripe.confirmCardPayment(clientSecret, {
          payment_method: {
            card: cardElement,
          },
        });
    
        if (error) {
          console.error(error.message);
        } else {
          console.log('Payment successful!', paymentIntent);
        }
      };
    
      return (
        

          
          Pay Now
        
      );
    };
    
    const StripeWrapper = () => (
      
        
      
    );
    
    export default StripeWrapper;
        

• For more details on integrating Stripe with your app, refer to the Stripe Documentation.

4. Customizing the Fonts and Typography Using Google Fonts

To change the fonts across your Dream Events dashboard using Google Fonts, follow these steps:

• Go to the Google Fonts website and search for the font you want to use. For example, search for "Lato" or any other font that fits your theme.
• Once you've selected your font, you will see a section to get the link. Choose the font weights and styles you want, and copy the link provided. For example, to use "Lato", you would get this link:

<link href="https://fonts.googleapis.com/css2?family=lato:wght@400;500;700&display=swap" rel="stylesheet">

• Now, open your React project and go to the public/index.html file. Paste the Google Fonts link you copied earlier inside the <head> tag:
• Next, go to your src/index.css or src/App.css file and set the font-family for the body to the new font:

body { font-family: 'lato', inter; }

• Once you save these changes, your Dream Events dashboard will now use the new Google Font across all pages.
• For more information and to explore more fonts, refer to the Google Fonts documentation.

5. Editing the Dashboard Homepage Layout in main.js

To customize the homepage layout and structure, you'll need to edit the main.js file inside the src/layout/ folder. Follow these steps:

• Open the src/layout/main.js file in your project directory.
• Inside this file, you will find the structure for the container, header, sidebar, and the content sections of the homepage.
• Make changes as required, such as rearranging components or modifying the layout.
• Once you’ve made the changes, save the file. The new layout will be reflected on the homepage.

6. Integrating LocationIQ for Geolocation

To integrate LocationIQ for geolocation services in your project, follow these steps:

• Go to LocationIQ and create an account.
• Once logged in, go to your dashboard and get your API Key for accessing LocationIQ services.
• In your React project, install the axios package to make API requests:

npm install axios

• Next, create a geolocation function in your app. For example, create a new file in the utils folder called getLocation.js:

    import axios from 'axios';
    
    const getLocation = async (address) => {
      const res = await axios.get(`https://us1.locationiq.com/v1/search.php?key=your-api-key&q=${address}&format=json`);
      return res.data;
    };
    
    export default getLocation;
        

• To use this function, import and call it from your components where you need geolocation functionality:

    import getLocation from '../utils/getLocation';
    
    const LocationComponent = () => {
      const [location, setLocation] = useState(null);
    
      useEffect(() => {
        const fetchLocation = async () => {
          const loc = await getLocation('New York');
          setLocation(loc);
        };
    
        fetchLocation();
      }, []);
    
      return 
{location ? 
{JSON.stringify(location, null, 2)}
 : 'Loading location data...'}
;
    };
        

• For more details on using LocationIQ, refer to the LocationIQ API Documentation.