Skip to content

enague/Header

 
 

Repository files navigation

HostelWorld Clone: RUinn

The header section of a hostel listing page clone inspired by hostelworld.com

It contains the hostel name, location, and features of the hostel including free wifi or free breakfast. Some dynamic features include the features of the wifi and coffee above the hostel name. When a user hovers over them, a tooltip will show what those features mean.

In addition, a user can click on the background image to show you a carousel of the photos for that specific hostel. The icons in the top right corner of the header are dynamic as well.

When you click on the user icon, it shows a modal where a user can input a email/username and password. Clicking on the magnifying glass icon will show a search component where a user can search for hostels in a specific city.

Lastly, when you click on the menu bars icon, a navigation bar will appear from the right side of the screen to navigate you to other parts of the website.

Related Projects

Table of Contents

  1. Usage
  2. Requirements
  3. Development

Usage

Run the following command in your terminal to start webpack

"npm run react-dev"

Run the following comman in your terminal to start server

"npm start"

Insert following into your brower to open

"http://localhost:3001/"

Requirements

An nvmrc file is included if using nvm.

  • Node 6.13.0
  • etc

Development

Installing Dependencies

From within the root directory:

npm install -g webpack
npm install

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 81.4%
  • CSS 11.7%
  • HTML 5.4%
  • Dockerfile 1.5%