House

📜 Лицензия

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

Описание проекта: House — это сайт картинной галереи, он написан на react(TypeScript), Express и Tailwind.

Функционал

• Адаптивный дизайн
• На мобильных устройствах бургер меню
• Анимации при наведении, фокусировании и нажатии
• Переключение картин

Технологии

• Frontend: React 18, TypeScript, Zustand, React Router 6, React Query, Axios, Vite, SCSS, SVGR.
  
  
  
  
  
  
  
• Backend: Express, MySQL, TypeORM.
• Дизайн: Figma.

Установка

1. Клонирование репозитория:

   git clone https://github.com/BlackDarkes/House.git
   

2. Запустите проект:

   Node.js >= 18.x npm >= 9.x

   cd api && npm install && npm start
   cd frontend && npm install && npm run dev

Пример кода

1. React

export const useStore = create<IStore>()(
  devtools((set) => ({
    purchasesCount: 0,
    addPurchases: () =>
      set((state) => ({ purchasesCount: state.purchasesCount + 1 })),
    isBurger: false,
    handleBurger: () => set((state) => ({ isBurger: !state.isBurger })),
    type: "franch",
    handleType: (type) => set(() => ({ type: type })),
  }))
);

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

project/  
├── frontend/       
├── api/        
└── README.md  

Изображения проекта:

1. Desktop изображения: Рис. 1: Главная страница сайта в десктопной версии.

Рис. 2: Картины Английских художников.

Рис. 3: Картины Французских художников.

Рис. 4: Картины Немецких художников.

1. Mobile изображения:

   

   Рис. 5: Главная страница сайта в мобильной версии.