Base from https://github.com/epicmaxco/vuestic-admin

SyncStrata

A modern, feature-rich admin dashboard built with Vue.js, Tailwind CSS, and Strapi CMS. SyncStrata provides a comprehensive solution for managing your application with powerful authentication, role-based permissions, and an intuitive user interface.

Features

Core Technologies

• Vue.js 3: Utilizing the Composition API for reactive and efficient UI components
• Tailwind CSS: Fully customizable utility-first CSS framework
• Strapi CMS: Headless CMS for flexible content management and API creation

User Management

• Authentication System:

  • JWT-based authentication
  • Social login integrations (Google, GitHub)
  • Two-factor authentication (2FA)
  • Password reset functionality
  • Session management

• Advanced Permissions:

  • Role-based access control (RBAC)
  • Granular permission settings
  • Custom user roles creation
  • API endpoint restrictions
  • Content-based permissions

Dashboard Features

• Dynamic Layouts:

  • Customizable dashboard widgets
  • Drag-and-drop interface
  • Responsive design for all devices
  • Dark/Light mode toggle

• Data Visualization:

  • Interactive charts and graphs
  • Real-time data updates
  • Pivot tables for data analysis
  • Exportable reports (PDF, CSV, Excel)

• UI Components:

  • Syncfusion component integration
  • Data grids with filtering and sorting
  • Form builders and validators
  • Advanced pivot tables
  • Modal dialogs and notifications

Developer Experience

• API Integration:

  • RESTful API endpoints
  • GraphQL support
  • Swagger documentation
  • Rate limiting and caching

• Performance Optimizations:

  • Code splitting
  • Lazy loading
  • Server-side rendering options
  • Optimized build process

Getting Started

Prerequisites

• Node.js (v14.0 or higher)
• npm or yarn
• Database (PostgreSQL recommended, but MySQL and SQLite also supported)

Installation

1. Clone the repository:

git clone https://github.com/yourusername/syncstrata.git
cd syncstrata

2. Install dependencies:

# Install frontend dependencies
cd frontend
npm install

# Install backend dependencies
cd ../backend
npm install

3. Configure environment variables:

# Frontend .env
cp frontend/.env.example frontend/.env

# Backend .env
cp backend/.env.example backend/.env

4. Start development servers:

# Start Strapi backend
cd backend
npm run develop

# Start Vue frontend
cd frontend
npm run serve

5. Access the application:
   • Frontend: http://localhost:8080
   • Strapi Admin: http://localhost:1337/admin

Project Structure

syncstrata/
├── frontend/                  # Vue.js frontend
│   ├── public/                # Static files
│   ├── src/
│   │   ├── assets/            # Images, fonts, etc.
│   │   ├── components/        # Reusable Vue components
│   │   ├── layouts/           # Page layouts
│   │   ├── plugins/           # Vue plugins
│   │   ├── router/            # Vue Router configuration
│   │   ├── services/          # API services
│   │   ├── store/             # Vuex store
│   │   ├── views/             # Page components
│   │   ├── App.vue
│   │   └── main.js
│   └── package.json
│
├── backend/                   # Strapi backend
│   ├── api/                   # API definitions
│   ├── config/                # Strapi configuration
│   ├── extensions/            # Strapi extensions
│   ├── public/                # Public assets
│   └── package.json
│
└── README.md

Customization

Theming

SyncStrata comes with a fully customizable theme based on Tailwind CSS. You can modify the theme in the tailwind.config.js file:

// frontend/tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          light: '#4da6ff',
          DEFAULT: '#0080ff',
          dark: '#0066cc',
        },
        // Add your custom colors here
      },
    },
  },
  // ...
}

Adding New Features

The modular architecture allows for easy extension of functionality:

1. Create new Strapi content types in the backend
2. Generate corresponding API endpoints
3. Develop Vue components to interact with the new data
4. Add new routes in the Vue Router configuration

Deployment

Frontend Deployment

cd frontend
npm run build

This will generate a production-ready build in the frontend/dist directory, which can be deployed to services like Netlify, Vercel, or any static hosting service.

Backend Deployment

Follow the Strapi deployment guide for deploying the Strapi backend to your preferred hosting platform.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgements

• Vue.js
• Tailwind CSS
• Strapi
• Syncfusion Components