Loco Musica

Loco Musica is a versatile food ordering and recipe management application. Whether you want to order delicious food, get AI-generated recipes, or save your favorite recipes, Loco Musica has got you covered. Built from scratch using React, Parcel, and hosted on Vercel, this application is designed for seamless user experience and high performance.

Features

• Food Ordering: Browse and order food from a variety of cuisines.
• AI-Generated Recipes: Get unique recipes generated using AI.
• Save Recipes: Save your favorite recipes and access them anytime.
• User Login: Use useContext for login functionality and to save user info.
• Shopping Cart: Store selected items in the cart using Redux. View the cart from the cart page, which also shows the count of items.
• Recipe Store: Store and manage recipes using Redux. Use the Accordion Menu to view saved recipes.
• Profile Info Toggle: Toggle button to view user profile information.
• Unique Shimmer UI: Unique loading animations for home, menu, and recipe pages to enhance user experience.
• About Page: Information about the application along with our mascot.
• Contact Page: Contains social media links and a form to send feedback.
• Header and Footer: Header with a mascot logo linking to the home route, and a footer showing our values and a welcome message for logged-in users or guests.
• Network Status Bar: Indicates whether the user is online or offline.
• Search Bar: Filter food items on the home page.
• Performance Enhancements: Uses Error Boundary, Suspense, and lazy loading for improved performance.
• Testing: Comprehensive testing with Jest.
• Design: Uses Tailwind CSS as the major design tool for rapid and responsive UI development.
• Development Environment: Utilizes GitHub Codespaces for a cloud-based development environment.

Pages

• Home: Features a search bar, unique shimmer UI, and links to various sections of the app.
• About: Provides detailed information about Loco Musica and our mascot.
• Contact: Contains social media links and a feedback form.
• Recipe Store: View and manage your saved recipes with a count of items displayed.
• Cart: View items in your cart with the count of items displayed.

Getting Started

Prerequisites

• Node.js
• npm or yarn

Installation

1. Clone the repository:

   git clone https://github.com/your-username/loco-musica.git

2. Navigate to the project directory:

   cd loco-musica

3. Install dependencies:

   npm install

   or

   yarn install

Running the Application

1. Start the development server:

   npm start

   or

   yarn start

2. Open your browser and go to http://localhost:1234 to view the application.

Using GitHub Codespaces

1. Open the repository on GitHub.
2. Click on the Code button, then click Open with Codespaces.
3. Follow the instructions to set up your Codespace environment.

Using Docker

1. Navigate to the project directory.

   cd loco-musica

2. Run this command in terminal:

   docker compose watch

Building for Production

1. Build the project:

   npm run build

   or

   yarn build

Testing

Run tests using Jest:

npm test

or

yarn test

Deployment

This application is hosted on Vercel. Follow these steps to deploy:

1. Commit your changes to your Git repository.
2. Push your repository to Vercel using their CLI or web interface.

Contributing

We welcome contributions! Please fork the repository and submit a pull request for any improvements or bug fixes.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgements

• Thanks to the open-source community for providing essential libraries and tools , and namaste react course for provide deep knowleadge in react "

Contact

For feedback, questions, or suggestions, please use the contact form on the Contact page or reach out through our social media links.

---

Feel free to customize this README further to suit your specific needs and preferences.