https://github.com/devraider/react-pizza-menu
🍕 A React-based Pizza Menu application built to solidify modern React concepts like components, props, conditional rendering, and ES6 JavaScript. Styled with CSS Modules for modularity and focused on simplicity to track changes easily. Developed as part of learning journey.
https://github.com/devraider/react-pizza-menu
Last synced: 6 days ago
JSON representation
🍕 A React-based Pizza Menu application built to solidify modern React concepts like components, props, conditional rendering, and ES6 JavaScript. Styled with CSS Modules for modularity and focused on simplicity to track changes easily. Developed as part of learning journey.
- Host: GitHub
- URL: https://github.com/devraider/react-pizza-menu
- Owner: devraider
- Created: 2024-12-30T20:29:06.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-01T19:52:46.000Z (over 1 year ago)
- Last Synced: 2025-01-07T17:38:40.742Z (over 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 828 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ReactJS Pizza Application 🍕
## Motivation
This Pizza Menu project is a ReactJS based application, developed as part of my journey to master and solidfy basic [React](https://react.dev/) concepts, such as _components_ and _props_. It marks my first application in a series of development projects inspired by the Udemy course [The Ultimate React Course](https://www.udemy.com/course/the-ultimate-react-course).
Additionally, this project serves to solidify the foundational knowledge I acquired by completing the official [React](https://react.dev/) documentation's under [Learn section](https://react.dev/learn).
This project combines theory with practice, aiming to build a solid foundation for more complex React applications in the future.
## Features ✨
1. [**ReactJS**](https://react.dev/) - v18.3;
2. **CSS Modules** - Used for styling individual components;
3. **JavaScript (ES6)** - Utilized modern JavaScript features such as array methods, template literals, and destructuring for cleaner and more efficient code.
### Component Structure 🛠️
All components are located under the `App.jsx` file. This decision was intentional, allowing everything to remain in one place for easier tracking of changes during the development process. It simplified the focus on core concepts such as:
- Implementing **props** to pass data between components.
- Structuring reusable **components** for modular design.
- Using **conditional rendering** to dynamically display content based on application state.
- Traversing arrays efficiently using **map** and other ES6 array methods.
- Leveraging **ternary operators** for concise conditional logic within JSX.
This structure prioritizes simplicity and focus while solidifying key React fundamentals.
## Demo / Walkthrough
## How to Get and Run the Application 🛠️
### 1. Clone the application
```bash
git clone https://github.com/username/react-pizza-app.git
cd react-pizza-app
```
### 2. Install Dependencies
```bash
npm install
```
### 3. Run application in developemnt mode
```bash
npm start
```
### 4. Build for Production
```bash
npm run build
```
## Credits
- [**Facebook React Team**](https://github.com/facebook/react) for great documentation: [Learn React from Docs](https://react.dev/learn)
- 🧑🏫 [**Jonas Schmedtmann**](https://github.com/jonasschmedtmann)
- 🎓 [The Ultimate React Course 2024: React, Next.js, Redux & More](https://www.udemy.com/course/the-ultimate-react-course/)