Skip to content
Sample app for sharing recipes built with React, Typescript, Firebase and Sancho
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
functions fix deployment May 7, 2019
public add branding Mar 20, 2019
src fix sizing on tablet May 7, 2019
.gitignore add some more comments Mar 20, 2019
LICENSE add license Apr 3, 2019
README.md
firebase.json add firebase hosting stuff Mar 20, 2019
firestore.indexes.json update our firestore indexes Mar 20, 2019
firestore.rules add firebase hosting stuff Mar 20, 2019
julienne.jpg add branding image May 7, 2019
package.json fix sizing on tablet May 7, 2019
tsconfig.json add functions, load recipes Mar 18, 2019
yarn.lock fix sizing on tablet May 7, 2019

README.md

Julienne


Julienne is a web app that allows you to share recipes with family and friends.

It's built using the Sancho-UI design system, Firebase, Typescript, React and Emotion.

Try it out here.

How this code works

I'm writing a series of blog posts explaining the code that goes into this project. I'll be adding them here and on my blog when time permits.

1. Introducing Sancho UI

2. Using Firebase with React Hooks

3. Building React Components with Gesture Support

4. A Beginner's Guide to using Typescript with React

Running locally

This project is built using create-react-app, typescript, and firebase. To get it running properly, you'll need to create your own firebase application and export your firebase configuration in a file at src/firebase-config.ts. The config should include algolia configuration, and look something like this:

// src/firebase-config.ts
const config = {
  apiKey: "myapikey",
  authDomain: "my-auth-domain.firebaseapp.com",
  databaseURL: "my-db-url.com",
  projectId: "my-pid",
  storageBucket: "my-storage-bucket",
  messagingSenderId: "my-sender-id",
  ALGOLIA_APP_ID: "my-app-id",
  ALGOLIA_USER_SEARCH_KEY: "my-user-search-key"
};

export default config;

You'll also need to install the local dependencies using Yarn or NPM.

yarn

You'll need to either deploy the functions or emulate them locally. Finally, you can run it:

yarn start

This runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

Deploying

Use firebase-cli to initalize a project in the root directory. Then build your project and deploy.

yarn run build
firebase deploy

License

BSD 3-Clause, see the LICENSE file.

You can’t perform that action at this time.