🌟 Connect, Share & Discuss Ideas with Professionals

Your Gateway to Open Discussions

Connect with professionals, share ideas, and discuss topics with our advanced discussion platform.

See Demos Download
Job Search Illustration

Explore Our Platform

Preview our pages and access documentation

Our Pages

Explore our comprehensive job portal platform

Home Page

Home One

New
Home Page

Home Two

New
Home Page

Home Three

Home Page

About Page

Tags Page

Tags Page

User Page

User Page

Profile Page

Profile Page

Inner Pages

Explore our comprehensive discussion platform

Discussion Page

Discussion Page

Category Page

Category Page

Tag Category Page

Tag Category Page

New Discussion Page

New Discussion Page

Auth Pages

Explore our comprehensive discussion platform

Login Page

Login Page

Register Page

Register Page

Other Pages

Explore our comprehensive discussion platform

404 Page

Error Page

Server Error Page

Server Error Page

coming-soon Page

Coming Soon Page

Under Maintenance Page

Under Maintenance Page

Quick Links
1

Introduction

Discusli is a modern discussion platform. Built with React.js and Tailwind CSS, it features beautiful UI and responsive design, ensuring a great experience for users.

Smart Discussion Search

Advanced discussion search with filters and real-time updates

Community Profiles

Detailed community profiles and discussion listings

User Profile

Manage your profile, preferences, and more.

2

Changelog

1.5.0 04.08.2026 - RTL, SEO & Performance Update
  • New Feature: Added full RTL language support.
  • UI Updates: Added 2 new Hero section designs.
  • Improvement: Improved responsive layouts across all pages for a better mobile experience.
  • SEO & Performance: Significantly improved PageSpeed Insights performance, added component code-splitting (React.lazy), and fully optimized meta tags for better search ranking.
  • Updated Packages:
    • React & React DOM: v19.1.0 → v19.2.8
    • TailwindCSS: v3.4.17 → v3.4.19
    • React Router DOM: v7.6.2 → v7.18.1
    • Framer Motion: v12.18.1 → v12.42.2
    • Headless UI React: v2.2.4 → v2.2.10
    • React Icons: v5.5.0 → v5.7.0
    • React Easy Crop: v5.4.2 → v6.2.3
    • Web Vitals: v2.1.4 → v6.0.1
    • Testing Libraries: Updated to latest major versions
1.0.0 07.10.2025 - Initial Release
  • Initial release of Discusli platform
  • Complete discussion functionality
  • Responsive design implementation
  • Advanced features
  • Dark mode support
  • Mobile-friendly design
  • SEO-friendly routing
3

Folder Structure

Discusli/
├── documentation/
├── Screenshots/
├── Template/
│   ├── public/
│   ├── src/
│   │   ├── assets/
│   │   ├── components/
│   │   │   ├── ui/
│   │   │   ├── layout/
│   │   │   ├── index.js
│   │   ├── context/
│   │   ├── data/
│   │   ├── hooks/
│   │   ├── pages/
│   │   │   ├── auth/
│   │   ├── router/
│   │   ├── utils/
│   │   ├── App.jsx
│   │   ├── App.css
│   │   ├── index.css
│   │   ├── index.js
│   │   └── main.jsx
│   ├── package.json
│   ├── package-lock.json
│   ├── tailwind.config.js
│   └── vite.config.js
├── CHANGELOG.md
└── README.md
Key Directories:
src/assets/

Stores static assets like images.

src/components/

Contains all reusable React components, organized by feature or type.

src/context/

Holds React Context API providers for global state management.

src/data/

Stores mock data, data fetching logic, or other data-related utilities.

src/components/layout

Contains main layout components (e.g., Navbar, Footer, Sidebars).

src/pages/

Contains top-level page components, each corresponding to a specific route or view.

src/router/

Defines application routes and navigation logic.

4

Installation Guide

Install Dependencies
npm install
Start Development Server
npm start
5

Package Dependencies

Here are the key dependencies and their versions used in this project:

Package Version Description
@headlessui/react ^2.2.10 UI components for React
@headlessui/tailwindcss ^0.2.2 Tailwind CSS plugin for Headless UI
framer-motion ^12.42.2 Animation library for React
react ^19.2.8 Core React library for building user interfaces
react-countup ^6.5.3 A React component to make numbers count up
react-dom ^19.2.8 React DOM rendering for web applications
react-icons ^5.7.0 SVG icons for React projects
react-router-dom ^7.18.1 Routing library for React applications
6

File Customization

Main Components
  • src/components/layout/ - Common layouts and navigation
  • src/components/home/ - Components for home page and discussions
  • src/components/ui/ - Reusable common UI components
  • src/pages/auth/ - Components for authentication
  • src/components/ui/Modal/ - Reusable modal components
Feature Pages
  • src/pages/Home.jsx - Main landing page with trending discussions
  • src/pages/CategoryPage.jsx - Discussion categories and topics
  • src/pages/DiscussionDetail.jsx - Detailed discussion view and replies
  • src/pages/NewPostPage.jsx - Create new discussion posts
  • src/pages/TagPage.jsx - Discussion tags and filtering
  • src/pages/TagsPage.jsx - Browse all discussion tags
  • src/pages/ProfilePage.jsx - User discussion profiles
  • src/pages/UserProfilePage.jsx - Detailed user profiles
  • src/pages/UsersPage.jsx - Browse community members
  • src/pages/NotFound.jsx - 404 Not Found page
  • src/pages/ServerError.jsx - Server error page
  • src/pages/UnderMaintence.jsx - Maintenance mode page
7

Color & Font Customization (Tailwind CSS)

Color Customization

Theme colors are defined in your tailwind.config.js file within the theme.extend.colors object.

Example from tailwind.config.js:
// tailwind.config.js
            export default {
              // ...
              theme: {
                extend: {
                  colors: {
                    light: {
                      background: '#FFFAF0',
                      surface: '#FFFFFF',  
                      // ... other light mode colors
                    },
                    dark: {
                      background: '#000000',
                      surface: '#0c0f14',
                      // ... other dark mode colors
                    },
                    primary: "#6E85B7",
                  },
                  // ...
                },
              },
              // ...
            };
Font Customization

The "Figtree" font is imported in src/index.css and applied globally. Custom font sizes are defined in tailwind.config.js.

1. Font Import & Base Application (src/index.css)
/* src/index.css */
            @import url('https://fonts.googleapis.com/css2?family=Figtree:wght@300;400;500;600;700&display=swap');
            
            /* ... Tailwind directives ... */
            
            @layer base {
              body {
                font-family: 'Figtree', sans-serif;
              }
            }
8

Credits

Resources
Frameworks
9

Support

Need Help?

We offer 6 months of support for any questions or issues you may encounter.

Contact Support Visit Website
Features

Our Core Features

Discover the powerful technologies and tools that make our platform exceptional

React
React Js

Dynamic UI Library

Bootstrap
Tailwind CSS

Utility First Framework

Framer
Framer

Smooth Animations

HTML 5
HTML 5

Web Structure

CSS 3
CSS 3

Modern Styling

Responsive
Responsive

Mobile Friendly

Google Fonts
Google Fonts

Web Typography

Icons
Icons

Vector Graphics

Modern Design
Modern Design

Clean Aesthetics

Easy Customizable
Easy Customizable

Flexible Components

Clean Code
Clean Code

Optimized Structure

Well Documented
Well Documented

Clear Guides

24/7 Support
24/7 Support

Always Available

Join Discusli today & start your career journey!

Get Started