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.
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
Fork and clone:
- Frontend - https://github.com/LuluLalaJ/cake_shop_frontend
- Backend - https://github.com/LuluLalaJ/cake_shop_backend
Be sure to run both the backend and frontend for the full app experience.
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]
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
- 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()
- App
- About
- Cakes
- CakeCard
- ShoppingCart
- CheckOut
- Favorites
- FavoriteCard
- Login
- Home
- Signup
- MyPage
- PastOrderCard
- PastCakeCard
- ReviewForm
- PastCakeCard
- MyPagePreviewCard
- PastOrderCard
- Error
- Nav
- Review
- ReviewCard
- Signup
- 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