Giter Site home page Giter Site logo

recipes-app's Introduction

Recipes App

This app is a simple example of a recipes data repository app.

It's made to practice basic Ruby on Rails (API) and React (frontend) concepts.

The next list mentions some topics that are covered in this app's backend:

  • RSpec
  • Serializers
  • Pagination
  • Validations
  • Associations
  • Factories (and Faker)

The React app is inside the recipes-frontend folder and is separate from the mains Ruby on Rails project.

๐Ÿ“˜ Context

Each Recipe belongs to a User (the cook) and each cook may have many recipes associated with him. Any anonymous user can add a new recipe from its favourite cook to the system.

The recipes have some data specific data:

  • Title
  • Description
  • Total of people
  • Preparation time
  • Claps

Claps are an integer and are a way for anonymous users to thank for the recipe if they enjoyed it.

๐Ÿ›ฃ API Routes

Prefix Verb URI Pattern Controller#Action
user_recipes GET /users/:user_id/recipes(.:format) recipes#index
users GET /users(.:format) users#index
user GET /users/:id(.:format) users#show
recipes GET /recipes(.:format) recipes#index
POST /recipes(.:format) recipes#create
recipe GET /recipes/:id(.:format) recipes#show
PUT /recipes/:id(.:format) recipes#update

The last route increments the claps total for a recipe, as we don't allow recipes edition for now.

๐Ÿ–ฅ Frontend Use Cases

  • Enqueue multiple new Recipes in the syncing list.
  • Sync (publish) an enqueued Recipe.
  • Check the latest recipes (with pagination).
  • Clap the published recipes.

The frontend app may be started with yarn start, after installing all the dependencies. By default, it'll run in port 4000, to avoid conflicts with the Rails' default port (3000).

๐Ÿ“ธ Screenshot

Recipes App Screenshot

recipes-app's People

Stargazers

 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.