Skip to content

FredH2O/Bakery-Shop

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

47 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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 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 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!