EV Hub Charging Station Booking React Admin UI Dashboard Web App Template

Here is the complete settings example for EV Hub Charging Station Booking React Admin UI Dashboard Web App Template:

Environment Settings

You can configure your environment settings in the env.js file.

export default {
  API_URL: 'https://your-api-url.com/api',
  API_TOKEN: 'your-api-token',
  CHARGING_STATION_URL: 'https://your-charging-station-url.com/charging-stations',
};

Authentication Settings

You can configure your authentication settings in the auth.js file.

export default {
  AUTH0_DOMAIN: 'your-auth0-domain.com',
  AUTH0_CLIENT_ID: 'your-auth0-client-id',
  AUTH0_CLIENT_SECRET: 'your-auth0-client-secret',
  REDIRECT_URI: 'your-redirect-uri',
  AUTH0_SCOPE: 'openid profile email',
};

Charging Station Settings

You can configure your charging station settings in the chargingStations.js file.

export default [
  {
    id: 1,
    name: 'Charging Station 1',
    url: 'https://your-charging-station-1.com',
    email: 'charging-station-1@example.com',
    password: 'charging-station-1-password',
  },
  {
    id: 2,
    name: 'Charging Station 2',
    url: 'https://your-charging-station-2.com',
    email: 'charging-station-2@example.com',
    password: 'charging-station-2-password',
  },
];

Booking Settings

You can configure your booking settings in the bookings.js file.

export default {
  BookableTypes: ['spot', 'charger'],
  BookingDuration: 3600, // 1 hour
  BookingNotification: true,
  BookingConfirmation: true,
  BookingCancelation: true,
};

Email Settings

You can configure your email settings in the email.js file.

export default {
  from: 'ev-hub@example.com',
  senderName: 'EV Hub',
  username: 'ev-hub',
  password: 'ev-hub-password',
  host: 'mail.example.com',
  port: 587,
};

Google Maps Settings

You can configure your Google Maps settings in the googleMaps.js file.

export default {
  API_KEY: 'your-google-maps-api-key',
  DEFAULT_ZOOM_LEVEL: 12,
};

Stripe Settings

You can configure your Stripe settings in the stripe.js file.

export default {
  PUBLISHABLE_KEY: 'your-stripe-publishable-key',
  SECRET_KEY: 'your-stripe-secret-key',
};

Note that you should replace the your-api-url.com placeholders with your actual API URL, and similarly for the other settings.

Here are the features of the EV Hub Charging Station Booking React Admin UI Dashboard Web App Template:

1. Four Distinct Pages: The template comes with four separate pages for a comprehensive EV charging booking application.
2. Fully Responsive Design: The design is optimized for various devices and screen sizes, ensuring a seamless user experience across different platforms.
3. Comprehensive Documentation: The template comes with detailed documentation to help you understand and customize the application.
4. Precise Pixel-Perfect Design: The design is carefully crafted to ensure pixel-perfect accuracy, ensuring a professional and polished look.
5. Compliant HTML5 & CSS3 Files: The template uses HTML5 and CSS3 files, making it compatible with modern web browsers.
6. Easy Customization: The template is designed to be easily customizable, allowing you to tailor it to your specific needs.
7. Contemporary Responsive Style: The template features a modern and responsive design that adapts to different devices and screen sizes.
8. Compatibility with Multiple Browsers: The template is compatible with multiple browsers, ensuring a smooth user experience across different platforms.

Additionally, the template utilizes the following technologies:

1. React 18 + Vite: A modern web development tool that combines React with Vite for efficient and rapid web application development.
2. React Router 6: A widely-used routing library for React applications, enabling smooth navigation between different sections of the application.
3. Ant Design 5: A design system tailored for enterprise-level products, offering a range of high-quality components and layouts.
4. SASS: A potent CSS preprocessor that extends CSS capabilities with features like variables and nesting.
5. Chart.js: A flexible and feature-rich JavaScript library for creating interactive and customizable charts and graphs.
6. Framer Motion 10: A popular animation library for React applications, simplifying the creation of smooth and visually captivating animations and transitions.
7. React-spinners: A compilation of loading spinner components designed for React applications, serving to indicate ongoing content loading or background task execution.