https://github.com/fredh2o/bakery-shop

Simple bakery website.
https://github.com/fredh2o/bakery-shop

css-framework css3 html5 javascript

Last synced: about 1 month ago
JSON representation

Simple bakery website.

• Host: GitHub
• URL: https://github.com/fredh2o/bakery-shop
• Owner: FredH2O
• Created: 2024-09-01T16:24:11.000Z (4 months ago)
• Default Branch: main
• Last Pushed: 2024-09-24T17:14:57.000Z (4 months ago)
• Last Synced: 2024-12-05T09:17:00.531Z (about 1 month ago)
• Topics: css-framework, css3, html5, javascript
• Language: JavaScript
• Homepage: https://fredh2o.github.io/Bakery-Shop/
• Size: 5.6 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Official Bakery Shop

Welcome to the **Official Bakery Shop** project! This is a React-based web application where you can explore different bakery categories and items like cakes, pastries, and more. The project is a practice ground for learning key concepts of React, along with incorporating modern frontend tools and libraries.

## Features

- **Category Selection**: Choose from different categories like cakes, pastries, and more.

- **Item Cards**: View detailed bakery item cards, including images, descriptions, and prices.

- **Add to Cart**: Add items to your cart and see the cart update dynamically.

- **Responsive Design**: Built with Bootstrap for mobile and desktop responsiveness.

- **Modal Interactions**: Open modal windows to view more item details.

- **Sass Integration**: Styling is managed using Sass for easy customization.

## Tech Stack

- **React**: For building interactive UI components.

- **Bootstrap**: For styling and layout responsiveness.

- **FontAwesome**: For adding icons to the app.

- **Sass**: For enhanced styling with variables and mixins.

- **JavaScript (ES6+)**: Using modern JavaScript features like the spread operator and destructuring.

## React Concepts Practiced

- **Component-based Architecture**: Breaking down the UI into reusable components.

- **State Management**: Using `useState` to manage categories and the cart system.

- **Props**: Passing data between components using props and spreading properties (`...props`).

- **Event Handling**: Handling click events, such as adding items to the cart.

- **Conditional Rendering**: Displaying components based on user interaction.

## Available Scripts

In the project directory, you can run:

### `npm start`

Runs the app in development mode.\

Open [http://localhost:3000](http://localhost:3000) to view it in your browser.

The page will reload if you make edits.\

You will also see any lint errors in the console.

### `npm test`

Launches the test runner in the interactive watch mode. See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.

### `npm run build`

Builds the app for production to the `build` folder.\

It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified, and filenames include the hashes.\

Your app is ready to be deployed!