Hotels is a web application for booking from hotels. The application has admin pages in addition to list of pages for the end user.
The application contains 3 projects:
server : this is the application backend. It is built with Nest.js framework.
web-client: this is the admin pages. It is an SPA built with React, Typescript and Parcel2 bundler.
client-pages: The main application pages that are used by the user. The client pages are built with Next.js framework.
- Nodejs v12.x
- PostgreSql 10.x or higher
-
Setup the DB only once by running the script from PgAdmin at path: server\src\database\setup.sql
-
cd into each folder (client-pages, server and web-client) and run:
npm install
cd server
npm start
if you want to run server in the watch mode:
npm run start:dev
Each time you run the server, it checks for data in DB. If no data is present, it will seed the DB from seedings scripts in the path: server\src\database\seed.sql
If you are new to Nest.js framework, refer to its documentation to see how the code is organized and unit tests are run.
Open the browser and use the address: http://127.0.0.1:3000/admin/
The default credentials are: username: pat password: 123
These pages are used to manage the system data entities.
You can modify these pages by running the project in ParcelServer mode.
There are 3 types of running modes:
- ParcelServer mode: This means the parcel bundler is up and you are working on the design/logic of admin pages and not ready to build. Notice that this mode skips sessions of the server. The project works in HMR mode and ready to restart on code changes.
- Localhost mode: This means the parcel generated a development build and you want to deploy to localhost server for testing.
- Production mode: This means the parcel generated an optimized build and you want to deploy to production server.
To run in ParcelServer mode
cd client-pages
npm start
To build for Localhost
cd client-pages
npm run build-then-deploy:dev
To build for Production
cd client-pages
npm run build-then-deploy:prod
The build is already minimized and uglified.
The localization file is located at path: web-client\src\assets\localization\localization.csv
It is a CSV and can be opened in Google Sheet.
Once the CSV file is ready you need to download it into the same path again.
npm run bake-localization
To add a new language:
- Use Google Sheet to add a new language column in the CSV file.
- Fill the new column translations.
- Download the file to the same path
- Bake the localization CSV file.
Modify the code (only one time steps):
- Fill in a new language name in languageKeys array in the file:
web-client\src\controller\lib\localization\localizer.ts - Add a new language key to the CSVParser class at path:
web-client\src\controller\lib\tools\csvParser.ts
In this project, react works on the server side to render the pages so that the pages are SEO friendly. Make sure the server project is up and running before you run the client pages. After that, you can run the client pages using the command:
npm run dev
After you run the client pages server, the starting page will be reachable at: http://localhost/search
The pages can be localized using the same approache mentioned above.
- localization file path: client-pages\static\localization\localization.csv
- localizer path: client-pages\controller\lib\localization\localizer.ts
- csvParser path: client-pages\controller\lib\localization\csvParser.ts
Why Parcel2 bundler:
Parcel2 allows for fast bundling with almost zero configuration.
Why not using Webpack:
The project was originally done using Webpack, but it breaks and generates errors for future updates. It has lot of configurations that you have to set and maintain. This consumes time and effort and distracts away from the real project code.
Why not using Fusebox:
Although it is the fastest bundler, it takes time to learn and doesn't offer zero-configuration feature. It also has known issues in bundling css files.