Skip to content

saleh-coder/pizza-menu

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

24 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

Project: Fast React Pizza Co.

A simple and responsive pizza menu built with the React library. This project demonstrates the fundamentals of creating React components, passing props, conditional rendering, and handling lists.

Overview

This application displays a menu of pizzas with their names, ingredients, prices, and images. It also indicates when a pizza is sold out and informs about the pizzeria's opening hours, allowing (in the future) for online ordering.

Technologies Used

  • React: A JavaScript library for building user interfaces.
  • JSX: A syntax extension to JavaScript recommended for use with React.
  • CSS: For styling the components (the index.css file is included).

Key Learning Points

  • Conditional rendering using the ternary operator to show alternative UI elements.
  • Using template literals for dynamic class names in JSX.
  • Component-based architecture with clear separation of concerns.
  • Handling lists and keys properly when rendering arrays in React.
  • Managing component props for reusable and clean code.

How to Run Locally

  1. Make sure you have Node.js and npm (or yarn) installed on your machine.
  2. Clone this repository to your computer:
    git clone <YOUR_REPOSITORY_URL>
  3. Navigate to the project directory in your terminal:
    cd pizza-menu
  4. Install the dependencies:
    npm install
    # or
    yarn install
  5. Start the development server:
    npm start
    # or
    yarn start
  6. Open your browser at http://localhost:3000 to see the application running.

Current Features

  • Display of a list of pizzas with name, ingredients, price, and image.
  • Visual indication of sold-out pizzas.
  • Information about the pizzeria's opening hours.
  • An "Order" button (future functionality).

Planned Next Steps

  • Implement the functionality of the "Order" button.
  • Add a shopping cart.
  • Improve styling and responsiveness.
  • Potentially integrate data from a backend.

Learning

This project is part of my React learning journey and serves as practice for understanding component lifecycle, data manipulation, and building dynamic interfaces.

Contribution

As this is a personal learning project, external contributions are not expected at this time.


Feel free to copy and paste this content into your README.md file. Remember to replace <YOUR_REPOSITORY_URL> with the actual URL of your repository on GitHub.