# Hotel Reservation MVC Example - JavaScript/Python
**JavaScript, Expressjs, MVC frontend, Memcached, Python, FastAPI, GraphQL, AsyncPG, Postgres**
[![Validate application](https://github.com/WillSams/example-mvc-expressjs-with-python/actions/workflows/pr-validate.yml/badge.svg)](https://github.com/WillSams/example-mvc-expressjs-with-python/actions/workflows/pr-validate.yml)
This example contains a frontend and backend:
- The frontend is an [Express](https://expressjs.com/) application using an MVC architecture and [Pug](https://pugjs.org/api/getting-started.html) + [Bootstrap4](https://getbootstrap.com/docs/4.6/getting-started/introduction/) for view templating.
- The backend is a [GraphQL API](https://graphql.org) providing the ability to create, delete, and list reservatios plus available rooms for a given date range.
React [Javascript](https://github.com/WillSams/example-js-react-with-python) and [Typescript](https://github.com/WillSams/example-ts-react-with-python) versions of this same idea are available.
Booked reservations are listed via the API. Each reservation request were processed in the order provided as if they were real-time requests. The following rules are observed:
**Context**:
* When a room is reserved, it cannot be reserved by another guest on overlapping dates.
* Whenever there are multiple available rooms for a request, the room with the lower final price is assigned.
* Whenever a request is made for a single room, a double bed room may be assigned (if no single is available?).
* Smokers are not placed in non-smoking rooms.
* Non-smokers are not placed in allowed smoking rooms.
* Final price for reservations are determined by daily price * num of days requested, plus the cleaning fee.
**Web UI Usage**:
![text](./frontend/src/public/img/home_example.png) ![text](./frontend/src/public/img/new_example.png)
**API Usage**:
Example usage via [curl](https://curl.se/download.html):
```bash
# First, grab an access token provided by the API
ACCESS_TOKEN=$(curl -s -X POST \
-H 'accept: application/json' \
-H 'Content-Type: application/x-www-form-urlencoded' \
-d 'grant_type=password&username=example-user&password=example-user' \
'http://localhost:8080/token' | jq -r '.access_token')
# List all existing booked reservations
curl http://localhost:$API_PORT/development/graphql \
-H 'Content-Type: application/json' \
-H "Authorization: Bearer ${ACCESS_TOKEN}" \
-d '{"query": "query { getAllReservations { reservations { room_id checkin_date checkout_date } } }"}'
# Create a new reservation
# Note: if there is an overlap, you'll see a
# 'Reservation dates overlap with an existing reservation' error message
# To see the aforementioned error, run this mutation a multiple times
curl http://localhost:$API_PORT/development/graphql \
-H 'Content-Type: application/json' \
-H "Authorization: Bearer ${ACCESS_TOKEN}" \
-d '{ "query": "mutation { createReservation( input: { room_id: \"91754a14-4885-4200-a052-e4042431ffb8\", checkin_date: \"2023-12-31\", checkout_date: \"2024-01-02\" }) { success errors reservation { id room_id checkin_date checkout_date total_charge } } }" }'
# List Available Rooms for a given date range
curl http://localhost:$API_PORT/development/graphql \
-H 'Content-Type: application/json' \
-H "Authorization: Bearer ${ACCESS_TOKEN}" \
-d '{"query": "query { getAvailableRooms( input: { checkin_date: \"2023-12-31\", checkout_date: \"2024-01-02\" }) { success errors rooms { id num_beds allow_smoking daily_rate cleaning_fee } } }" }'
```
**Open API UI Usage**:
Navigate to [http://localhost:$API_PORT/docs](http://localhost:$API_PORT/docs).
![text](./frontend/src/public/img/openapi_example.png)
**Table of Contents**:
* [Prerequisites](#prerequisites)
* [Getting Started](#getting-started)
- [Install Python Packages](#install-python-packages)
- [Install Node.js Packages](#install-nodejs-packages)
- [Create the Database](#create-the-database)
* [Development](#development)
* [Testing](#testing)
* [TODO](#todo)
* [License](#license)
## Prerequisites
To run the service, you will need to install the following tools.
* [Python](https://www.python.org/downloads/)
* [NodeJS](https://nodejs.org/en/)
* [Docker](https://www.docker.com/)
The below are optional but highly recommended:
* [nvm](https://github.com/nvm-sh/nvm) - Used to manage NodeJS versions.
* [Direnv](https://direnv.net/) - Used to manage environment variables.
## Getting Started
First, we'll need to set up our environment variables. You can do this by either any of the methods mentioned in [/tools/ENV.md](./tools/ENV.md) but I recommend using [Direnv](https://direnv.net/).
### Install Python Packages
Next, execute the following in your terminal:
```bash
python -m venv venv
source venv/bin/activate
pip install --upgrade pip
pip install -r requirements.txt
```
### Install Node.js Packages
Execute the following within your terminal:
```bash
nvm use # To eliminate any issues, install/use the version listed in .nvmrc.
npm i # install the packages needed for project
```
### Create the database
Finally, let's create and seed the database and our Reservations and Rooms tables:
```bash
# Create the database and seed it
NODE_ENV=development | npm run refresh && npm run seed
```
During development, you can just execute `npm run dev:db-baseline` to refresh the database back to the original seed data.
## Development
To run both the frontend and backend concurrently:
```bash
docker-compose up -d # runs the database in the background
npm run dev
```
Also, you just execute the backend via `npm run dev:backend`. to verify the backend is working:
```bash
curl http://localhost:$API_PORT/$ENV/about
```
You can also acces the Ariadne GraphiQL (interactive test playground) instance at [http://localhost:$API_PORT/$ENV/graphql](http://localhost:$PLAYGROUND_PORT/$ENV/graphql).
## Testing
The frontend utilizes [Jest](https://jestjs.io/). To run these tests, simply execute `npm run test:frontend`.
![text](./frontend/src/public/img/frontend_tests_example.png)
The backend tests organized for improved readability and comprehension. These tests are segmented into individual files, a structure that simplifies the testing process and enhances accessibility. While individual preferences may vary, this is my chosen approach for managing tests in this project.
To run these tests, simply execute `npm run test:backend`.
![text](./frontend/src/public/img/backend_tests_example.png)
## Containerization
### Building the Backend Container
```bash
docker build backend/. -t acme-hotel-example-backend:latest \
--build-arg RESERVATION_PORT="80" \
--build-arg ENV="${ENV}" \
--build-arg IS_DEBUG="${IS_DEBUG}" \
--build-arg SECRET_KEY="$SECRET_KEY" \
--build-arg REFRESH_SECRET_KEY="$REFRESH_SECRET_KEY" \
--build-arg PG_URL="$PG_URL"
# finally, to run a named container
docker run --name backend-dev -p 8000:80 acme-hotel-example-backend`
```
To verify the environment variables set, you can execute the following on the named container by:
```bash
CONTAINER_ID=$(docker ps -qf "name=backend-dev" -n 1)
# this will display the container's environment variables in console
docker exec $CONTAINER_ID printenv
```
If you need to re-create the container with the same name, do **docker rm <container-name>** (i.e., backend-dev) first.
## License
License information can be found [here](./LICENSE)
没有合适的资源?快使用搜索试试~ 我知道了~
JavaScript+Python完整堆栈示例应用程序
共277个文件
scss:110个
py:39个
js:29个
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
0 下载量 138 浏览量
2024-02-22
15:56:49
上传
评论
收藏 2.3MB ZIP 举报
温馨提示
JavaScript+Python完整堆栈示例应用程序,使用Express.js+Pug模板作为前端,使用FastAPI+SqlAlchemy作为GraphQL API后端.zip
资源推荐
资源详情
资源评论
收起资源包目录
JavaScript+Python完整堆栈示例应用程序 (277个子文件)
env.example.bat 831B
.isort.cfg 113B
babel.config.cjs 353B
jest.config.cjs 230B
.coveragerc 30B
application.css 252KB
font-awesome.css 37KB
font-awesome.min.css 30KB
.deleteme 0B
Dockerfile 549B
Dockerfile 0B
.dockerignore 63B
fontawesome-webfont.eot 162KB
.eslintignore 10B
.eslintrc 607B
.envrc.example 909B
.flake8 59B
.gitignore 4KB
.gitignore 2B
schema.graphql 1KB
pytest.ini 108B
logo-acme.jpg 37KB
moment-with-locales.js 603KB
locales.js 434KB
moment-with-locales.min.js 361KB
locales.min.js 303KB
bootstrap.bundle.js 191KB
bootstrap.js 112KB
bootstrap.bundle.min.js 66KB
moment.min.js 57KB
bootstrap.min.js 48KB
reservation.spec.js 4KB
graphql.js 2KB
graphql.spec.js 2KB
home.spec.js 2KB
reservation.js 2KB
main.js 2KB
index.js 2KB
cache.js 1KB
utils.spec.js 1KB
home.js 1KB
results.js 990B
routes.js 838B
20230213225130_create_rooms_and_reservations_tables.js 736B
clean.js 698B
constants.js 651B
knexfile.js 640B
session.js 561B
authentication.js 411B
utils.js 358B
rateLimiter.js 269B
package-lock.json 405KB
rooms.json 1KB
package.json 1KB
package.json 1KB
reservations.json 1016B
package.json 832B
package.json 605B
package.json 395B
icons.less 49KB
variables.less 22KB
mixins.less 2KB
path.less 771B
animated.less 713B
rotated-flipped.less 622B
bordered-pulled.less 585B
font-awesome.less 495B
stacked.less 476B
core.less 452B
list.less 377B
larger.less 370B
fixed-width.less 119B
screen-reader.less 118B
LICENSE 1KB
LICENSE 488B
bootstrap.bundle.js.map 319KB
bootstrap.bundle.min.js.map 267KB
moment-with-locales.min.js.map 225KB
bootstrap.js.map 191KB
bootstrap.min.js.map 158KB
locales.min.js.map 137KB
moment.min.js.map 85KB
font-awesome.css.map 21KB
README.md 7KB
README.md 5KB
README.md 3KB
ENV.md 1KB
.npmignore 427B
.nvmrc 9B
FontAwesome.otf 132KB
backend_tests_example.png 138KB
frontend_tests_example.png 112KB
logo-acme-corporation.png 111KB
home_example.png 103KB
openapi_example.png 65KB
new_example.png 53KB
logo-acme.png 28KB
pre-commit 144B
pre-push 86B
.prettierrc 73B
共 277 条
- 1
- 2
- 3
资源评论
N201871643
- 粉丝: 795
- 资源: 2280
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功