MyOrder 🍝🍛🍲

MyOrder allows groups to track food orders and export daily summaries to Google Sheets.

Read the story behind it on Medium.

Table of contents

1. Demo
2. How to use
3. Tech stack
4. Modularization
5. Contribute
6. Roadmap
7. Maintainers
8. License

Demo

You can find a demo here.

You may try out everything except for the Submit to Google Sheets feature located at /summary because it costs money.

How to use

Preliminary

1. Clone on your machine using SSH or HTTPS.

   Using SSH (suggested):

    git@github.com:oxcened/my-order.git
   

   Using HTTPS:

   git clone https://github.com/oxcened/my-order
   

2. Enter folder:

   cd my-order
   

3. Use the correct node version (18.x). I suggest using nvm. If you have that you can just run:

   nvm use
   

4. Install dependencies:

   npm i
   

Run on your machine

1. Use the correct node version (18.x). I suggest using nvm. If you have that you can just run:

   nvm use
   

2. Setup firebase:

   1. This app is meant to work on top of a Firebase project, so you should create your own.
   2. Initialize Firestore.
   3. Obtain the project config object.
   4. Create an .env.development file in the root of the project.
   5. Place inside of it the config object like in .env.example.
   6. Create a .firebaserc file in the root of the project like .firebaserc.example.

3. Run the app:

   npm run dev
   

Build for production

1. Use the correct node version (18.x). I suggest using nvm. If you have that you can just run:

   nvm use
   

2. Setup environment:

   The same as the third step of Run on your machine applies, except the app will use .env.production this time. Learn more here.

3. Build the app:

   npm run build
   

4. Run the app:

   npm run preview
   

Run tests

1. Use the correct node version (18.x). I suggest using nvm. If you have that you can just run:

   nvm use
   

2. Run tests:

   npm run test
   

Tech stack

1. TypeScript v4.9
2. Vite.js v4
3. React v18
4. React Router v6
5. TailwindCSS
6. Redux.js & Toolkit & RTK Query
7. Jest & Testing Library

Modularization

The app is fully modularized.

A module is a folder contained in src/modules that takes responsibility for a single domain.

Each module is a self-contained unit that takes care of every aspect of its domain.

From UI to business logic: components, full page components, models, apis, slices, styles, and so on.

A module must follow a set of rules:

• Based on Single responsibility principle, a module should be responsible for at most one domain.
• If only one module requires a resource, that resource should be contained in the module.
• A module must contain an index.ts file in its root. This file represents the public interface of the module.
• If another part of the codebase needs a module's resource, that resource may be exported from the index.ts.
• A module should only expose what's strictly necessary, in order to abstract away the internal functioning of the module.
• A module can import another module's resource, but only through its index.ts. For instance: import { User } from '@/modules/auth'.
• Imports from outside of a module must always be done through its index.ts. This allows the internal functioning of a module to be changed without impacting usages from outside.
• Imports from inside of the module must never use the index.ts. This is because the index is specifically meant for usage from outside.

Any other file that doesn't belong to a specific module and is generally common to the project, is placed in /src/common.

Contribute

Contributions are most welcome!

Bug fixing

1. Should you find a bug, please open an issue describing thoroughly what you encountered.
2. If you'd like to fix an already existing issue, please leave a comment asking to work on it, so nobody else does.
3. Once you get assigned an issue, you may work on it and then open a pull request titled fix: #[number of issue] [description of issue].

Feature requests

1. If you have an idea to discuss with the community, feel free to open a discussion.
2. For feature requests, you are free to open a new issue.
3. All feature requests may not fit this project and will be subject to discussion!

Testing

I suggest making sure all tests run successfully before submitting a PR (even though they are run anyway on GitHub).

To do so, run:

npm run test

Roadmap

• Migrate from Gatsby to React + Vite.
• Improve the desktop UI/UX.
• Version control the cloud function that exports reports to Google Sheets.
• Improve the navigation UX.
• Lazy load all routes.
• Write unit tests on all components.
• Add a page to consult orders of past days.
• Add an admin panel:
  • Add a page to manage restaurants and their menu.
  • Allow to switch authentication method to one which is more secure

Maintainers

• oxcened

License

MyOrder is MIT licensed.