This is my the Largest and the Best Project ( from React to Redux-Saga... ) // 02.2020 - 05.2020
I connected here a lot of technologies in one place:
... to show what I can create,
in over #3500 lines of written code.
JavaScript React.js Redux
Redux-Thunk Redux-Saga React Router
React Hooks React with GSAP Axios
Authentication with Token SASS / SCSS localStorage
CSS Modules CSS3 function* generator / yield
Babel ES6 REST API
Webpack HTML5 Firebase
I want to show the most important details and possibilities of my application here :) (only 2 min)
1. Start page & First animation to welcome the customer.
![Demo CountPages alpha](https://github.com/LukaszKolodziejski/XXXL_Make-and-Order-Hamburger/raw/master/src/assets/videos/1-start.gif)
2. Add ingredients and modified new price:
![Demo CountPages alpha](https://github.com/LukaszKolodziejski/XXXL_Make-and-Order-Hamburger/raw/master/src/assets/videos/2-add-ingredients.gif)
3. "Order Now" and show first purchase summary:
![Demo CountPages alpha](https://github.com/LukaszKolodziejski/XXXL_Make-and-Order-Hamburger/raw/master/src/assets/videos/3-order-now.gif)
4. Simple way from Purchase summary to Form:
![Demo CountPages alpha](https://github.com/LukaszKolodziejski/XXXL_Make-and-Order-Hamburger/raw/master/src/assets/videos/4-purchase-summary.gif)
5. Connected "order" and "form" to database in Firebase:
![Demo CountPages alpha](https://github.com/LukaszKolodziejski/XXXL_Make-and-Order-Hamburger/raw/master/src/assets/videos/5-database.gif)
6. No authentication === No Orders (Animation with GSAP):
![Demo CountPages alpha](https://github.com/LukaszKolodziejski/XXXL_Make-and-Order-Hamburger/raw/master/src/assets/videos/6-orders.gif)
7. Welcome Auth with GSAP
Redux is almost everywhere but time to || Redux-Thunk vs Redux-Saga ||
![Demo CountPages alpha](https://github.com/LukaszKolodziejski/XXXL_Make-and-Order-Hamburger/raw/master/src/assets/videos/7-auth.gif)
Or create new account (Sign Up)
![Demo CountPages alpha](https://github.com/LukaszKolodziejski/XXXL_Make-and-Order-Hamburger/raw/master/src/assets/videos/8-auth-sign-in.gif)
9. Show Orders ( Must be Authenticated ):
![Demo CountPages alpha](https://github.com/LukaszKolodziejski/XXXL_Make-and-Order-Hamburger/raw/master/src/assets/videos/9-orders-auth.gif)
10. Refresh page with Localstorage "Token -> 1h":
![Demo CountPages alpha](https://github.com/LukaszKolodziejski/XXXL_Make-and-Order-Hamburger/raw/master/src/assets/videos/10-refresh.gif)
11. Logout and redirect to /orders
![Demo CountPages alpha](https://github.com/LukaszKolodziejski/XXXL_Make-and-Order-Hamburger/raw/master/src/assets/videos/11-logout.gif)
12. All of steps work the same in all of screen size:
![Demo CountPages alpha](https://github.com/LukaszKolodziejski/XXXL_Make-and-Order-Hamburger/raw/master/src/assets/videos/12-screen-size.gif)
13. GSAP & SideDrawer in the Mobile:
![Demo CountPages alpha](https://github.com/LukaszKolodziejski/XXXL_Make-and-Order-Hamburger/raw/master/src/assets/videos/13-sidedrawer-mobile.gif)
14. Fast summary all of steps in mobile version:
![Demo CountPages alpha](https://github.com/LukaszKolodziejski/XXXL_Make-and-Order-Hamburger/raw/master/src/assets/videos/14-summary-mobile-version.gif)