☕ Coffee Explorer

Every bean tells a story

A modern web application for coffee lovers, built with React, TypeScript, and Tailwind CSS. Explore the world of coffee, save your favorite varieties, and find the perfect coffee for yourself.

Features

• Modern Design - Elegant interface in coffee tones
• Fully Responsive - Works perfectly on all devices
• Favorites System - Save your favorite coffee varieties (Zustand)
• Authentication - User login and registration
• React Router - Fast navigation without reloads
• Optimized Performance - Vite for fast build
• Smooth Animations - Framer Motion for elegant transitions
• State Management - Zustand for effective state management

🛠️ Tech Stack

Category	Technology
Frontend	React 18.3, TypeScript 5.6
Styling	Tailwind CSS 3.4, Custom CSS
Routing	React Router DOM 7.1
State Management	Zustand 5.0
Animations	Framer Motion 11.15
Icons	React Icons 5.4
Build Tool	Vite 6.0
Deployment	GitHub Pages

📦 Installation

Requirements

• Node.js >= 18.0.0
• npm or yarn

Local Environment

Clone the repository

git clone https://github.com/NatalinaMatioshko/coffee-explorer.git

Go to directory

cd coffee-explorer

Install dependencies

npm install

Start dev server

npm run dev

Open http://localhost:5173 in your browser.

🚀 Commands

Development

npm run dev # Start dev server

Build

npm run build # Production build
npm run preview # Preview production build

Deploy

npm run deploy # Deploy to GitHub Pages

Lint

npm run lint # ESLint check

🎨 Design

Color Palette

• Primary Dark: #4f2d20
• Light Background: #f9f3e9
• Accent: #ecc29c
• Dark Brown: #5f2109

Typography

• Primary Font: System fonts
• Sizes: Responsive (sm, base, lg, xl)

📱 Pages

• Home (/) - Hero section with animations
• Menu (/menu) - Drinks catalog
• Beans (/beans) - Coffee beans catalog
• Courses (/courses) - Educational programs
• Contacts (/contacts) - Contact information
• Favorites (/favorites) - Saved items

🔄 Latest Updates

• ✅ Fixed mobile menu styles (952c3ee)
• ✅ Improved header behavior (2874237)
• ✅ Added favorites functionality with Zustand (43cf8e5)
• ✅ Replaced Link with NavLink with animations (7752950)

🤝 Contribution

Suggestions and improvements are welcome!

1. Fork the project
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 open for use.

👤 Author

Natalia Matioshko

• GitHub: @NatalinaMatioshko
• Email: ma.nataliem@proton.me

Acknowledgments

• Icons by React Icons
• Animations by Framer Motion
• UI components built with Tailwind CSS

---

⭐