https://github.com/ssshetty11/coffeeshop-ui
A sleek and responsive coffee shop website built with Next.js and Tailwind CSS, featuring a modern UI design and smooth user experience.
https://github.com/ssshetty11/coffeeshop-ui
nextjs nextjs14 reacticons reactjs responsive-design tailwindcss
Last synced: 2 months ago
JSON representation
A sleek and responsive coffee shop website built with Next.js and Tailwind CSS, featuring a modern UI design and smooth user experience.
- Host: GitHub
- URL: https://github.com/ssshetty11/coffeeshop-ui
- Owner: ssshetty11
- Created: 2024-11-17T17:28:55.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2024-11-17T18:26:42.000Z (over 1 year ago)
- Last Synced: 2025-01-19T11:43:11.567Z (over 1 year ago)
- Topics: nextjs, nextjs14, reacticons, reactjs, responsive-design, tailwindcss
- Language: JavaScript
- Homepage: https://coffee-shopui.vercel.app/
- Size: 7.56 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Modern Coffee Shop Website
A modern, responsive coffee shop website built with Next.js 14, featuring an elegant UI and seamless user experience.
## 🚀 Technologies & Concepts Used
### Core Technologies
- **Next.js 14** - React framework with App Router
- **React 18** - UI library
- **Tailwind CSS** - Utility-first CSS framework
- **JavaScript/JSX** - Programming language
### Key Features
- Responsive design
- Modern UI/UX
- Dynamic routing
- Image optimization with Next.js Image component
- Interactive product cards
- Social media integration
### UI Components
- **Navigation Bar**
- Responsive menu
- Mobile-friendly hamburger menu
- Smooth transitions
- **Hero Section**
- Full-width banner
- Call-to-action buttons
- Optimized background images
- **Product Cards**
- Hover effects
- Price display
- Add to cart functionality
- Image galleries
- **Footer**
- Social media links using React Social Icons
- Contact information
- Navigation links
### Styling
- Tailwind CSS for responsive design
- Custom animations and transitions
- Hover effects
- Shadow effects
- CSS Grid and Flexbox layouts
### Performance Optimization
- Next.js Image optimization
- Lazy loading
- Component-based architecture
- Efficient routing
## 🛠️ Installation & Setup
1. Clone the repository:
git clone https://github.com/ssshetty11/CoffeeShop-UI.git
2. Install dependencies:
npm install or yarn install
3. Run the development server:
npm run dev or yarn dev
4. Open [http://localhost:3000](http://localhost:3000) in your browser
## 🎨 Design Features
- Modern and minimalist design
- Consistent color scheme
- Responsive typography
- Interactive elements
- Smooth animations
## 🔧 Configuration
- Tailwind CSS configuration
- Next.js configuration
- Environment variables
## 📱 Responsive Design
- Mobile-first approach
- Breakpoints for different screen sizes:
- Mobile: < 640px
- Tablet: 640px - 1024px
- Desktop: > 1024px
## 🚀 Deployment
The project is deployed on:
- Vercel https://coffee-shopui.vercel.app/
## 📝 License
This project is licensed under the MIT License - see the LICENSE file for details