Skip to content

JorPV/React-Chakra_app

Repository files navigation

Drinks Explorer

A React application for browsing and selecting drinks, built with Chakra UI for a polished, responsive interface.

Features

  • Browse a collection of drinks with images
  • Search drinks by name
  • View drink details in a modal
  • Select and manage drink choices
  • Responsive card-based layout

Tech Stack

React Chakra UI Vite

  • React 18 for the UI
  • Chakra UI for component styling
  • Framer Motion for animations
  • Vite for fast development and bundling

Getting Started

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

Project Structure

src/
├── App.jsx
├── components/
│   ├── DrinkChoice.jsx
│   ├── DrinkItem.jsx
│   ├── DrinkList.jsx
│   ├── DrinkSearch.jsx
│   ├── DrinkSelectModal.jsx
│   └── UI/
│       ├── Button.jsx
│       └── TextInput.jsx
└── utils/
    ├── data.js           # Drink dataset
    └── images/           # Drink photos

About

Drinks explorer app built with React 18 and Chakra UI

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors