https://github.com/ra1nbow1/auth-service

🔐 React app for auth
https://github.com/ra1nbow1/auth-service

react react-router reacthookform reactquery shadcn-ui tailwindcss typescript zod

Last synced: 9 months ago
JSON representation

🔐 React app for auth

• Host: GitHub
• URL: https://github.com/ra1nbow1/auth-service
• Owner: ra1nbow1
• Created: 2025-01-31T16:27:26.000Z (11 months ago)
• Default Branch: main
• Last Pushed: 2025-02-02T10:39:16.000Z (11 months ago)
• Last Synced: 2025-04-11T00:57:47.828Z (9 months ago)
• Topics: react, react-router, reacthookform, reactquery, shadcn-ui, tailwindcss, typescript, zod
• Language: TypeScript
• Homepage: https://auth.ra1nbow.xyz
• Size: 120 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
Проект представляет собой клиентскую часть для авторизации пользователей. Предполагается, что на серверной стороне

авторизация работает с использованием JWT-токенов. Клиент отправляет на сервер запрос с полем `Authorization` в

заголовке.

## [Демо](http://auth-service-xi-seven.vercel.app/)

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

- **React**

- **TypeScript**

- **React Hook Form**

- **Zod**

- **React Query**

- **shadcn/ui**

- **Tailwind CSS**

- **React Helmet**

## Структура проекта

- **`/src`**: корневая директория исходного кода.

    - **`/components`**: переиспользуемые компоненты интерфейса.

    - **`/hooks`**: пользовательские хуки React.

    - **`/pages`**: компоненты страниц приложения.

## Управление формами

Для управления формами используется библиотека **React Hook Form** в сочетании с **Zod** для валидации схем.

## Управление серверными данными

Для работы с серверными данными используется **React Query**, который обеспечивает кэширование, синхронизацию и

обновление данных, полученных с сервера.

## Стилизация

Стилизация осуществляется с помощью **Tailwind CSS** и компонентов из **shadcn/ui**.

## Переключение тем

В проекте реализовано переключение между светлой и тёмной темами. Для этого используется переключатель, который изменяет

класс `dark` на элементе `html`, а стили, основанные на этом классе, определены в конфигурации Tailwind CSS.

## Дополнительно

- подтверждение пароля при регистрации

- валидация пароля на стороне клиента

- динамические заголовоки страниц