Skip to content
This repository has been archived by the owner on Mar 18, 2022. It is now read-only.

A Gatsby starter to build your own recipes page with Flotiq and Gatsby.

License

Notifications You must be signed in to change notification settings

flotiq/gatsby-starter-recipes

 
 

Repository files navigation

Flotiq logo

Gatsby Starter - Recipes

This is a Gatsby starter project for a recipes website. It's configured to pull recipe data from Flotiq and can be easily deployed to your cloud hosting - Heroku, Netlify, Gatsby Cloud, etc.

Live Demo: https://flotiq-starter-recipes.herokuapp.com

Screenshot

Quick start

  1. Start the project from template using Flotiq CLI

    npm install -g flotiq-cli
    flotiq start [flotiqApiKey] [projectName] https://github.com/flotiq/gatsby-starter-recipes.git
    • flotiqApKey - Read and write API key to your Flotiq account
    • projectName - project name or project path (if you wish to start or import data from the current directory - use .)
  2. You can also start the project from template using Gatsby CLI

    gatsby new gatsby-starter-recipes https://github.com/flotiq/gatsby-starter-recipes.git
  3. Setup "Recipe" Content Type in Flotiq

    Create your Flotiq.com account. Next, create the Recipe Content Type:

    Recipe content type in flotiq

    Note: You can also create Recipe using Flotiq REST API.

  4. Configure application

    The next step is to configure our application to know from where it has to fetch the data.

    You need to create a file called .env inside the root of the directory, with the following structure:

    GATSBY_FLOTIQ_API_KEY=YOUR FLOTIQ API KEY
    
  5. Start developing

    Navigate into your new site’s directory and start it up.

    cd gatsby-starter-recipes
    npm install
    gatsby develop

    This step is optional and is not necessary if you used flotiq-cli to start the project.

    If you wish to import example recipes to your account, before running gatsby develop, install flotiq-cli, and run in project directory:

    flotiq import [flotiqApiKey] .

    It will add 4 images and 2 recipes to your Flotiq account.

    Note: ou need to put your Read and write API key as the flotiqApiKey for import to work. You don't need the Recipe content type in your account. If you already have recipes with ids recipe-1 and recipe-2 they will be overwritten.

  6. Open the source code and start editing!

    Your site is now running at http://localhost:8000!

    Note: You'll also see a second link: http://localhost:8000/___graphql`. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the Gatsby tutorial.

    Open a project directory in your code editor of choice and edit src/templates/index.js. Save your changes and the browser will update in real time!

  7. Manage your recipes using Flotiq editor

    You can now easily manage your recipes using Flotiq editor

    Managing recipes using Flotiq

Deploy

You can deploy this project to Heroku in 3 minutes:

Deploy

Or to Netlify:

Deploy

Collaborating

If you wish to to talk with us about this project, feel free to hop on our Discord Chat.

If you found a bug, please report it in issues.

About

A Gatsby starter to build your own recipes page with Flotiq and Gatsby.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 64.2%
  • CSS 35.8%