Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jakegodsall/fm-coffeeroasters-site
Personal solution to the Coffeeroasters Site challenge by Frontend Mentor
https://github.com/jakegodsall/fm-coffeeroasters-site
framer-motion nextjs reactjs tailwindcss
Last synced: about 1 month ago
JSON representation
Personal solution to the Coffeeroasters Site challenge by Frontend Mentor
- Host: GitHub
- URL: https://github.com/jakegodsall/fm-coffeeroasters-site
- Owner: jakegodsall
- License: mit
- Created: 2024-03-06T20:12:37.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2024-09-04T15:29:31.000Z (5 months ago)
- Last Synced: 2024-09-05T20:33:07.794Z (5 months ago)
- Topics: framer-motion, nextjs, reactjs, tailwindcss
- Language: JavaScript
- Homepage: https://fm-coffeeroasters-site.vercel.app
- Size: 2.2 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ☕ Coffee Subscription Website - Solution
## 📝 Project Overview
This is my solution to the [Coffee Subscription Website](https://www.frontendmentor.io/challenges/coffeeroasters-subscription-site-5Fc26HVY6) challenge. The goal of this project was to build a responsive, 3-page website where users can customize a coffee subscription and view an order summary. I've implemented the design to look as close as possible to the provided mockups, ensuring a polished user experience across devices.
### Key Features:
- **Coffee Subscription Form**: Users can select preferences such as coffee type, grind options, delivery frequency, and more. Their selections are summarized in an order modal.
- **Responsive Design**: Optimized layouts for mobile, tablet, and desktop views, ensuring usability on any screen size.
- **Interactive Elements**: Hover and focus states are added to all buttons and clickable elements, enhancing the overall user experience.
- **Order Summary Modal**: Displays the user's selected coffee subscription options.
## 🛠️ Technologies Used
- **Next.js**: For building the web app with server-side rendering and routing.
- **TailwindCSS**: To efficiently style the components and manage responsive design.
- **Framer Motion**: For smooth modal animations and other UI transitions.
## 🎯 Features Implemented
### 1. Coffee Subscription Creation
Users can go through a series of steps to customize their coffee subscription:
- Choose coffee type, quantity, grind option, and delivery frequency.
- The order summary modal dynamically updates as users make their selections.
### 2. Responsive Layout
I designed this project to adapt to multiple screen sizes, ensuring a smooth experience across:
- **Mobile Devices**: Optimized for small screens with touch-friendly elements.
- **Tablets**: Mid-sized layout adjustments for an improved tablet experience.
- **Desktops**: Full-size layout for larger screens with additional padding and spacing for readability.
### 4. Order Summary Modal
A summary modal appears at the end of the subscription creation process, displaying the user's choices. Users can confirm their order or go back to adjust selections.
## 🚀 How to Run the Project
1. **Clone the repository:**
```shell
git clone https://github.com/your-username/coffee-subscription-solution.git
cd coffee-subscription-solution
```
2. **Install the dependencies:**
```
npm install
```
3. **Run the development server:**
```shell
npm run dev
```
4. **Build for production and run the production server:**
```shell
npm run build
npm start
```
## 🔗 Links
Live Site: [Vercel](https://fm-coffeeroasters-site.vercel.app/)
Challenge: [Frontend Mentor](https://www.frontendmentor.io/challenges/coffeeroasters-subscription-site-5Fc26HVY6)
## 📄 License
This project is licensed under the MIT License.