Skip to content

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.

Notifications You must be signed in to change notification settings

Prem3997/Starbucks-Clone

Repository files navigation

Starbucks Clone

  • 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.

Quick Links

Demo

Tech Stack

Implementation Hightlights

Getting Started

Deployment

Author


Demo

Live Site Demo

Demo: Link

Project Screenshots

  • Home Page HomePage HomePage1 HomePage2 HomePage3 HomePage4

  • Sign Up Page SignUp

  • Login Page Login

  • Menu Page Menu Menu2

  • Featured Page Featured Featured2

  • Rewards Page Rewards Rewards2 Rewards3 TabList Rewards4 Rewards5

  • Today's Spl Page TodaySpl TodaySpl2 TodaySpl3

  • Gift Cards Page GiftCards GiftCards2

  • Footer Component Footer

  • Map Component MapsComponent MapsPlaceHolder


Tech Stack

  • 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.

Implementation Highlights

  • 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)

User Stories

  • 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.

Getting Started

Prerequisites

!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

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

Running Project

  • install dependencies
npm install
  • start the project
npm start

Application will be serving on http://localhost:3000

Building Application

  • Build
npm run build

Application will be built on build folder

Deployment

  • refer firebase docs for deployment
firebase login

Firebase will ask for your login details

  • deploy to firebase
firebase deploy

Author

  • Prem Balaji B

License

  • Licencesed under PremBalaji B

About

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.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published