https://github.com/ajaypatil1993/coffee-shop-app-react
Coffee Cafe is a modern, responsive coffee shop website built using React.js and Tailwind CSS. It delivers a sleek, animated user interface with interactive carousels, smooth animations, and iconography, providing an engaging experience for users to explore the menu and services.
https://github.com/ajaypatil1993/coffee-shop-app-react
animation aos css3 html5 react-carousel react-icons react-slick reactjs responsive-design tailwindcss
Last synced: 3 months ago
JSON representation
Coffee Cafe is a modern, responsive coffee shop website built using React.js and Tailwind CSS. It delivers a sleek, animated user interface with interactive carousels, smooth animations, and iconography, providing an engaging experience for users to explore the menu and services.
- Host: GitHub
- URL: https://github.com/ajaypatil1993/coffee-shop-app-react
- Owner: ajaypatil1993
- Created: 2024-10-20T15:23:34.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2024-10-20T15:50:03.000Z (7 months ago)
- Last Synced: 2025-01-13T03:15:19.023Z (4 months ago)
- Topics: animation, aos, css3, html5, react-carousel, react-icons, react-slick, reactjs, responsive-design, tailwindcss
- Language: JavaScript
- Homepage: https://coffee-cafe-react.netlify.app/
- Size: 2.86 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Coffee Cafe ☕✨
**Coffee Cafe** is a modern, responsive coffee shop website built using React.js and Tailwind CSS. It delivers a sleek, animated user interface with interactive carousels, smooth animations, and iconography, providing an engaging experience for users to explore the menu and services.
## Screenshots 📸
### Desktop View:
### Mobile View:
## Features ✨
- **Responsive Design**: Optimized for all devices, from small phones to tablets and desktops.
- **Interactive Carousels**: Implemented with `react-slick` and `react-carousel` for smooth product showcases.
- **Animated Transitions**: Powered by `AOS` for scroll animations that bring the site to life.
- **Tailwind CSS**: Utility-first CSS framework for fast and responsive design.
- **React Icons**: Beautiful icons integrated seamlessly into the UI.
## Tech Stack 🛠️
## Project Layout 🗂️
```bash
Coffee_Cafe/
│
├── public/
│ └── images/
├── src/
│ ├── components/
│ ├── pages/
│ ├── styles/
│ ├── App.js
│ ├── index.js
│ └── ...
├── .gitignore
├── package.json
├── README.md
└── LICENSE
```
- **`public/`**: Static assets like images.
- **`src/`**: Source files, including components, pages, and styles.
- **`App.js`**: Main app structure.
- **`components/`**: Reusable UI elements (e.g., navbar, footer, carousels).
- **`styles/`**: Tailwind CSS and custom styles.
## Getting Started 🚀
### Prerequisites
- [Node.js](https://nodejs.org/) (version 14 or higher)
- [npm](https://www.npmjs.com/) (comes with Node.js)
### Installation
1. **Clone the Repository**:
```bash
git clone https://github.com/your-username/coffee-cafe.git
cd coffee-cafe
```
2. **Install Dependencies**:
```bash
npm install
```
3. **Run the Development Server**:
```bash
npm start
```
Open your browser and go to `http://localhost:3000` to view the app.
## Contributing 🤝
1. **Fork the Repository**
2. **Create a New Branch**:
```bash
git checkout -b feature/new-feature
```
3. **Commit Changes**:
```bash
git commit -m "Added new feature"
```
4. **Push to GitHub**:
```bash
git push origin feature/new-feature
```
5. **Open a Pull Request**.
## Live Preview 🌐
You can check out the live version of **Coffee Cafe** at: [Coffee Cafe Live](https://coffee-cafe-react.netlify.app/)
## Contact 📬
- **LinkedIn**: [Ajay Patil](https://www.linkedin.com/in/ajaypatil1993)
- **Email**: [[email protected]](mailto:[email protected])
- **GitHub**: [GitHub](https://github.com/ajaypatil1993)
## License 📝
This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.
## Acknowledgements 🙏
- 
- 
- 
- 
- 