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