Sushi Restaurant Website

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

Desktop Overview 🖳

Mobile Overview 📱

Link 🔗

• Sushi Restaurant

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.

2. Navigate to the Project Directory:

cd sushi-restaurant

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

3. Install Dependencies:

npm install

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

4. Run the Application:

npm start

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