Nookr is a simple and easy-to-use recipe app that allows you to search for ingredients and cooking instructions for meals. It doesn't matter what part of the world you are from, Nookr's catalogue of 500k+ recipes sure has something for you.
To begin, simply type in the name of the dish that you want to cook, and Nookr will provide you with a list of ingredients and detailed instructions on how to prepare the meal. Nookr currently only allows you to search for recipes by dish name. You can also save your favorite dishes to a favorites list for easy access later.
Nookr-showcase_.-.1080WebShareName.mov
| Feature | Description |
|---|---|
| Search for recipes by dish name | Users can search for recipes based on the name of the dish they want to make. |
| Detailed ingredient and instruction | Each recipe includes a list of ingredients and step-by-step instructions. |
| Save your favorite recipes | Users can save their favorite recipes to a separate list for easy access. |
| Easy navigation and user-friendly design | The website has a user-friendly design that allows for easy navigation. |
| Compatibility | The website is accessible on both desktop and tablet devices. |
With Nookr App, I aimed to showcase my skills in several areas, including:
-
MVC architecture: I structured the app using the Model-View-Controller (MVC) architecture, with clear separation between data, presentation, and user input. This helps to ensure a clean and maintainable codebase.
-
Object-Oriented Programming: I made use of object-oriented programming principles, specifically the concept of classes, to create modular and maintainable code in the View. The Classes provided a blueprint for creating objects with similar properties and behaviors, and enable encapsulation, inheritance, and polymorphism.
-
Vanilla JavaScript: The app is built entirely with vanilla JavaScript, without the use of any external frameworks or libraries. This demonstrates my ability to work with the core features of the language and write efficient code.
-
Styling with Sass/Scss: Styled the app using Sass/Scss — the CSS preprocessor that served as syntactic sugar. This allowed me to write modular and reusable styles, making the styling code more maintainable and easier to update — easier to read too 🤷🏾♂️.
-
User Interface Design: The Nookr App is also intended to showcase an eye for creating simple, yet visually appealing user interfaces that prioritize usability and accessibility. I drew from various design trends and elements across different apps and platforms, resulting in a unique and modern look and feel for the app.
Overall, I believe that this project demonstrates my ability to build a robust and maintainable web application using modern web development tools and techniques. Credit to Jonas Schmedtmann for his incredible course and API.
As a fellow developer, if you want to use Nookr as a starting point for your own project, you can clone or fork the app from the GitHub repository. To clone the app and access it from your machine, run the following command in your terminal:
# Clone the Nookr-App repository from GitHub
$ git clone https://github.com/HAYVENO/Nookr-App.git
# Change directory to the Nookr-App folder
$ cd Nookr-App
# Install all the necessary dependencies for the project using npm
$ npm install
# Start the development server to run the Nookr-App locally on your machine
$ npm start
Nookr is designed to be user-friendly and easy to navigate. Whether you're in the kitchen or on the go, Nookr is a great resource for finding ingredients and cooking instructions for any meal.
Plus, with Nookr's Search by dish name feature and the ability to save your favorite dishes, you can quickly and easily access the recipes that you love.
Go from Noob-cook to King-Chef in minutes with Nookr - your personal kitchen companion. 😉
OK, don't mind my mid attempt at marketing. But if you find the work I did with the app beautiful, or you just as much as enjoyed the READ ME, please don't hesitate to star 🌟 the repo. Thanks!
