Coffee Shop Front

Libraries and Commands Used in This Project

1. Clone the project Repository

Clone this repository to your local machine:

git clone https://github.com/luisggf/coffee-shop-frontend
cd <repository-directory>

2. Install Project Dependencies

The package.json file is already configured with all the necessary dependencies. To install them, simply run:

npm install

3. Available Scripts

The following scripts are available in the package.json file:

• Start the development server:

  This command will start the Vite development server, enabling hot module replacement (HMR) and fast feedback during development.

  npm run dev

4. Key Dependencies

• React: Core library for building user interfaces.
• React DOM: The entry point for React into the DOM.
• React Router DOM: For handling routing in the application.
• TypeScript: For static typing in JavaScript.
• Vite: For fast and optimized development and build processes.
• Radix UI: For accessible and customizable UI components.
• Tailwind CSS: For utility-first CSS styling.
• Axios: For making HTTP requests to the backend API.
• Socket.io Client: For real-time communication with the backend.

5. Project Structure

The project is structured as follows:

src/
  ├── assets/            # SVG and Images used for styling
  ├── components/        # Reusable UI Components
  ├── App.tsx            # Main application component
  ├── main.tsx           # Application entry point
  └── index.html         # Main HTML file
  └── vite-env.d.ts

6. Styling

Tailwind CSS is used for styling the application. If you need to customize the default styles, you can modify the Tailwind configuration file (tailwind.config.js) in the project.

7. Running the Application

To run the application in development mode:

npm run dev

8. Connecting to the Backend

Ensure that the backend API is running and accessible.