Giter Club home page Giter Club logo

cake_shop_backend's Introduction

Cake SHOP!

Contributors: Chen Jiang, Sarah Baughman

Description

Utilizing a Flask API backend with a React frontend, Cake SHOP! is a business app intended to give users access to the many offerings of a cake shop, as well as provide an easy way for the business to take in orders.

User Story

A user interacting the site may do the following:

  • Visit the Home and About page to learn more about the Cake SHOP business
  • Move through various pages with just a click using a navigation bar
  • View the cake offerings and cake information, includes a "Read More" button to expand and reveal more text
  • Click "Reviews" button to view reviews specific to each cake
  • Create, login and logout of a user account in order to store user information
  • Click "Add to Cart" button to add cakes to cart with login/logout and refresh page persistance
  • Adjust quantity of each cake in the Cart and submit an order
  • Click "Add to Favorites" button to add cakes to a Favorites page with login/logout and refresh page persistance
  • View MyPage to view past orders and write, view and delete reviews for purchased cakes

Code Files

Fork and clone:

Setup

Be sure to run both the backend and frontend for the full app experience.

Frontend Setup

To download dependencies and get started, in the project directory run:

$ npm install
$ npm start

The React app will run in a separate window on [http://localhost:4000]

Backend Setup

To download dependencies and get started, in the project directory run:

$ pipenv install
$ pipenv shell

You can run the Flask API on [http://127.0.0.1:5555] in the project directory by running:

$ python app.py

Frontend Information

Project Requirements

  • Use forms and validation through Formik on all input
  • At least one datatype validation
  • At least one string/number format validation
  • Have at least three different client-side routes using React Router
  • Include navigation bar or other UI element allowing users to navigate between routes
  • Connect the client and server using fetch()

Component Heirarchy

  • App
    • About
    • Cakes
      • CakeCard
    • ShoppingCart
    • CheckOut
    • Favorites
      • FavoriteCard
    • Login
    • Home
    • Signup
    • MyPage
      • PastOrderCard
        • PastCakeCard
          • ReviewForm
      • MyPagePreviewCard
    • Error
    • Nav
    • Review
      • ReviewCard
    • Signup

Backend Information

Project Requirements

  • Have at least three models on the backend
  • Include at least two one-to-many relationships
  • Include at least one reciprocal many-to-many relationship
  • Full CRUD actions for at least one resource
  • Minimum of create and read actions for each resource

Models

cake_shop_backend's People

Contributors

lululalaj avatar sarahbaughman avatar

Watchers

 avatar

Forkers

sarahbaughman

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.