-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
6 changed files
with
136 additions
and
141 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,9 +1,9 @@ | ||
| robots.txt,1704317867733,391d14b3c2f8c9143a27a28c7399585142228d4d1bdbe2c87ac946de411fa9a2 | ||
| asset-manifest.json,1704317878551,552ff20ce3d0c8962b5b892f9089ef1613187657ff10e0bfa2089c6b17167749 | ||
| index.html,1704317878551,a2d99c4c7627383f24aef1362be88d79b56302085ae87e7d1c2817f58846f8a7 | ||
| static/js/main.5047b626.js.LICENSE.txt,1704317878561,3088b2eb2ae1accc41f60bf9f6538018212744ee4009a96d35cf97da8919ec63 | ||
| manifest.json,1704317867732,c0938720335a178ab29706477eca87f501876d066780a72e9870a4c4cdbc23a5 | ||
| static/css/main.c19dc580.css,1704317878561,b47620c0de85e23ea577e007062829af049bbd93679d85428a60b1cc3ff21e5e | ||
| static/js/main.5047b626.js,1704317878561,2b90aae22715111305c9ff5d72df0b396d617ecbaaed21362f9fbd3efa7a9b85 | ||
| static/css/main.c19dc580.css.map,1704317878561,2e9ceecc63011f68875eaa38f56a0e5d76c1e6d74e52476fd108e7f94a8d0a34 | ||
| static/js/main.5047b626.js.map,1704317878561,814896159c3e8caa6ac1ae378c94b5440808376d947f5b0f396bf60b35e7a46d | ||
| asset-manifest.json,1704369240411,552ff20ce3d0c8962b5b892f9089ef1613187657ff10e0bfa2089c6b17167749 | ||
| index.html,1704369240411,a2d99c4c7627383f24aef1362be88d79b56302085ae87e7d1c2817f58846f8a7 | ||
| manifest.json,1704369229973,c0938720335a178ab29706477eca87f501876d066780a72e9870a4c4cdbc23a5 | ||
| robots.txt,1704369229974,391d14b3c2f8c9143a27a28c7399585142228d4d1bdbe2c87ac946de411fa9a2 | ||
| static/js/main.5047b626.js.LICENSE.txt,1704369240419,3088b2eb2ae1accc41f60bf9f6538018212744ee4009a96d35cf97da8919ec63 | ||
| static/css/main.c19dc580.css,1704369240419,b47620c0de85e23ea577e007062829af049bbd93679d85428a60b1cc3ff21e5e | ||
| static/js/main.5047b626.js,1704369240420,2b90aae22715111305c9ff5d72df0b396d617ecbaaed21362f9fbd3efa7a9b85 | ||
| static/css/main.c19dc580.css.map,1704369240420,2e9ceecc63011f68875eaa38f56a0e5d76c1e6d74e52476fd108e7f94a8d0a34 | ||
| static/js/main.5047b626.js.map,1704369240420,814896159c3e8caa6ac1ae378c94b5440808376d947f5b0f396bf60b35e7a46d |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,11 +1,11 @@ | ||
| asset-manifest.json,1704317892181,9ff0bfb22e6fbb6666ca6a6e2008dec71ff9d69566d2af9004186cc88c2a0d07 | ||
| index.html,1704317892181,efed5fc860ff2a6201433b110ff949d6460411d665eef4bc7352d89644c36cd0 | ||
| robots.txt,1704317880866,391d14b3c2f8c9143a27a28c7399585142228d4d1bdbe2c87ac946de411fa9a2 | ||
| static/js/787.1cd31a9e.chunk.js,1704317892190,50f551f32217ddfd37025c8d07d7b518dcbd73a7b88f5e85f73fcdf684542e1a | ||
| static/js/main.c7b77b84.js.LICENSE.txt,1704317892192,cfb0802044c58e95dc08a547656f4624fb4fd8f51d221a33cce0ce75d8145844 | ||
| static/js/787.1cd31a9e.chunk.js.map,1704317892190,eff41c5f1eab5b12871c9235f2655c34487f9261d9d6567bce51efc66e78740a | ||
| manifest.json,1704317880866,d8a4db5be2118b682e68e966ab5c890aeb5dd65f19ec2034f1819d46fe48ba13 | ||
| static/css/main.a30cdd68.css,1704317892190,011f1a232173dd1c057ac690f8494d4a20eec607e6dcf2df936b30d06cd9c44a | ||
| static/js/main.c7b77b84.js,1704317892191,fe5b14c227b6721d46c525ad776c28936117835472d3cbf4d05ba524022beda1 | ||
| static/css/main.a30cdd68.css.map,1704317892190,275edd73290ab3442dd02da5f3e62b29b7276ac02a24176e69bf195b858cbc5f | ||
| static/js/main.c7b77b84.js.map,1704317892191,04fa8a1eed2183d0ad774adde1c206e077d859b380fbff28543c76d1144a2ff6 | ||
| asset-manifest.json,1704369254100,9ff0bfb22e6fbb6666ca6a6e2008dec71ff9d69566d2af9004186cc88c2a0d07 | ||
| index.html,1704369254100,efed5fc860ff2a6201433b110ff949d6460411d665eef4bc7352d89644c36cd0 | ||
| robots.txt,1704369243067,391d14b3c2f8c9143a27a28c7399585142228d4d1bdbe2c87ac946de411fa9a2 | ||
| manifest.json,1704369243066,d8a4db5be2118b682e68e966ab5c890aeb5dd65f19ec2034f1819d46fe48ba13 | ||
| static/js/787.1cd31a9e.chunk.js,1704369254110,50f551f32217ddfd37025c8d07d7b518dcbd73a7b88f5e85f73fcdf684542e1a | ||
| static/js/main.c7b77b84.js.LICENSE.txt,1704369254110,cfb0802044c58e95dc08a547656f4624fb4fd8f51d221a33cce0ce75d8145844 | ||
| static/js/787.1cd31a9e.chunk.js.map,1704369254110,eff41c5f1eab5b12871c9235f2655c34487f9261d9d6567bce51efc66e78740a | ||
| static/css/main.a30cdd68.css,1704369254109,011f1a232173dd1c057ac690f8494d4a20eec607e6dcf2df936b30d06cd9c44a | ||
| static/js/main.c7b77b84.js,1704369254109,fe5b14c227b6721d46c525ad776c28936117835472d3cbf4d05ba524022beda1 | ||
| static/css/main.a30cdd68.css.map,1704369254111,275edd73290ab3442dd02da5f3e62b29b7276ac02a24176e69bf195b858cbc5f | ||
| static/js/main.c7b77b84.js.map,1704369254110,04fa8a1eed2183d0ad774adde1c206e077d859b380fbff28543c76d1144a2ff6 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,62 @@ | ||
| ## CrispyByte - Revolutionizing Restaurant Operations with React and Firebase | ||
|
|
||
| **Overview:** | ||
| CrispyByte is an innovative platform designed to streamline restaurant operations, offering a feature-rich application and dashboard for seamless order management. The project is built using React through the Create React App package, with Firebase serving as the backbone for real-time data storage, analytics, image hosting, and efficient deployment. | ||
|
|
||
| **App Structure:** | ||
|
|
||
| *The CrispyByte platform has been carefully designed to provide an intuitive and comprehensive experience for both customers and waitstaff, ensuring a seamless and personalized interaction.* | ||
|
|
||
| 1. **Customer Interface:** | ||
| - **QR Code Access:** Customers access the app through a QR code, directing them straight to the website and automatically setting the specific table. | ||
| - **Intuitive Navigation:** Once inside, the app is structured into categories such as appetizers, first courses, main courses, desserts, beverages, and more. Customers can easily explore sections and view dishes with image previews, detailed descriptions, and information customized by the restaurant owner. | ||
|
|
||
| 2. **Selection and Ordering:** | ||
| - **Full Customization:** Each customer can select dishes, view images, read descriptions, and further customize choices, such as ingredients, allergens, vegan options, etc. | ||
| - **Summary and Confirmation:** After selecting dishes, customers view an order summary with the total, facilitating review before confirming the order. | ||
|
|
||
| 3. **Waitstaff Dashboard:** | ||
| - **Secure Access:** Waitstaff access the dashboard through password-protected accounts, ensuring the security and privacy of operations. | ||
| - **Order Management:** The "Orders" section displays orders in chronological order, with details on tables, costs, and dishes to be served. Waitstaff can update the status of orders and mark them as completed. | ||
| - **Table Management:** The "Tables" section allows cashiers to view completed orders associated with each table and streamlines the payment and order closing process. | ||
|
|
||
| **Key Technologies Used:** | ||
|
|
||
| 1. **React and Create React App:** | ||
| - The frontend of CrispyByte is developed using React, leveraging the Create React App package for an organized and efficient project structure. This allows for a responsive and dynamic user interface. | ||
|
|
||
| 2. **Firebase Database:** | ||
| - Firebase is utilized for the database, enabling the secure storage of orders on the server. The real-time nature of Firebase ensures instant updates across all connected devices. | ||
|
|
||
| 3. **Firebase Storage:** | ||
| - Firebase Storage is employed to host and serve images. Images are fetched on-demand, significantly reducing loading times and optimizing the overall user experience. | ||
|
|
||
| 4. **Firebase Analytics:** | ||
| - Firebase Analytics is integrated to provide restaurant owners with valuable insights. This includes detailed statistics such as popular dishes, average order times, daily, weekly, and monthly user counts, peak hours, and customer retention data. | ||
|
|
||
| 5. **Firebase Hosting:** | ||
| - The application and dashboard are deployed using Firebase Hosting, ensuring reliable and scalable hosting for both the customer-facing app and the backend dashboard. | ||
|
|
||
| 6. **Firebase Auth:** | ||
| - Firebase Authentication safeguards the CrispyByte dashboard with password-protected accounts, permitting only authorized access. | ||
|
|
||
| 7. **React-Spring for Animations:** | ||
| - React-Spring, a powerful animation library for React, is employed to enhance the user interface with smooth and visually appealing animations, elevating the overall user experience. | ||
|
|
||
| **Project Customization and Adaptability:** | ||
|
|
||
| - **Unified Data Management:** | ||
| - The project incorporates a unified data.json file, storing all essential data. During each deployment, this file is synchronized for both the customer app and the dashboard, simplifying updates and ensuring consistency across both sites. | ||
|
|
||
| - **Easy Adaptability for Restaurant Modifications:** | ||
| - Through careful architectural decisions, CrispyByte is designed to be easily adaptable to restaurant modifications. The use of a single data file and synchronized deployment streamlines the process for restaurateurs, allowing quick and efficient updates to the menu and other crucial information. | ||
|
|
||
| **Enhanced User Experience:** | ||
|
|
||
| - **Responsiveness and Adaptability:** | ||
| - Both the customer app and the dashboard boast a high level of responsiveness, ensuring adaptability to various screen sizes and resolutions. The layout adjusts seamlessly, providing an optimal viewing experience on any device. | ||
|
|
||
| - **Accessibility Features:** | ||
| - CrispyByte places a strong emphasis on accessibility, making the sites easily navigable for individuals with visual impairments. Attention to accessibility standards ensures a user-friendly experience for all users, regardless of their abilities. | ||
|
|
||
| *CrispyByte offers not just a technological advancement in restaurant management but also a commitment to simplicity, efficiency, adaptability, and inclusivity. The integration of React, Firebase, and additional libraries ensures a robust and user-friendly solution for restaurant owners seeking a modern and customizable digital platform.* |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,70 +1,39 @@ | ||
| # Getting Started with Create React App | ||
| ## CrispyByte App: Revolutionizing the Dining Experience | ||
|
|
||
| This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). | ||
| ### Introduction: | ||
|
|
||
| ## Available Scripts | ||
| CrispyByte emerges as an innovative platform designed to radically transform the dining experience, providing an advanced digital solution that offers complete customization for restaurants. The goal is to replace traditional paper menus and simplify the ordering process, offering customers an engaging and tailored digital experience. | ||
|
|
||
| In the project directory, you can run: | ||
| ### Key Platform Features: | ||
|
|
||
| ### `npm start` | ||
| **1. QR Code Accessibility:** | ||
| - CrispyByte employs a QR code to connect with customers, allowing easy access to the platform's website and automatically associating with the specific table. | ||
|
|
||
| Runs the app in the development mode.\ | ||
| Open [http://localhost:3000](http://localhost:3000) to view it in your browser. | ||
| **2. Intuitive Menu Navigation:** | ||
| - The user interface offers organized sections and groups by food type (appetizers, first courses, main courses, desserts, beverages, sides, etc.). | ||
| - Restaurant owners can fully customize categories, dishes, names, and images, offering a unique and brand-faithful menu. | ||
|
|
||
| The page will reload when you make changes.\ | ||
| You may also see any lint errors in the console. | ||
| **3. Extensive Customization:** | ||
| - Dish details are entirely customizable by the business owner, allowing the addition of specific information such as ingredients, allergens, indications for vegan options, etc. | ||
| - The platform allows color customization, enabling restaurants to adapt the app's appearance to their brand identity. | ||
|
|
||
| ### `npm test` | ||
| **4. Brand Logo and Colors:** | ||
| - Owners can insert their logo, ensuring a visual presence for the brand. | ||
| - App colors can be personalized to reflect the restaurant's aesthetics and image. | ||
|
|
||
| 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. | ||
| **5. Intuitive Ordering Process:** | ||
| - Customers can select desired dishes, view presentation images, read personalized descriptions, choose quantities, and easily add items to their order. | ||
|
|
||
| ### `npm run build` | ||
| **6. Order Summary and Confirmation:** | ||
| - Users view a detailed summary of ordered products, including total costs, simplifying the order confirmation process. | ||
|
|
||
| Builds the app for production to the `build` folder.\ | ||
| It correctly bundles React in production mode and optimizes the build for the best performance. | ||
| ### Benefits for Business: | ||
|
|
||
| The build is minified and the filenames include the hashes.\ | ||
| Your app is ready to be deployed! | ||
| CrispyByte offers numerous advantages for businesses: | ||
| - **Maximum Flexibility:** Restaurants can customize every aspect of their menu, ensuring a unique offering tailored to customer needs. | ||
| - **Brand Promotion:** Inclusion of brand logos and colors contributes to promoting the visual presence of the restaurant. | ||
| - **Competitive Differentiation:** Complete customization sets the business apart, offering a cutting-edge service compared to competitors. | ||
|
|
||
| See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. | ||
| ### Conclusions: | ||
|
|
||
| ### `npm run eject` | ||
|
|
||
| **Note: this is a one-way operation. Once you `eject`, you can't go back!** | ||
|
|
||
| If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. | ||
|
|
||
| Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own. | ||
|
|
||
| You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it. | ||
|
|
||
| ## Learn More | ||
|
|
||
| You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). | ||
|
|
||
| To learn React, check out the [React documentation](https://reactjs.org/). | ||
|
|
||
| ### Code Splitting | ||
|
|
||
| This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting) | ||
|
|
||
| ### Analyzing the Bundle Size | ||
|
|
||
| This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size) | ||
|
|
||
| ### Making a Progressive Web App | ||
|
|
||
| This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app) | ||
|
|
||
| ### Advanced Configuration | ||
|
|
||
| This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration) | ||
|
|
||
| ### Deployment | ||
|
|
||
| This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment) | ||
|
|
||
| ### `npm run build` fails to minify | ||
|
|
||
| This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify) | ||
| CrispyByte positions itself as a strategic partner for businesses, offering a fully customizable digital experience. The platform not only simplifies the ordering process but also allows restaurants to create a distinctive online presence faithful to their corporate identity. |
Oops, something went wrong.