{"id":18522639,"url":"https://github.com/hugoramonpereira/waitstaff-app","last_synced_at":"2025-05-14T18:30:37.911Z","repository":{"id":162774870,"uuid":"637206819","full_name":"HugoRamonPereira/Waitstaff-App","owner":"HugoRamonPereira","description":"Application for waiters and waitresses. With a full backend, web version to be controlled by the manager and also the mobile app for the waiters and waitresses to take and manage the orders.","archived":false,"fork":false,"pushed_at":"2023-10-11T01:32:55.000Z","size":49584,"stargazers_count":2,"open_issues_count":1,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-17T05:29:10.688Z","etag":null,"topics":["backend","mobile-app","order-management","restaurant-management","webapp","websockets"],"latest_commit_sha":null,"homepage":"https://waitstaff-app-3cul.vercel.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/HugoRamonPereira.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-05-06T20:49:45.000Z","updated_at":"2024-11-21T22:13:12.000Z","dependencies_parsed_at":"2024-11-06T17:51:03.405Z","dependency_job_id":null,"html_url":"https://github.com/HugoRamonPereira/Waitstaff-App","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HugoRamonPereira%2FWaitstaff-App","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HugoRamonPereira%2FWaitstaff-App/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HugoRamonPereira%2FWaitstaff-App/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HugoRamonPereira%2FWaitstaff-App/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/HugoRamonPereira","download_url":"https://codeload.github.com/HugoRamonPereira/Waitstaff-App/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254201704,"owners_count":22031604,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["backend","mobile-app","order-management","restaurant-management","webapp","websockets"],"created_at":"2024-11-06T17:32:27.572Z","updated_at":"2025-05-14T18:30:37.855Z","avatar_url":"https://github.com/HugoRamonPereira.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# This is the complete app for Waiters and Waitresses\n\n\u003cimg src='./Frontend/src/assets/images/waitstaff-demo.gif' /\u003e\n\u003cimg src=\"./Frontend/src/assets/images/Front-Web-Preview.png\" /\u003e\n\n## WAITSTAFF BACKEND - API\n### STACK USED TO BUILD THE PROJECT\n\n\u003cp align-items=\"center\" justify-content=\"center\"\u003e\n  \u003cimg src=\"./Frontend/src/assets/images/Backend-Waitstaff-Techstack.png\"\u003e\n\u003c/p\u003e\n\nOut backend is built using [Node.js](https://nodejs.org/) with [Express](https://expressjs.com/).\n\nThe Database we chose to implement in the Waitstaff app was [Mongo.db](https://www.mongodb.com/) with [Mongoose](https://www.npmjs.com/package/mongoose) as our ODM (Object Data Modelling).\n\nThe port we are using for the Database to be running is **27010** and we are using [Docker](https://www.docker.com/) to run it.\n\nWe separated the products in the models folder where it contains the categories, the products and also the orders.\n\nIn the use cases we separated the items above into folders where we have all the logic there and the logic is tied to the routes that invoke the logic in our use cases files.\n\nIn out products we are using images and to handle the upload of the images we are usign [Multer](https://www.npmjs.com/package/multer) which is a Node.js middleware to handle file upload, in our case images. Multer will intercept the request, acting as a middleware.\n\n## TO RUN THE PROJECT\n\nSince we are using [Yarn](https://yarnpkg.com/) as our Package Manager we will run the commands using **yarn**.\n\n- To run in Development mode we use the command:\n\n```javascript\nyarn dev\n```\n\nThe command yarn dev will execute nodemon in the page src and look for the file index.ts\n\n- To run the command to build the project we use:\n\n```javascript\nyarn build\n```\n\nThe command yarn build will execute tsc which means Typescript Compiler that will turn the Typescript code into Javascript to be understood by the browsers.\n\n- To run our backend in Production Mode we will use the command:\n\n```javascript\nyarn start\n```\n\nThis command will execute node and the folder dist which contains the code of our backend/server turned into Javascript\n\n## WAITSTAFF FRONTEND - WEB APPLICATION\n\n\u003cp align-items=\"center\" justify-content=\"center\"\u003e\n  \u003cimg src=\"./Frontend/src/assets/images/Frontend-Waitstaff-Techstack.png\"\u003e\n\u003c/p\u003e\n\nThe project was built using [React.js](https://react.dev/) and [Vite](https://vitejs.dev/) with [Yarn](https://yarnpkg.com/) as out package manager.\n\nThese are the steps to execute our project:\n\n- To run in Development mode we use the command:\n\n```javascript\nyarn dev\n```\n\nThe command yarn dev will execute vite.\n\n- To run the command to build the project we use:\n\n```javascript\nyarn build\n```\n\nThe command yarn build will execute tsc which means Typescript Compiler that will turn the Typescript code into Javascript to be understood by the browsers.\n\n- To run our backend in Production Mode we will use the command:\n\n```javascript\nyarn start\n```\n\nThis command will execute node and the folder dist which contains the code of our backend/server turned into Javascript\n\n\n## MOBILE VERSION OF THE WAITSTAFF \n\n\u003cp align-items=\"center\" justify-content=\"center\"\u003e\n  \u003cimg src=\"./Frontend/src/assets/images/Mobile-Waitstaff-Techstaff.png\"\u003e\n\u003c/p\u003e\n\nTo build the mobile version of the app we used [React Native](https://reactnative.dev/) and we also used [Expo](https://expo.dev/).\nWe also used [Yarn](https://yarnpkg.com/) as our package manager.\n\nThe command to create the initial boilerplate of the application is:\n\n```javasctipt\nyarn create expo-app waitstaff expo-template-blank-typescript\n```\n\nIn order to run our application in development mode we use the command:\n\n```javasctipt\nyarn start\n```\n\nThe command above will execute expo start and we can use the mobile application in our phone, we just have to scan the QR code provided by Expo\nwhen we run the command yarn start:\n\nAfter scanning the QR vode we can see the app running live in the phone used and the Phone that scans the code must be using the same internet connection that we are using in the computer.\n\nThe only dependencies that we are gonna use throughout the project are: [Styled Components](https://styled-components.com/), [React Native SVG](https://github.com/software-mansion/react-native-svg) and also [Expo Font](https://docs.expo.dev/versions/latest/sdk/font/).\n\nAn Observation is that when we install Styled Components in React Native we need the types for Styled Components and also the types for Styled Components React Native:\n\n```javasctipt\nyarn add -D @types/styled-components @types/styled-components-react-native\n```\n\nand the React Native SVG is gonna be installed using Expo:\n\n```javasctipt\nyarn expo install react-native-svg\n```\nIn order to use our custom fonts we will use a dependency called Expo-Fonts:\n\n```javasctipt\nyarn expo install expo-font\n```\n\n## API COMSUME USING AXIOS\n\nTo handle our requests to the backend we are using [Axios](https://axios-http.com/).\n\nThe requests to the api are being handled in a file saved in the utils folder named as api.ts.\n\nIn this file we abstracted the code that would be repeated across our application that means that we could remove all axios imports because it is being imported only once in the api.ts file.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhugoramonpereira%2Fwaitstaff-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhugoramonpereira%2Fwaitstaff-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhugoramonpereira%2Fwaitstaff-app/lists"}