Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/basedhound/gericht-restaurant_ui_react
Restaurant landing page featuring modern React design with reusable components, structured file system, essential CSS for Flexbox/Grid, gradients, and responsive design across all devices.
https://github.com/basedhound/gericht-restaurant_ui_react
design landing landing-page react react-icons react18 restaurant ui
Last synced: 2 days ago
JSON representation
Restaurant landing page featuring modern React design with reusable components, structured file system, essential CSS for Flexbox/Grid, gradients, and responsive design across all devices.
- Host: GitHub
- URL: https://github.com/basedhound/gericht-restaurant_ui_react
- Owner: basedhound
- Created: 2023-02-26T16:20:03.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-08-06T12:18:15.000Z (5 months ago)
- Last Synced: 2024-11-09T03:23:59.668Z (about 2 months ago)
- Topics: design, landing, landing-page, react, react-icons, react18, restaurant, ui
- Language: JavaScript
- Homepage: https://gericht-restaurant-fv.netlify.app
- Size: 49.2 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Gericht Restaurant
##
đź“‹ Table of Contents
- ✨ [Introduction](#introduction)
- ⚙️ [Tech Stack](#tech-stack)
- đź“ť [Features](#features)
- 🚀 [Quick Start](#quick-start)
**[EN]** This restaurant landing page showcases a contemporary design developed using React, emphasizing reusable functional components and a well-organized file and folder structure. It emphasizes mastery of fundamental CSS properties such as flex for flexible layout design. Responsive design is ensured with meticulously implemented media queries, optimizing display across all devices.
**[FR]** Cette page d'accueil présente un design contemporain développé avec React, mettant l'accent sur l'utilisation de composants fonctionnels réutilisables et une structure de fichiers bien organisée. Elle en avant la maîtrise des propriétés CSS fondamentales telles que flex pour des designs de mise en page flexibles. Le design responsive est assuré grâce à des media queries soigneusement implémentées, optimisant l'affichage sur tous les appareils.
- [**React**](https://react.dev/reference/react) is a popular JavaScript library for building user interfaces, particularly single-page applications where data changes over time. React's component-based architecture allows developers to create reusable UI components, making development more efficient and the codebase easier to maintain.
- [**HTML**](https://developer.mozilla.org/en-US/docs/Web/HTML) (HyperText Markup Language) is the standard markup language used to create and structure content on the web. It provides the basic building blocks for web pages, defining elements such as headings, paragraphs, images, links, and more. HTML forms the backbone of any web document and is essential for web development.
- [**CSS**](https://developer.mozilla.org/en-US/docs/Web/CSS) (Cascading Style Sheets) is a stylesheet language used to control the presentation and layout of web pages. It allows developers to apply styles such as colors, fonts, spacing, and positioning to HTML elements. CSS enhances the visual appeal and user experience of a website by enabling the separation of content and design.
- [**JavaScript**](https://developer.mozilla.org/en-US/docs/Web/JavaScript) is a versatile programming language that enables interactive and dynamic functionality on web pages. It allows developers to create features like form validation, animations, and asynchronous content loading. JavaScript is essential for building modern web applications and works seamlessly with HTML and CSS to create a complete user experience.
👉 **CSS Variables**: Utilize CSS variables to maintain a consistent and easily adjustable styling approach throughout the project
👉 **Importing CSS Files**: Import CSS files into others, promoting modularity and organization in styling.
👉 **Flex and Position Properties**: Use of flex and position properties in CSS to create responsive and well-structured layouts.
👉 **Rendering HTML through JavaScript**: Rendering HTML through JavaScript using reusable functions, enhancing code efficiency.
👉 **Smooth Animations**: Smooth and subtle animations to enhance the overall user experience, focusing on fluid transitions.
👉 **BEM Method**: Follow the Block Element Modifier (BEM) methodology for naming classes, promoting a clear and maintainable structure.
👉 **Organized File and Folder Structure**: Maintain a well-organized file and folder structure for easy navigation and management of project assets.
👉 **Responsive Design**: The application is completely responsive across all devices, employing responsive design techniques such as media queries and fluid layouts.
Follow these steps to set up the project locally on your machine.
**Prerequisites**
Make sure you have the following installed on your machine:
- [Git](https://git-scm.com/)
- [Node.js](https://nodejs.org/en)
- [npm](https://www.npmjs.com/) (Node Package Manager)
**Cloning the Repository**
```bash
git clone {git remote URL}
```
**Installation**
Let's install the project dependencies, from your terminal, run:
```bash
npm install
# or
yarn install
```
**Running the Project**
Installation will take a minute or two, but once that's done, you should be able to run the following command:
```bash
npm start
# or
yarn start
```
Open [`http://localhost:3000`](http://localhost:3000) in your browser to view the project.