Free Admin Dashboard

Бесплатная панель администратора, разработанная на React.js, Tailwind CSS и TypeScript.

Бесплатная панель администратора — это шаблон администратора с открытым исходным кодом, разработанный в Figma и разработанный в React.js, Tailwind CSS и TypeScript. Моя цель в этом проекте — создать высококачественный шаблон панели мониторинга премиум-класса, следуя лучшим практикам React.js. Эта панель администратора React создана с использованием расширенных шаблонов проектирования React.js, таких как шаблоны проектирования контролируемых и неконтролируемых компонентов, шаблоны пользовательских перехватчиков, шаблоны компонентов макета, шаблоны композиции компонентов, шаблоны проектирования составных компонентов и многие другие… В основном это шаблон панели управления электронной коммерции, но в будущем, если репозиторий станет популярным, я расширю его на большее количество ниш. Панель управления полностью адаптивна и доступна для бесплатного скачивания .

Дизайн панели администратора

Дизайн панели администратора разработан в Figma с учетом основных и лучших практик дизайна пользовательского интерфейса панели управления электронной коммерции. Моя цель — сделать его максимально простым и с превосходным пользовательским интерфейсом. Полный дизайн создается с учетом потребностей конечного пользователя. Вы можете использовать шаблон панели администратора для любого типа веб-сайта электронной коммерции, вам нужно только подключить его к серверной части, и все будет работать без сбоев. Панель администратора веб-сайта электронной коммерции имеет полностью открытый исходный код , что означает, что вы можете легко добавить дополнительные функции, если захотите. Исходный код шаблона панели администратора написан с учетом лучших практик, поэтому у вас не возникнет с ним проблем. Панель управления React полностью настраиваема и гибка, поэтому вы можете легко сделать ее своей. Дизайн панели администратора разработан с учетом лучших практик проектирования, таких как визуальная иерархия, близость, пустое пространство, последовательность, контрастность и многое другое…

Функции

• Высококачественный дизайн. Высококачественный дизайн, созданный с учетом потребностей конечного пользователя.
• Адаптивный дизайн: полностью адаптивный макет, который без проблем работает на настольных компьютерах, планшетах и ​​мобильных устройствах.
• Динамические диаграммы и графики: интерактивная визуализация данных с использованием библиотеки Chart.js.
• Модульные компоненты: повторно используемые и настраиваемые компоненты для разных разделов информационной панели.
• Настройка темы: поддержка светлых и темных режимов с настраиваемыми темами.
• Таблицы данных: расширенные таблицы данных с сортировкой, фильтрацией и нумерацией страниц.

Используемые технологии

• React.js: библиотека JavaScript для создания пользовательских интерфейсов.
• Redux Toolkit: библиотека управления состоянием для приложений React.
• React Router: библиотека для маршрутизации в приложениях React.
• Chart.js: Простая, но гибкая библиотека диаграмм JavaScript.
• Tailwind CSS: CSS-фреймворк, ориентированный на утилиты, для быстрого создания пользовательских пользовательских интерфейсов.
• TypeScript: язык JavaScript уровня приложения.
• Nanoid: крошечный, безопасный, удобный для URL-адресов генератор уникальных строковых идентификаторов.
• Значки React: библиотека иконок с множеством иконок.
• Figma: Мощный инструмент веб-дизайна.

Если вам нравится проект бесплатной панели администратора, поставьте ему звездочку на GitHub, чтобы поддержать проект и дать мне мотивацию добавить еще много замечательных функций.

Видеоинструкция по запуску приложения

Вот ссылка на YouTube с видеоинструкциями по запуску приложения: https://www.youtube.com/watch?v=cydXOmMhbtQ.

Инструкции

1. Чтобы запустить приложение, сначала необходимо загрузить и установить Node.js и npm на свой компьютер. Вот ссылка на руководство, в котором объясняется, как их установить: https://www.youtube.com/watch?v=4FAtFwKVhn0. Также вот ссылка, по которой их можно скачать: https://nodejs.org/en.

2. Когда вы установите все необходимые программы на свой компьютер вам необходимо скачать проект. Когда вы загрузите проект, вам необходимо его извлечь.

3. После извлечения проекта вам необходимо открыть папку проекта в выбранном вами терминале и написать:

 npm install

4. Для запуска проекта напишите:

 npm run dev

5. Чтобы просмотреть свое приложение, перейдите в выбранный вами браузер и в URL-адресе напишите: http://localhost:5173.