https://github.com/dnmore/crave-waves
restaurant application built with React, Firebase, and Redux
https://github.com/dnmore/crave-waves
firebase reactjs redux-toolkit sass styled-components
Last synced: 3 months ago
JSON representation
restaurant application built with React, Firebase, and Redux
- Host: GitHub
- URL: https://github.com/dnmore/crave-waves
- Owner: dnmore
- Created: 2024-02-13T09:55:11.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-10-29T14:46:19.000Z (8 months ago)
- Last Synced: 2024-10-29T17:34:22.306Z (8 months ago)
- Topics: firebase, reactjs, redux-toolkit, sass, styled-components
- Language: JavaScript
- Homepage:
- Size: 5.06 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🍔Cravewaves - Restaurant Application
## Overview
CraveWaves is a responsive, full-stack fictional restaurant application built to provide users with an engaging, streamlined dining experience online. Developed with a modern tech stack of React, Firebase, and Redux, the app offers a user-friendly interface and robust functionality, allowing users to browse a dynamic menu, authenticate, manage their cart, and securely complete transactions through Stripe integration. CraveWaves provides a seamless and delightful user experience enriched with Framer Motion animations.
## 🚀 Features
* **Explore the Menu** – Easily browse a curated menu with a range of delectable dishes.
* **User Authentication**:
– Secure Sign-up and Login functionality for personalized experience.
* **Cart Management** – Add items to the cart with preview of the selected items.
* **Checkout with total Cost** – Adjust quantities with real-time updates to the total.
* **Stripe Checkout Integration**: – Smooth, secure payment processing with Stripe, ensuring a trustworthy checkout experience.
* **Protected Routes** - Access to checkout only for authenticated users.
* **Responsive Design** – Optimized for mobile, tablet, and desktop screens.
* **Framer Motion Animations** - Enjoy smooth page transitions and responsive button effects for a delightful interaction.
* **React-icons Integration** – Intuitive and visually cohesive icons across the app for improved navigation and user experience.
## 🛠️ Tech Stack
* `React`– A powerful front-end library for building user interfaces.
* `TypeScript` – Enhances the project with static typing, improving code quality and maintainability.
* `SASS` – CSS preprocessor for modular and scalable styling.
* `Redux` - State management for efficiently handling global app state.
* `Framer Motion` - For smooth page transitions and button hover/active effects.
* `Firebase`– Backend as a service for authentication and database.
* `Stripe API` – Integrated payment processing for a secure and reliable checkout.
* `Styled Components`– Custom styling for React components with scoped and reusable styles.
* `Hamburger-React` - A sleek, animated hamburger menu component for mobile navigation.
* `React-icons` – A robust library of icons for visually cohesive and intuitive navigation.
* `dotenv` – Secure environment variable management.
## ⚙️ Getting Started
### Installation
To get started with CraveWaves:
1.**Clone the Repository and Install Dependencies:**
```
$ git clone https://github.com/dnmore/crave-waves.git
$ npm install
```
2. **Configure Firebase and Stripe:**
- **Firebase**: Create a Firebase project and enable authentication. Add your Firebase credentials to the project by creating a `.env` file to securely store Firebase API keys.
- **Stripe**: Set up a Stripe account and add your Stripe API keys to the `.env` file.
### Running the Application
To start the development server, run:
```
$ npm start
```
The server will be running on `http://localhost:3000/`
## 📄 License
This project is licensed under the MIT License.