Modern Authentication System | Современная Система Аутентификации

English | Русский

🌟 Modern Authentication System

A modern, responsive authentication system built with React and TypeScript. This project showcases a beautiful user interface with smooth animations and transitions, perfect for modern web applications.

Features

• User Authentication

  • Login with email/password
  • User registration
  • Password recovery system
  • Protected routes

• Modern UI/UX

  • Smooth page transitions
  • Responsive design
  • Beautiful gradient animations
  • Form validation with error messages

• Internationalization

  • Multi-language support (English/Russian)
  • Easy language switching

Technologies Used

• Frontend:
  • React 18
  • TypeScript
  • React Router v7
  • Material-UI
  • i18next for translations
  • CSS Modules

Screenshots

Login Page

Registration Page

Password Recovery

Form Validation

Installation and Setup

1. Clone the repository:

git clone https://github.com/qloux/modern-auth-system.git

2. Install dependencies:

cd frontend
npm install

3. Start the development server:

npm start

4. Open http://localhost:3000 in your browser

---

🌟 Современная Система Аутентификации

Возможности

• Аутентификация пользователей

  • Вход по email/паролю
  • Регистрация пользователей
  • Система восстановления пароля
  • Защищенные маршруты

• Современный UI/UX

  • Плавные переходы между страницами
  • Адаптивный дизайн
  • Красивые градиентные анимации
  • Валидация форм с сообщениями об ошибках

• Интернационализация

  • Поддержка нескольких языков (английский/русский)
  • Удобное переключение языков

Использованные технологии

• Frontend:
  • React 18
  • TypeScript
  • React Router v7
  • Material-UI
  • i18next для переводов
  • CSS Modules

Скриншоты

Страница входа

Страница регистрации

Восстановление пароля

Валидация форм

Установка и запуск

1. Клонируйте репозиторий:

git clone https://github.com/qloux/modern-auth-system.git

2. Установите зависимости:

cd frontend
npm install

3. Запустите сервер разработки:

npm start

4. Откройте http://localhost:3000 в браузере

🔒 Функции безопасности

• Хеширование паролей с помощью bcrypt
• Аутентификация через JWT токены
• Защищенные API маршруты
• Валидация форм
• CORS защита
• HTTP-only куки

🎨 Особенности дизайна

• Адаптивный дизайн для всех размеров экранов
• Плавные переходы между страницами
• Интерактивные элементы форм
• Состояния загрузки и анимации
• Обработка ошибок в интерфейсе
• Поддержка темной темы
• Градиентные фоны

👤 Автор

qloux

GitHub: @qloux

📄 Лицензия

Этот проект распространяется под лицензией MIT.