Out backend is built using Node.js with Express.
The Database we chose to implement in the Waitstaff app was Mongo.db with Mongoose as our ODM (Object Data Modelling).
The port we are using for the Database to be running is 27010 and we are using Docker to run it.
We separated the products in the models folder where it contains the categories, the products and also the orders.
In 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.
In out products we are using images and to handle the upload of the images we are usign Multer which is a Node.js middleware to handle file upload, in our case images. Multer will intercept the request, acting as a middleware.
Since we are using Yarn as our Package Manager we will run the commands using yarn.
- To run in Development mode we use the command:
yarn devThe command yarn dev will execute nodemon in the page src and look for the file index.ts
- To run the command to build the project we use:
yarn buildThe command yarn build will execute tsc which means Typescript Compiler that will turn the Typescript code into Javascript to be understood by the browsers.
- To run our backend in Production Mode we will use the command:
yarn startThis command will execute node and the folder dist which contains the code of our backend/server turned into Javascript
The project was built using React.js and Vite with Yarn as out package manager.
These are the steps to execute our project:
- To run in Development mode we use the command:
yarn devThe command yarn dev will execute vite.
- To run the command to build the project we use:
yarn buildThe command yarn build will execute tsc which means Typescript Compiler that will turn the Typescript code into Javascript to be understood by the browsers.
- To run our backend in Production Mode we will use the command:
yarn startThis command will execute node and the folder dist which contains the code of our backend/server turned into Javascript
To build the mobile version of the app we used React Native and we also used Expo. We also used Yarn as our package manager.
The command to create the initial boilerplate of the application is:
yarn create expo-app waitstaff expo-template-blank-typescript
In order to run our application in development mode we use the command:
yarn start
The 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 when we run the command yarn start:
After 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.
The only dependencies that we are gonna use throughout the project are: Styled Components, React Native SVG and also Expo Font.
An 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:
yarn add -D @types/styled-components @types/styled-components-react-native
and the React Native SVG is gonna be installed using Expo:
yarn expo install react-native-svg
In order to use our custom fonts we will use a dependency called Expo-Fonts:
yarn expo install expo-font
To handle our requests to the backend we are using Axios.
The requests to the api are being handled in a file saved in the utils folder named as api.ts.
In 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.