adrianhajdin/project_modern_ui_ux_restaurant

This is a code repository for the corresponding video tutorial. In this video, we're going to build a Modern UI/UX Restaurant Landing Page Website

Restaurant Landing Page

Live Site

🌟 Become a top 1% Next.js 13 developer in only one course

🚀 Land your dream programming job in 6 months

Stay up to date with new projects

New major projects coming soon, subscribe to the mailing list to stay up to date https://resource.jsmasterypro.com/newsletter

Introduction

This is a code repository for the corresponding video tutorial. In this video, we're going to build a Modern UI/UX Restaurant Landing Page Website

You might be wondering, what are the prerequisites for building such an amazing website? Don't worry, this course is completely beginner-friendly! We're going to start easy and them move to more complex topics. Every step of the way will be explained. Alongside building the website, you'll learn:

• React Functional components and their reusability
• React file and folder structure
• Fundamental CSS properties to master flex & grid
• Fundamentals of the CSS BEM Model
• From soft and pleasant animations to complex gradients
• Perfectly placed media queries for satisfactory responsiveness covering almost devices
• And at the end you'll learn how to deploy your websites to extremely fast servers and give them a custom domain name.

project_modern_ui_ux_restaurant's Issues

Initialization the application giving error post git download

PS C:\Users\The Only Supplier\Desktop\react\restaurant> yarn add postcss
yarn add v1.22.17
[1/4] Resolving packages...
[2/4] Fetching packages...
warning Pattern ["postcss@^8.4.21"] is trying to unpack in the same destination "C:\Users\The Only Supplier\AppData\Local\Yarn\Cache\v6\npm-postcss-8.4.21-c639b719a57efc3187b13a1d765675485f4134f4-integrity\node_modules\postcss" as pattern ["postcss@^8.1.0"]. This could result in non-deterministic behavior, skipping.
[3/4] Linking dependencies...
warning " > @testing-library/[email protected]" has unmet peer dependency "@testing-library/dom@>=7.21.4".
warning "react-scripts > @typescript-eslint/eslint-plugin > [email protected]" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".
[4/4] Building fresh packages...
Starting the development server...

Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:71:19)
at Object.createHash (node:crypto:133:10)
at module.exports (C:\Users\The Only Supplier\Desktop\react\restaurant\node_modules\webpack\lib\util\createHash.js:135:53)
at NormalModule._initBuildHash (C:\Users\The Only Supplier\Desktop\react\restaurant\node_modules\webpack\lib\NormalModule.js:417:16)
at handleParseError (C:\Users\The Only Supplier\Desktop\react\restaurant\node_modules\webpack\lib\NormalModule.js:471:10)
at C:\Users\The Only Supplier\Desktop\react\restaurant\node_modules\webpack\lib\NormalModule.js:503:5
at C:\Users\The Only Supplier\Desktop\react\restaurant\node_modules\webpack\lib\NormalModule.js:358:12
at C:\Users\The Only Supplier\Desktop\react\restaurant\node_modules\loader-runner\lib\LoaderRunner.js:373:3
at iterateNormalLoaders (C:\Users\The Only Supplier\Desktop\react\restaurant\node_modules\loader-runner\lib\LoaderRunner.js:214:10)
at iterateNormalLoaders (C:\Users\The Only Supplier\Desktop\react\restaurant\node_modules\loader-runner\lib\LoaderRunner.js:221:10)
C:\Users\The Only Supplier\Desktop\react\restaurant\node_modules\react-scripts\scripts\start.js:19
throw err;
^

Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:71:19)
at Object.createHash (node:crypto:133:10)
at module.exports (C:\Users\The Only Supplier\Desktop\react\restaurant\node_modules\webpack\lib\util\createHash.js:135:53)
at NormalModule._initBuildHash (C:\Users\The Only Supplier\Desktop\react\restaurant\node_modules\webpack\lib\NormalModule.js:417:16)
at C:\Users\The Only Supplier\Desktop\react\restaurant\node_modules\webpack\lib\NormalModule.js:452:10
at C:\Users\The Only Supplier\Desktop\react\restaurant\node_modules\webpack\lib\NormalModule.js:323:13
at C:\Users\The Only Supplier\Desktop\react\restaurant\node_modules\loader-runner\lib\LoaderRunner.js:367:11
at C:\Users\The Only Supplier\Desktop\react\restaurant\node_modules\loader-runner\lib\LoaderRunner.js:233:18
at context.callback (C:\Users\The Only Supplier\Desktop\react\restaurant\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
at C:\Users\The Only Supplier\Desktop\react\restaurant\node_modules\react-scripts\node_modules\babel-loader\lib\index.js:59:103 {
opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
library: 'digital envelope routines',
Starting the development server...

Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:71:19)
at Object.createHash (node:crypto:133:10)
at module.exports (C:\Users\The Only Supplier\Desktop\react\restaurant\node_modules\webpack\lib\util\createHash.js:135:53)
at NormalModule._initBuildHash (C:\Users\The Only Supplier\Desktop\react\restaurant\node_modules\webpack\lib\NormalModule.js:417:16)
at handleParseError (C:\Users\The Only Supplier\Desktop\react\restaurant\node_modules\webpack\lib\NormalModule.js:471:10)
at C:\Users\The Only Supplier\Desktop\react\restaurant\node_modules\webpack\lib\NormalModule.js:503:5
at C:\Users\The Only Supplier\Desktop\react\restaurant\node_modules\webpack\lib\NormalModule.js:358:12
at C:\Users\The Only Supplier\Desktop\react\restaurant\node_modules\loader-runner\lib\LoaderRunner.js:373:3
at iterateNormalLoaders (C:\Users\The Only Supplier\Desktop\react\restaurant\node_modules\loader-runner\lib\LoaderRunner.js:214:10)
at iterateNormalLoaders (C:\Users\The Only Supplier\Desktop\react\restaurant\node_modules\loader-runner\lib\LoaderRunner.js:221:10)
C:\Users\The Only Supplier\Desktop\react\restaurant\node_modules\react-scripts\scripts\start.js:19
throw err;
^

Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:71:19)
at Object.createHash (node:crypto:133:10)
at module.exports (C:\Users\The Only Supplier\Desktop\react\restaurant\node_modules\webpack\lib\util\createHash.js:135:53)
at NormalModule._initBuildHash (C:\Users\The Only Supplier\Desktop\react\restaurant\node_modules\webpack\lib\NormalModule.js:417:16)
at C:\Users\The Only Supplier\Desktop\react\restaurant\node_modules\webpack\lib\NormalModule.js:452:10
at C:\Users\The Only Supplier\Desktop\react\restaurant\node_modules\webpack\lib\NormalModule.js:323:13
at C:\Users\The Only Supplier\Desktop\react\restaurant\node_modules\loader-runner\lib\LoaderRunner.js:367:11
at C:\Users\The Only Supplier\Desktop\react\restaurant\node_modules\loader-runner\lib\LoaderRunner.js:233:18
at context.callback (C:\Users\The Only Supplier\Desktop\react\restaurant\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
at C:\Users\The Only Supplier\Desktop\react\restaurant\node_modules\react-scripts\node_modules\babel-loader\lib\index.js:59:103 {
opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
library: 'digital envelope routines',
reason: 'unsupported',
code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Node.js v18.12.1
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

SpecialMenu.css media Query required

In SpecialMenu.css the image stretches during testing in responsiveness for iPhone12 Pro and similar screens. For that, we can add media query for the max-width: 650px, like

@media screen and (max-width: 650px) {
  .app__specialMenu-menu_img {
    width: 100%;
  }

  /* Special touch */
  .app__specialMenu-menu_img img {
    height: auto;
  }

  .app__specialMenu-menu_heading {
    font-size: 35px;
    line-height: 48.5px;
  }
}

Unable to Start Development Server after Cloning the project.

There are two errors

Solutions

• Change the files in ./src/components/index.js.
• from import MenuItem from './MenuItem/MenuItem';
• to import MenuItem from './Menuitem/MenuItem';
• Change the files in ./src/container/index.js.
• from import FindUs from './FindUs/FindUs';
• to import FindUs from './Findus/FindUs';

Compiling issue

Uncaught Error: Cannot find module './MenuItem/MenuItem'

Hover Issue For Icon On Image Gallery

broken Navbar

i followed the tutorial exactly and even copied the code line by line from the repository, however for some reason the navbar for small devices is broken, any fix?
ps: i copied and pasted the whole files for navbar, then the issue got fixed

Small typo within folder structure, namely Findus > FindUs.jsx

Hey Adrian,

The folder Src>Container>Findus>FindUs.jsx will return a module export error when attempting to run locally.
Should be >>FindUs>FindUs.jsx with a small capitalization fix.

Thanks again for all that you do. You're an amazing teacher and I cherish the knowledge.

react

Can't start development server after cloning

PS C:\Users\The Only Supplier\Desktop\react\restaurant> yarn add postcss
yarn add v1.22.17
[1/4] Resolving packages...
[2/4] Fetching packages...
warning Pattern ["postcss@^8.4.21"] is trying to unpack in the same destination "C:\Users\The Only Supplier\AppData\Local\Yarn\Cache\v6\npm-postcss-8.4.21-c639b719a57efc3187b13a1d765675485f4134f4-integrity\node_modules\postcss" as pattern ["postcss@^8.1.0"]. This could result in non-deterministic behavior, skipping.
[3/4] Linking dependencies...
warning " > @testing-library/[email protected]" has unmet peer dependency "@testing-library/dom@>=7.21.4".
warning "react-scripts > @typescript-eslint/eslint-plugin > [email protected]" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".
[4/4] Building fresh packages...
Starting the development server...

Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:71:19)
at Object.createHash (node:crypto:133:10)
at module.exports (C:\Users\The Only Supplier\Desktop\react\restaurant\node_modules\webpack\lib\util\createHash.js:135:53)
at NormalModule._initBuildHash (C:\Users\The Only Supplier\Desktop\react\restaurant\node_modules\webpack\lib\NormalModule.js:417:16)
at handleParseError (C:\Users\The Only Supplier\Desktop\react\restaurant\node_modules\webpack\lib\NormalModule.js:471:10)
at C:\Users\The Only Supplier\Desktop\react\restaurant\node_modules\webpack\lib\NormalModule.js:503:5
at C:\Users\The Only Supplier\Desktop\react\restaurant\node_modules\webpack\lib\NormalModule.js:358:12
at C:\Users\The Only Supplier\Desktop\react\restaurant\node_modules\loader-runner\lib\LoaderRunner.js:373:3
at iterateNormalLoaders (C:\Users\The Only Supplier\Desktop\react\restaurant\node_modules\loader-runner\lib\LoaderRunner.js:214:10)
at iterateNormalLoaders (C:\Users\The Only Supplier\Desktop\react\restaurant\node_modules\loader-runner\lib\LoaderRunner.js:221:10)
C:\Users\The Only Supplier\Desktop\react\restaurant\node_modules\react-scripts\scripts\start.js:19
throw err;
^

Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:71:19)
at Object.createHash (node:crypto:133:10)
at module.exports (C:\Users\The Only Supplier\Desktop\react\restaurant\node_modules\webpack\lib\util\createHash.js:135:53)
at NormalModule._initBuildHash (C:\Users\The Only Supplier\Desktop\react\restaurant\node_modules\webpack\lib\NormalModule.js:417:16)
at C:\Users\The Only Supplier\Desktop\react\restaurant\node_modules\webpack\lib\NormalModule.js:452:10
at C:\Users\The Only Supplier\Desktop\react\restaurant\node_modules\webpack\lib\NormalModule.js:323:13
at C:\Users\The Only Supplier\Desktop\react\restaurant\node_modules\loader-runner\lib\LoaderRunner.js:367:11
at C:\Users\The Only Supplier\Desktop\react\restaurant\node_modules\loader-runner\lib\LoaderRunner.js:233:18
at context.callback (C:\Users\The Only Supplier\Desktop\react\restaurant\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
at C:\Users\The Only Supplier\Desktop\react\restaurant\node_modules\react-scripts\node_modules\babel-loader\lib\index.js:59:103 {
opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
library: 'digital envelope routines',
Starting the development server...

Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:71:19)
at Object.createHash (node:crypto:133:10)
at module.exports (C:\Users\The Only Supplier\Desktop\react\restaurant\node_modules\webpack\lib\util\createHash.js:135:53)
at NormalModule._initBuildHash (C:\Users\The Only Supplier\Desktop\react\restaurant\node_modules\webpack\lib\NormalModule.js:417:16)
at handleParseError (C:\Users\The Only Supplier\Desktop\react\restaurant\node_modules\webpack\lib\NormalModule.js:471:10)
at C:\Users\The Only Supplier\Desktop\react\restaurant\node_modules\webpack\lib\NormalModule.js:503:5
at C:\Users\The Only Supplier\Desktop\react\restaurant\node_modules\webpack\lib\NormalModule.js:358:12
at C:\Users\The Only Supplier\Desktop\react\restaurant\node_modules\loader-runner\lib\LoaderRunner.js:373:3
at iterateNormalLoaders (C:\Users\The Only Supplier\Desktop\react\restaurant\node_modules\loader-runner\lib\LoaderRunner.js:214:10)
at iterateNormalLoaders (C:\Users\The Only Supplier\Desktop\react\restaurant\node_modules\loader-runner\lib\LoaderRunner.js:221:10)
C:\Users\The Only Supplier\Desktop\react\restaurant\node_modules\react-scripts\scripts\start.js:19
throw err;
^

Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:71:19)
at Object.createHash (node:crypto:133:10)
at module.exports (C:\Users\The Only Supplier\Desktop\react\restaurant\node_modules\webpack\lib\util\createHash.js:135:53)
at NormalModule._initBuildHash (C:\Users\The Only Supplier\Desktop\react\restaurant\node_modules\webpack\lib\NormalModule.js:417:16)
at C:\Users\The Only Supplier\Desktop\react\restaurant\node_modules\webpack\lib\NormalModule.js:452:10
at C:\Users\The Only Supplier\Desktop\react\restaurant\node_modules\webpack\lib\NormalModule.js:323:13
at C:\Users\The Only Supplier\Desktop\react\restaurant\node_modules\loader-runner\lib\LoaderRunner.js:367:11
at C:\Users\The Only Supplier\Desktop\react\restaurant\node_modules\loader-runner\lib\LoaderRunner.js:233:18
at context.callback (C:\Users\The Only Supplier\Desktop\react\restaurant\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
at C:\Users\The Only Supplier\Desktop\react\restaurant\node_modules\react-scripts\node_modules\babel-loader\lib\index.js:59:103 {
opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
library: 'digital envelope routines',
reason: 'unsupported',
code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Node.js v18.12.1
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.