riemelt/toxin

Hotel website

Toxin Hotel

Toxin is a hotel website for room reservations, which is an educational project for learning front-end development, a part of MetaLamp's Education Program. It is based on Figma's design, which was made specifically for studying purposes.

Compatible with

• node v18.10.0
• npm 8.19.2

Demo

Goals

• Learn and understand how to build relatively big and complicated projects from scratch, using Pug, Scss, Js
• Search, install and implement jQuery plugins into project
• Work with Webpack and Figma
• Code with BEM methodology
• Use PixelPerfect extension to match web elements according to the design
• Create responsive and flexible web-pages

Pages

UI-kit

• Colors & Type
• Form Elements
• Cards
• Headers & Footers

Web-site

• Landing
• Landing / Dates Dropdown
• Landing / Guests Dropdown
• Search room / Filter
• Search room / Filter / Preferences Dropdown
• Search room / Filter / Preferences Expandable Checkbox list
• Room details
• Registration
• Sign in

Dependencies

• webpack
• material-icons
• FortAwesome-Free
• air-datepicker
• chart-js
• imask
• jquery
• moment
• noUiSlider
• paginationjs

Install

git clone https://github.com/Riemelt/Toxin.git
cd Toxin
npm i

Commands

Run on dev-server

npm start

Build in development mode

npm run dev

Build in production mode

npm run build

Project structure

├───dist                         # built web-pages
├───pixel-perfect                # exported png images of figma's design for pixel-perfect
└───src
    ├───assets                   # image, font, favicon files
    ├───components               # bem blocks, one folder per component
    ├───layouts                  # layouts with general page structure
    ├───main-styles              # scss variables, global styles, fonts loading
    ├───pages                    # final web-pages and all entry points, one folder per page
    ├───utilities                # js helper functions
    ├───.eslintrc.js             # eslint rules for js
    ├───.gitignore               # list of folders to ignore to commit such as node_modules and dist
    ├───package-lock.json        # node_modules dependencies
    ├───package.json             # project info and dependencies
    ├───README.md                # project info and documentation
    ├───webpack.config.js        # bundler config