Nextmeal

Online platform for you to readily access to awesome restaurants nearby and order in advance with reasonable price.
Explore Our Website

Table of contents

• App first look
• About Nextmeal project
• How to use
• API Document
• Run the server locally
• Run the app locally
• Upcoming features
• Team members

App first look

User Interface

Restaurant Owner Dashboard

Admin Dashboard

About Nextmeal project

Online platform for you to readily access to awesome restaurants nearby and order in advance with reasonable price.

Open source kits and API we have used

Front End

• Using Google Maps JavaScript API to customize and display maps with markers and info windows on web pages
• Using Google Maps Geocoding API to convert address into geographic coordinates for back-end
• Using vue-chartjs to visualize restaurant and admin dashboard data
• Using Vuelidate for better form validation(Including the use or asynchronous validation feature for email check)
• Using vue-carousel to create customized carousel that are responsive and touch-friendly
• Using vue2-datepicker to customize delicate date picker
• Using sweetalert2 to create customized and responsive popup message box
• Using Vuex for state management in Vue.js
• Using Sass, CSS preprocessors, in the project. Making CSS code cleaner and reusable.
• Using Bootstrap CSS framework to help create responsive front-end website
• Using moment.js to parse, validate and display date and time that are consistent with back-end
• Using Font Awesome to display beautiful icons on the website

Back End

• Using mocha / chai / sinon / supertest for Unit Testing(Model / Request) and Travis CI for continuous integration
• Using NewebPay as the third party payment API for user to pay subscription fee with credit card online
• Using PostGIS to help calculate geodesic distance
• Using express-validator for data validation
• Using JSON Web Tokens to add token based authentication to RESTful API
• Using nodemailer to send email with Node.js after user sign up or place an order
• Using Multer 、imagekit-nodejs for file upload feature
• Using bcryptjs to hash and check password
• Using dotenv to help load the environment variables saved in .env file
• Using node-cron as the task scheduler to automatically update order and meal data in the database
• Using moment.js to parse date and time that are consistent with front-end and database

How to use

Visitor

As a visitor, you may:

1. Learn more about the platform and how it works
2. Check out all the restaurants currently serving on the platform
3. Check out the detail of all the subscription plans available
4. Visit our F.A.Q page for all the frequently asked questions and answers
5. Sign up for a Nextmeal account to start the journey

Nextmeal Member

As a Nextmeal member, you may:

• Log in to your Nextmeal user account
  • email: user1@example.com
  • password: Nextmeal!
• Subscribe a meal plan--10 meals or 20 meals per month--and pay it online with credit card
  • Credit card number(testing): 4000-2211-1111-1111
  • Credit card expiration date: Any random date
  • Credit card security code: Any random three numbers set
• Choose between two restaurants we provide(within 500 meters) every day and order the meal in advance
• Update or cancel the order by the end of the day
• Pick up the meal at the time you have chosen without having to wait in line
• Edit your profile info--We always recommend you restaurants based on the address you provided

Restaurant Owner

As a restaurant owner, you may:

• Log in to your Nextmeal owner account
  • email: user2@example.com
  • password: Nextmeal!
• Edit your restaurant info
• Create and edit your restaurant menu
• See the meal currently serving
• Update the meal and amount you would like to serve next week before Saturday
• Readily check out all the orders of the day
• Checkout the overall performance in the past 30 days on the analytic chart page

Admin

As an admin, you may:

• Log in to your Nextmeal admin account
  • email: root@example.com
  • password: Nextmeal!
• Check out the info of all the restaurants, users, and orders on the platform
• Edit, cancel, or delete the info of the restaurant, user, and order
• Checkout the overall performance both today and in the past 30 days on the analytic chart page

API Document

Nextmeal app is using our own REST APIs. To learn more about the API, please check out our API Docs for more information.

What's included

Within the API document you will find the following directories and files:

dist/
├── admin/
│   ├── getRestaurants
│   ├── getRestaurant
│   ├── putRestaurant
│   ├── deleteRestaurant
│   ├── getUsers
│   ├── getUser
│   ├── deleteUser
│   ├── getOrders
│   ├── putCancel
│   ├── putUser
│   ├── dashboard
└── owner/
│   ├── getRestaurant
│   ├── postRestaurant
│   ├── putRestaurant
│   ├── getDish
│   ├── deleteDish
│   ├── getMenu
│   ├── putMenu
│   ├── getOrders
│   ├── getRestaurants
│   ├── getRestaurant
│   ├── putRestaurant
│   ├── deleteRestaurant
│   ├── getUsers
│   ├── getUser
│   ├── deleteUser
│   ├── getOrders
│   ├── putCancel
│   ├── putUser
│   ├── dashboard
└── user/
│   ├── signup
│   ├── signin
│   ├── emailCheck
│   ├── getSubscription
│   ├── postSubscription
│   ├── getProfile
│   ├── putProfile
│   ├── getTomorrow
│   ├── getOrders
│   ├── getCurrentUser
└── restaurant/
│   ├── getRestaurants
│   ├── getRestaurant
└── order/
    ├── getNew
    ├── postNew
    ├── getOrder
    ├── getOrderEdit
    ├── putOrder
    ├── getComment
    ├── postComment
    └── putCancel

Run the server locally

The following instructions will get you a copy of the project and the setting needed to run the back-end server on your local machine.

Prerequisites

• npm
• Node.js v16.17.0
• MySQL v8.0.16
• MySQL Workbench v8.0.16
• Vue CLI v5.0.8

Clone

Clone this repository to your local machine

$ git clone https://github.com/smallpaes/nextmeal.git

Setup Database

Create database via MySQL Workbench

Run the following code

drop database if exists nextmeal;
create database nextmeal;

Setup App

1. Enter the project folder

$ cd nextmeal

2. Install packages via npm

$ npm install

3. Create .env file

$ touch .env

4. Sign up for an account / Get the secret key

Gmail / ImageKit / Newebpay

5. Store API Key in .env file and save

GMAIL_ACCOUNT=
GMAIL_PASSWORD=
JWT_SECRET=
URL=
MERCHANT_ID=
HASH_KEY=
HASH_IV=
VUE_APP_GOOGLE=
GOOGLE_GEOCODING_API_KEY=
TIMEZONE=
VUE_APP_TIMEZONE=
VUE_APP_IMAGEKIT_URL_ENDPOINT=
IMAGEKIT_PUBLIC_KEY=
IMAGEKIT_PRIVATE_KEY=
IMAGEKIT_URL_ENDPOINT=

6. Edit password in config.json file

/server/config/config.json

"development": {
  "username": "root",
  "password": "<YOUR_WORKBENCH_PASSWORD>",
  "database": "nextmeal",
  "host": "127.0.0.1",
  "dialect": "mysql"
}

7. Run migration

At "/server" run the following code in the console

$ npx sequelize db:migrate
$ NODE_ENV=test npx sequelize db:migrate

8. Add Seeder

At "/server" run the following code in the console

$ npx sequelize db:seed:all

9. Activate the server

$ npm run dev

10. Find the message for successful activation

> App is listening on port 3000!

You may start using the api by accessing: http://localhost:3000/api

Run the app locally

The following instructions will go through the setting needed to run the front-end app on your local machine.

Setup App

1. Enter the project folder

Open a new terminal and enter the folder

$ cd nextmeal/client

2. Install packages via npm

$ npm install

3. Create a Google Maps Project and get the API Key

Instruction to create a project and access the API key, kindly check This website

4. Create .env.local file

$ touch .env.local

5. Store API Key in .env.local file and save

VUE_APP_GOOGLE=<YOUR_GOOGLE_MAPS_API_KEYS>

7. Compiles and hot-reloads for development

$ npm run serve

Upcoming features

• Coupon feature for user
• Restaurant owner can reply to reviews from users
• Restaurant owner can serve dinner
• User can updates or resets password

Team Members

(*In alphabetical order)

Danny Wang

• Back-end development
• Build up a robust RESTful CRUD API: User authentication, analytic report panel for restaurants owner and admin
• Database and model configuration, back-end automation testing and Node.js scheduler integration
• Cooperate with teammates to come up with better user stories, wireframe, ERD model and RESTful API design
• Cooperate with teammates to set up database, create seeders, and deploy the app
• Cooperate with back-end teammate to design and use our own RESTful API
• Code review for teammates

Mike Huang

• Entire front-end development
  • Project setup, features development, and new technologies implementation(Sass, Google Maps APIs, etc.)
  • Pages for visitors, members, restaurants owner, and admin
  • Data visualization: Create analytical charts for both restaurant owner and admin panel
• UX and UI design
• Github project creation and branch management
• Cooperate with teammates to come up with better user stories, wireframe, ERD model and RESTful API design
• Cooperate with back-end teammates to connect to third party payment APIs
• Code review for teammates

Tao He

• Back-end development
• Build up a robust RESTful CRUD API: Restaurants, orders, meals, user subscription, and menu
• Cooperate with teammates to come up with better user stories, wireframe, ERD model and RESTful API design
• Cooperate with teammates to set up database, create seeders, and deploy the app
• Cooperate with teammates to connect to third party payment APIs
• Code review for teammates