- Starbucks ☕️ Web Application Clone using React, React-Router, Firebase, Redux, Material-UI, React-hook-forms (for simple form validation), react-awesome-reveal, react-google-maps and the Framer Motion API.
Demo: Link
-
Home Page
-
Sign Up Page
-
Login Page
-
Menu Page
-
Featured Page
-
Rewards Page
-
Today's Spl Page
-
Gift Cards Page
-
Footer Component
-
Map Component
- React
- Redux
- web client & client data management
- Node.js
- Web server & services in service oriented architecure
- Firebase
- Firebase helps you build and run successful apps
- Framer-Motion
- A production-ready motion library for React.
- Material Ui
- React components for faster and easier web development. Build your own design system, or start with Material Design.
- React-Awesome-Reveal
- React Awesome Reveal is a library for React apps written in TypeScript that adds reveal animations using the Intersection Observer API to detect when the elements appear in the viewport.
- Animations are internally provided by Emotion and implemented as CSS Animations to benefit from hardware acceleration.
- React-Hook-Form
- Performant, flexible and extensible forms with easy-to-use validation.
- React-Elastic-Carousel
- A flexible and responsive carousel component for react
- React-Google-Maps
- google-map-react is a component written over a small set of the Google Maps API.
- It allows you to render any React component on the Google Map.
- use-places-autocomplete
- This is a React hook for Google Maps Places Autocomplete, which helps you build a UI component with the feature of place autocomplete easily!
- By leveraging the power of Google Maps Places API, you can provide a great UX (user experience) for user interacts with your search bar or form etc.
- single page application web client with React & Redux & context
- home page with navigation bar, featured component, info component, footer component are displayed.
- if the user is logged in , order now button will display , insted of sign up and login buttons.
- firebase for user's database and authentication.
- menu pages comprises of all products, featured and today's spl. all products includes drinks, food, at home coffee and merchandise.
- featured menu page includes attractive foods, info about foods and drinks and spl discount items.
- today's spl menu page includes three drinks which is special for today, with attractive background color change and info about the drinks.
- rewards pages exactly looks like starbucks original application with tablist and form component.
- gift cards pages includes attractive gift cards made up of carousel component.
- find a store page includes google maps component with starbucks coffee icon as map icons, which can be used to search places within the range using use-places-autocomplete(right now in trial api)
- users can register and log in to their account
- attractive home page where users can able to register themselves for new account
- users can able to sign in and sign out from the application
- landing page has collections of menu items, featured items and today's spl items.
- users can able to browse through variety of information and delicious food items and coffee drinks in the featured page.
- users can able to view the details of the today's special drinks, when hovered on to each drink.
- users can able to view the attractive rewards options and its details in the rewards page(same as in Starbucks- original).
- users can able to slide through different gift cards available in the page.
- users can able to see the locations of starbucks company in the Find A Store page.
!important
- firebase.prod.js is required for setting up firebase environment for authentication, variables for this project
an example of firebase.prod.js file is located at src/lib directory.
| Tools | Versions |
|---|---|
| react | 7.0.2 |
| npm | 6.1.0 |
| firebase | 8.6.8 |
| material-ui | 4.11.4 |
| framer-motion | 4.1.17 |
| react-awesome-reveal | 3.8.1 |
| react-elastic-carousel | 3.8.1 |
| react-router-dom | 5.2.0 |
| @react-google-maps/api | 2.2.0 |
| react-hook-form | 6.14.2 |
| react-redux | 7.2.4 |
| use-media | 1.4.0 |
| use-place-autocomplete | 1.9.3 |
- install dependencies
npm install
- start the project
npm start
Application will be serving on http://localhost:3000
- Build
npm run build
- refer firebase docs for deployment
firebase login
Firebase will ask for your login details
- deploy to firebase
firebase deploy
- Prem Balaji B
- Licencesed under PremBalaji B