https://github.com/pejhvaman/ramify
A JavaScript MVC SPA using TheMealDB API for meal search, recipe details, favorites, and paginated results. Features modular code, responsive UI, and supports saving favorites.
https://github.com/pejhvaman/ramify
mvc parcel scss
Last synced: 3 days ago
JSON representation
A JavaScript MVC SPA using TheMealDB API for meal search, recipe details, favorites, and paginated results. Features modular code, responsive UI, and supports saving favorites.
- Host: GitHub
- URL: https://github.com/pejhvaman/ramify
- Owner: pejhvaman
- Created: 2025-01-01T16:12:23.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2025-07-05T21:21:21.000Z (11 months ago)
- Last Synced: 2025-07-05T21:32:18.432Z (11 months ago)
- Topics: mvc, parcel, scss
- Language: JavaScript
- Homepage: https://ramify-virid.vercel.app
- Size: 3.23 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🍽️ Ramify App
**Find and hold recipes.**
Powered by the [TheMealDB API](https://www.themealdb.com).
---
## 🔑 Key Features
- Search for meals by name or keyword
- View detailed recipes, ingredients, and instructions
- Save favorite meals to view later
- Pagination to navigate through search results
- Clean and modular code structure based on MVC pattern
- Responsive and visually pleasant UI (in progress)
---
## 💠 More Features (Planned)
- Fix fractional ingredient quantities (e.g., "1/2" or "¼")
- Display total number of pages between pagination buttons
- Sort search results:
- Alphabetically
- By number of ingredients
- **Shopping List** feature: add recipe ingredients to a shopping list
- **Weekly Meal Planner**: assign recipes to each day on a weekly calendar view
- **Nutrition Info**:
- Fetch nutrition data using [Spoonacular API](https://spoonacular.com/food-api)
- Calculate total calories per recipe
- Fully responsive design for mobile and tablet users
---
## 📦 Installation
Clone the repository:
```bash
git clone https://github.com/yourusername/ramify.git
```
Navigate to the project folder:
```bash
cd ramify
```
Install dependencies:
```bash
npm install
```
Run the development server:
```bash
npm start
```
Build the project for production:
```bash
npm run build
```
---
## 🚀 Usage
1. Use the search bar to find a meal by name or keyword.
2. Click on a recipe to view full details including:
- Image
- Ingredients
- Instructions
- Category and origin
3. Save a recipe for future access.
4. Navigate through search results using pagination controls.
5. *(Upcoming)* Add ingredients to shopping list or assign meals to your meal plan.
---
## 🛠️ Technologies Used
- **JavaScript (ES6+)**
- **MVC architecture**
- **Parcel** for bundling
- **TheMealDB API** for recipe data
- **Local Storage** for saving favorite recipes
- **SCSS** for styling
- *(Planned)* **Spoonacular API** for nutrition information
---
## 📌 Note
This project is still under development. More features and refinements will be added for better usability, performance, and functionality.
---
## 📄 License
This project is open-source and free to use.