if you have recipe based website and want to have an application too
Let’s assume that you have a website with recipes. And you want to connect your website to recipe application. You understand the logic of how it might work, for sure.
But something stops you.
My goal was to give you information related to how to add an app to your website. And show you that this is not a big deal. Situations and projects are different, of course. But this can save your time and money — if you’ll use project that I’m working on.
Right now it’s not finished. You can read more here
I was focused on previous projects that were created for my clients when I build the first version of the app. Similar to this article.
They have websites and an application will be a good new feature for users.
They will need to create an app design, find a way how to get data from MySQL databases(WordPress + custom recipes plugin and Custom Database, build with Yii Framework help).
So current application code can be re-branded and used by my prev. clients.
They must store JSON file at an online server with data. The app will read that file and display recipes in a proper way.
Note: This version has limited functionality. No user registration, no meal planning — but it can be up in a small amount of time.
If you don’t have the main website — you can use this app with our Recipe API server(more information below).
About an app
Code is written with Angular help. Ionic Framework used.
First views and basic structure was build and exported at Ionic Creator.
Note: I didn’t send this app to app store. Not compiled and not create a Cordova build. And didn’t test it at app previewer.
So it can have errors. But it was working well at the simulator and this was enough for me(lazy thing).
Next version will be created with React Native help.
it’s awesome to have a starter like create-react-app. It helps a lot. React native also has a big archive of project examples.
But you’ll need to dig into ‘React’ world. 2 weeks ago I set up a create-react-app blank starter. I spend 4 minutes. it’s a big time-saver for me. A year ago you must know how React works, configuration Webpack and build stuff in order to start working. Right now it’s not a problem when you just want to open a page at localhost. Guys and GitHub community do awesome work.
Stages(how you can add this app into your project)
1) Your website + app(display content from the website). Or you can create separated content container instance. For app only
2) App will be connected to your database via API endpoints or webhooks
3) Authorization + Registration inside app. This can be covered by our API.
Or you can use sign up flow from your previous setup(your own registration way).
We’ll have an advanced security option for API and receiving data in next releases.
Most complex thing related to building a bridge between your website database, API, an app. Our recipe API and an app can(might) work together without complex setup. But your project and database will require some changes.
You are able to set up an app with free-menu functionality right now.
You’ll display 5–6 recipes for a week, with additional data. You’ll use Recipe API(Release #0) and Ionic App(Release#1)
If you ask my opinion — it’s better to set up an app without connection to API or database.
Why? Because it’s easy and fast. This is a solution for a lazy people(simple way). You can launch it fast and show to your users.
Ionic App(release #1) aka Free Menu have this app screens(screenshots available at the end of article):
- Login / sign-up
- About app tour
- View Menu(recipes list)
- View Recipe data
- View settings
- Profile
- Recipe information short/extended (limited for different purposes)
- Simple grocery list form with to-do checkboxes list.
Note: in this release, we have screens with ingredients list — right now auto-generation(convert recipes data to grocery list) is not working.
In order to use this functionality, you must have another one file with Grocery List items only.
It’ll be generated on the fly — at next stages.
Next Releases:
- Enable Login and get information from the main database. Display current menu(aka meal planning)
- Paid subscription, subscriptions management, Advanced search with filters.
You can also check this article
I plan to have an updated design in next releases. Will make an app better, beautiful by using one of design UI Kits. The design part is not an important task for this project. I want to make it works first.
I adore this UI Kits:
1357 Recipe App UI Kit(cannot find a link)
Wireframes/Aka i don’t have designer in my team yet. Feel free to use it and thank you for you time. You can clap a few times — this is inspire me to write a next article.
