https://github.com/clementmadiot/coffee_react
Responsive Coffee Shop Website Using ReactJS, Tailwind CSS & Framer Motion
https://github.com/clementmadiot/coffee_react
Last synced: 4 months ago
JSON representation
Responsive Coffee Shop Website Using ReactJS, Tailwind CSS & Framer Motion
- Host: GitHub
- URL: https://github.com/clementmadiot/coffee_react
- Owner: ClementMadiot
- Created: 2024-09-10T14:52:53.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2025-01-31T18:34:51.000Z (6 months ago)
- Last Synced: 2025-02-10T08:46:45.883Z (5 months ago)
- Language: JavaScript
- Homepage: https://coder-coffe-cm.netlify.app/
- Size: 5.08 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Coders Coffee
##
📋 Summary
- ✨ [Introduction](#introduction)
- 🛠[Technology Used](#tech-stack)
- 🚀 [Launch App](#launch-app)
- 🎨 [Styling](#style)
**[ENG]** This fully responsive Coffee Shop Website is built with ReactJS and Tailwind CSS, ensuring a modern and seamless user experience across all devices. Animated with Framer Motion and react-tilt, it delivers smooth interactions and dynamic visual effects, enhancing user engagement.
**[FR]** Ce site web de café entièrement responsive est développé avec ReactJS et Tailwind CSS, offrant une expérience fluide et moderne sur tous les appareils. Animé avec Framer Motion et react-tilt, il intègre des interactions fluides et des effets visuels dynamiques pour une navigation immersive.
- [TailwindCSS](https://tailwindcss.com/docs/installation)
Tailwind CSS is a valuable tool for developers who want to build modern, responsive, and visually appealing websites without sacrificing development speed.
- [react-icon](https://www.npmjs.com/package/react-icons)
Include popular icons in your React projects easily with react-icons, which utilizes ES6 imports that allows you to include only the icons that your project is using.
- [react-tilt](https://www.npmjs.com/package/react-tilt?activeTab=readme)
A tiny request Animation Frame powered 60 fps light weight parallax hover tilt effect for ReactJS.
- [framer-motion](https://www.npmjs.com/package/framer-motion)
Framer Motion is an open source, production-ready library that’s designed for all creative developers.
**Cloning the Repository**
```bash
git clone {git remote URL}
```
**installation**
> After cloning the repository, run the command `npm install` to install the project's dependencies.
> Once the dependencies are installed, start the project with the command `npm run dev`.
##
🎨 Styling
Global styling are defined using TailwindCSS in the tailwind.config.js file.
````
theme: {
extend: {
colors: {
primary: "#f19509",
primaryDark: "#e86f00",
lightOrange: "#f1dabf",
darkGray: "#1a1f25",
lightGray: "#272c35",
},
container: {
center: true,
padding: {
DEFAULT: "1rem",
sm: "2rem",
},
},
screens: {
vsm: "425px",
}
},
},
````