Skip to content

Latest commit

 

History

History
69 lines (53 loc) · 2.8 KB

README.md

File metadata and controls

69 lines (53 loc) · 2.8 KB

Sushi Restaurant Website

Responsive Landing Page for Shiawase Sushi Restaurant. This is a React based project.

Desktop Overview 🖳

sushi restaurant desktop overview

Mobile Overview 📱

sushi restaurant mobile overview

Link 🔗

Functionalities ☑️

  • Four pages: Home, Menu, About and Contact.
  • Header and Footer at every page.
  • Burger menu at mobile version.
  • Burger menu animation.
  • Helper with a list of items from the menu.
  • Modal for each menu item to select quantity of sushi units to order.
  • Map marker from Google API available in the About section.
  • Adapt layout through different screen sizes.
  • Persist menu status (open/closed) in the mobile version.

Used Tools ⚙️

  • React JS: An open-source JavaScript library for building user interfaces (UI) for web applications, known for its efficiency and component-based development paradigm.
  • Styled-components: A library for React and React Native enabling writing CSS within JavaScript files using CSS-like syntax, facilitating styled component creation with encapsulated styles.
  • React-router-dom: A library for handling navigation between pages in React web applications, enabling route creation and rendering specific components for each route.
  • React-icons: A library providing high-quality icons for use in React applications, easily integrable with React components for visually appealing user interfaces.
  • Google Maps JavaScript API: programming interface provided by Google that allows developers to embed interactive maps and location-based services into web applications using JavaScript.

What I learned 📒

  • How to make a color filter for background image. It was important for contrast between image and text.
  • Handle a helper to assist data to the Menu component.
  • How to create and style modal component.
  • Create a burger menu animation that 3 stripes switch to a 'X'.
  • Consume the Google Maps API to show the restaurant geolocation.
  • To work with form in React and handle functions.
  • To set LocalStorage in the application.

Run the project 👨‍💻

  1. Clone the Repository:
git clone https://github.com/Antonio-Savio/sushi-restaurant.git

Create a clone of the project.

  1. Navigate to the Project Directory:
cd sushi-restaurant

Will change the path to the directory where the React application is located.

  1. Install Dependencies:
npm install

This command will install all the required dependencies listed in the package.json file.

  1. Run the Application:
npm start

This command starts the development server and opens your default web browser to display the React application.