Dreams Connect is a modern, responsive social networking dashboard template built with tailwind and designed to create engaging online communities. It includes beautifully crafted pages, feeds, messaging, groups, events, notifications, and community management. Dreams Connect helps you build scalable social networking, community, and collaboration platforms with ease.
System Overview
The Dreams Connect template requires a modern Laravel development environment with PHP 8.3+ support, essential extensions, and development tools for optimal performance and development experience.
Core Technologies
Backend Framework
Laravel 13.21.1
Frontend Framework
Tailwind 4
Programming Language
PHP 8.4
System Requirements
Composer
For PHP package dependency management
PHP Extensions
bcmath, ctype, fileinfo, json, mbstring, openssl, pdo, tokenizer, xml
Node.js
For Vite build process & SCSS compilation
Text Editor
VS Code, Sublime Text, or any code editor
Development Tools
Local Server
XAMPP/WAMP/MAMP
Version Control
Git
Web Browser
Any modern browser
Important Note
Ensure all PHP extensions are enabled in your server configuration. For production deployment, consider using a managed hosting service that supports Laravel 13.x and PHP 8.3+.
Dreams Connect offers 3 powerful dashboard variations and 10+ fully functional, prebuilt application modules with a clean, modular structure.
Prebuilt Applications
- User Profiles & Social Feeds
- Real-Time Chat & Group Conversations
- Communities, Groups & Events
- Friend Requests, Notifications & Activity Feed
- Media Sharing, User Management
Layout & Mode Features
- Multiple Sidebar Layout Options
- Full responsive design (Mobile, Tablet, Desktop)
- Built-in Light / Dark Mode Toggle
- Full RTL Layout Direction Support
- Layout Direction Variations
Project Overview
The Laravel project follows standard Laravel directory structure
with the main application located in dreamsconnect/laravel/. The application includes all
standard Laravel directories for a complete application structure.
dreamsconnect/
└── laravel/
├── app/
│ ├── Http/
│ │ ├── Controllers/
│ │ └── Middleware/
│ ├── Models/
│ └── Providers/
│
├── bootstrap/
│ └── cache/
│
├── config/
│ ├── app.php
│ ├── auth.php
│ └── database.php
│
├── database/
│ ├── factories/
│ ├── migrations/
│ └── seeders/
│
├── public/
│ ├── index.php
│ └── build/
│ ├── css/
│ ├── img/
│ ├── js/
│ └── libs/
│
├── resources/
│ ├── css/
│ ├── js/
│ ├── img/
│ └── views/
│ ├── layouts/
│ ├── partials/
│ └── pages/
│
├── routes/
│ ├── web.php
│ └── api.php
│
├── storage/
│ ├── app/
│ ├── framework/
│ └── logs/
│
├── tests/
│ └── Feature/
│
├── artisan
├── composer.json
├── package.json
└── vite.config.js
Laravel Blade Template Structure
Dreams Connect uses Laravel's Blade templating engine with a master layout file and individual page templates for consistent design and functionality. Below are the actual files from the project.
Main Layout File
This is the actual master layout file from the project that provides the common HTML structure, navigation, and scripts for all pages:
<!DOCTYPE html>
<html lang="en" class="h-full dark" dir="ltr">
<head>
@include('partials.head-css')
@include('partials.title-meta')
</head>
<body class="h-full bg-slate-950 text-slate-100 font-sans overflow-hidden">
@yield('content')
@component('components.modal-popup')
@endcomponent
@include('partials.vendor-scripts')
</body>
</html>Sample Page Template
This is the actual starter page template from the project that extends the main layout:
@extends('layout.mainlayout')
@section('content')
<!-- You page Content -->
@endsectionKey Blade Template Features
Template Inheritance
@extends directive for master layout structure
Content Sections
@section and @yield for dynamic content injection
Partial Includes
@include directive for reusable partials (topbar, sidebar)
Route Conditions
@if Route::is() for conditional layout rendering
Component System
@component directive for modal popup components
PHP Variables
PHP variables for page identification and routing
Laravel Framework Setup
Follow these steps to set up Dreams Connect Laravel application on your local development environment. This guide covers Laravel-specific installation, environment configuration, and project setup.
Prerequisites
Installation Steps
Project Setup
Extract the Dreams Connect Laravel project to your web server directory:
Install PHP Dependencies
Open terminal/command prompt in the Laravel project directory and run:
composer installInstall Node.js Dependencies
Install frontend dependencies for SCSS compilation:
npm installEnvironment Configuration
Configure your Laravel environment:
cp .env.example .envphp artisan key:generateDatabase Setup
Set up your database and run migrations:
php artisan migrateBuild Frontend Assets
Compile SCSS and build frontend assets:
npm run buildAccess Application
Start your web server and access the Laravel application:
php artisan servehttp://127.0.0.1:8000
yourdomain.com/laravel/public
You can easily update the logo in two ways:
Option 1: Overwrite Logo Image Files (Recommended)
Directly replace the default SVG logo files in the resources/img/ directory with your own logos using the same file names:
logo.png: Main logo (shown in light mode).
Option 2: Update HTML Templates
If you want to use different names or paths, open the template partial files: components/workspace-rail.blade.php, and search for the logo tags to modify their src attribute:
Sidebar Logo Structure (workspace-rail.blade.php):
<a href="{{url('index')}}" class="logo logo-normal">
<img src="{{URL::asset('build/img/logo.svg')}}" alt="Logo">
</a>All theme colors are defined as design tokens under the @theme directive in your resources/css/style.css file. These variables control the look and feel of components:
@theme {
--color-violet-50: oklch(98.7% .022 95.277);
--color-violet-200: oklch(92.4% .12 95.746);
--color-violet-400: oklch(82.8% .189 84.429);
}How it Works
Theme switching works by adding or toggling the class="dark" attribute on the root <html> element. The template automatically stores the user's theme selection in their session storage.
1. Attribute Control
To enable dark mode, set the attribute on the root tag:
<html class="dark">2. Tailwind CSS v4 Integration
In style.css, dark mode uses a custom variant that links the Tailwind dark: modifiers directly to the HTML attribute:
@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));You can write responsive layouts by simply adding prefix variants to any tag like dark:bg-dark-900 or dark:text-white.
Dreams Connect supports full Right-to-Left (RTL) reading directions. To change the layout from Left-to-Right (LTR) to RTL:
1. Update the HTML Tag
Simply add the dir="rtl" attribute and appropriate language code to your root tag:
<html lang="ar" dir="rtl">2. Tailwind RTL Processing
Tailwind CSS automatically transforms positioning utilities (like margins, padding, and flex alignments) using standard logical properties when the dir="rtl" attribute is active.
Dreams Connect is developed by Dreams Technologies and is available under both Envato Extended & Regular License options.
Regular License
Usage by either yourself or a single client is permitted for a single end product, provided that end users are not subject to any charges.
Extended License
For use by you or one client in a single end product for which end users may be charged.
What are the main differences between the Regular License and the Extended License?
If you operate as a freelancer or agency, you have the option to acquire the Extended License, which permits you to utilize the item across multiple projects on behalf of your clients.
Dreams Connect is built upon several open-source libraries, frameworks, and typography assets. We appreciate the contribution of the following resources:
| Asset Name | Official Website URL |
|---|---|
| Tailwind CSS | https://tailwindcss.com/ |
| Vite JS | https://vite.dev/ |
| Lucide Icons | https://lucide.dev/ |
If you have any questions or run into issues with the template, feel free to contact us via email at support@dreamstechnologies.com.
Response Time: Typically 12–24 hours on weekdays (GMT+5:30). Support covers template bugs, errors, and standard features. It does not cover custom installations or custom coding changes.
Contact SupportDo you need custom development for your application?
If you need customization, new page integration, feature setups, or database connections, our engineering team can help tailor this template to your precise specifications.
- Tailoring features to your exact branding and workflow.
- Deploying the template to your production servers.
- Integrating backend endpoints and databases.
Thank You
Thank you for choosing **Dreams Connect**! We hope this template facilitates building your application. We kindly ask you to share your feedback by leaving a rating on ThemeForest.
Leave a Review