Skip to content

This is the front-end application for my hamburger shop project

License

Notifications You must be signed in to change notification settings

IgorCastilhos/hamburgershop-web

Repository files navigation

🍔 Front-End Hamburger Shop App

☀️ Light Mode Theme

Demo_Hamburger_Shop_Light.mp4

🌕 Dark Mode Theme

Demo_Hamburger_Shop_Dark.mp4

Restaurant Management Dashboard

Description

The Restaurant Management Dashboard is a web application designed for restaurant managers to create an account, view key metrics about their restaurant, and make data-driven decisions. The platform provides insights into various aspects of the restaurant's performance, such as sales, customer name, phone, most popular products, and more.

Features

  • Account Management: Create and manage a manager account with secure authentication.
  • Metrics Dashboard: View comprehensive metrics and reports about the restaurant's performance.
  • User-Friendly Interface: Intuitive and responsive design for easy navigation and data visualization.
  • Data Filtering and Sorting: Easily filter and sort data to focus on specific metrics.
  • Notification System: Receive alerts and notifications for important events and metrics.

Technologies Used

Frontend

  • React: A JavaScript library for building user interfaces.
  • React DOM: Serves as the entry point to the DOM and server renderers for React.
  • React Router DOM: Declarative routing for React applications.
  • React Hook Form: Performant, flexible, and extensible forms with easy-to-use validation.
  • React Icons: Popular icons to enhance the user interface.
  • React Helmet Async: Manage document head using a React component.
  • @hookform/resolvers: Resolver support for external validation libraries like Yup, Zod, and more.
  • @radix-ui/react-dialog: Radix UI components for accessible dialogs.
  • @radix-ui/react-dropdown-menu: Radix UI components for accessible dropdown menus.
  • @radix-ui/react-icons: Radix UI icon set.
  • @radix-ui/react-label: Radix UI components for accessible labels.
  • @radix-ui/react-popover: Radix UI components for accessible popovers.
  • @radix-ui/react-select: Radix UI components for accessible select menus.
  • @radix-ui/react-separator: Radix UI components for accessible separators.
  • @radix-ui/react-slot: Radix UI components for accessible slots.
  • @tanstack/react-query: Powerful data synchronization and caching for React.
  • axios: Promise-based HTTP client for the browser and Node.js.
  • class-variance-authority: Utility for managing variants in CSS classes.
  • clsx: Utility for constructing className strings conditionally.
  • date-fns: Modern JavaScript date utility library.
  • localforage: Offline storage, improved.
  • lucide-react: A collection of simply beautiful open-source icons.
  • match-sorter: Simple utility for fuzzy filtering and sorting arrays.
  • react-day-picker: Flexible date picker component.
  • recharts: A composable charting library built on React components.
  • sonner: Notification library for React.
  • sort-by: Utility for sorting arrays by property names.
  • tailwind-merge: Utility to merge Tailwind CSS classes.
  • tailwindcss-animate: Tailwind CSS plugin for animations.

Backend

  • Vite: Next Generation Frontend Tooling for blazing fast builds.
  • TypeScript: A strongly typed programming language that builds on JavaScript.
  • PostCSS: A tool for transforming CSS with JavaScript plugins.
  • autoprefixer: A PostCSS plugin to parse CSS and add vendor prefixes.
  • tailwindcss: A utility-first CSS framework for rapid UI development.

Testing

  • @testing-library/jest-dom: Custom jest matchers to test the state of the DOM.
  • @testing-library/react: Simple and complete React DOM testing utilities.
  • happy-dom: A fast and minimalistic DOM for testing and SSR.
  • vitest: A Vite-native unit test framework.

Getting Started

Prerequisites

  • Node.js (v14 or higher)
  • npm or yarn

Installation

  1. Clone the repository:

    git clone https://github.com/IgorCastilhos/hamburgershop-web.git
  2. Navigate to the project directory:

    cd hamburgershop-web
  3. Install dependencies:

    npm install

Running the Application

  1. Start the development server:

    npm run dev
  2. Open your browser and visit http://localhost:5173 to see the application in action.

License

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


Feel free to reach out if you have any questions or need further assistance!