Skip to content

bruno-keiko/Restaurant-app

Repository files navigation

🍽️ Restaurant App

Welcome to the Restaurant App project! This application serves as a dynamic learning platform aimed at helping developers master modern web technologies such as React, Sass, TypeScript, and more.

📚 Purpose

The primary goal of this project is educational. It provides a practical sandbox where developers can experiment with real-world technologies and methodologies. Whether you’re new to web development or looking to sharpen your skills, this project is an excellent place to start.

🚀 Features

This app incorporates cutting-edge development practices and design systems, including:

  • 🏗️ Atomic Design: Create components that scale.
  • 🎨 Sass: Write maintainable and flexible stylesheets.
  • 🔒 TypeScript: Static typing for robust code.
  • Next.js: Server-side rendering for optimized web apps.
  • Conventional Commits & Commitizen: Maintain clean and standard commit messages.
  • 📖 Storybook: Visual development and testing of UI components.
  • 🛠️ BEM Methodology: Organize your CSS for scalability.
  • 🎯 CSS Modules: Isolate CSS to avoid clashes.
  • 🧪 Jest: Efficient unit testing for JavaScript code.
  • 🔍 Cypress: End-to-end testing made simple.
  • 🏎️ User-Centric Performance Metrics: Improve your app’s user experience.

💡 Explore the UIX

Check out the interactive Figma design for a visual preview of what we’re building!

🛠️ Setup

Follow these steps to set up the project locally and start exploring:

  1. Clone the repository:

    git clone https://github.com/bruno-keiko/Restaurant-app.git
    
  2. Navigate to the project directory:

    cd restaurant-app
    
    
  3. Install the dependencies:

    npm install
    
  4. Start the storybook for component exploration:

    npm run storybook
    
    
  5. Run the development server:

    npm run dev
    

🎮 Usage

This project is your playground! Experiment with the codebase, modify components, and try out new features. The app is intended to help you practice and refine your web development skills, so feel free to explore and extend the functionalities.

Here are a few suggestions to get started:

  1. Modify Components: Customize existing components or add new ones to better understand how component architecture works.
  2. Experiment with Styling: Use Sass or CSS Modules to experiment with different styles and see the impact on the app’s design.
  3. Add New Features: Implement new features such as a shopping cart, user authentication, or a menu page to challenge yourself.
  4. Testing: Write unit tests using Jest and end-to-end tests with Cypress to ensure your code is reliable and bug-free.

Don't hesitate to break things and learn from the process—that’s the essence of this project!

🤝 Contribution

We welcome contributions from developers of all skill levels! Whether you're fixing a bug, adding new features, or improving documentation, your help is appreciated.

To contribute:

  1. Fork the repository.
  2. Create a new branch for your feature or fix:
    git checkout -b feature-or-fix-name
  3. Make your changes and commit them using Conventional Commits:
    git commit -m "feat: describe your changes"
    
  4. Push your branch:
     git push origin feature-or-fix-name
    
  5. Open a pull request and describe the changes you made.

Please refer to the CONTRIBUTING.md file for more details on how to get started.


Our Valuable Contributors ❤️✨

This project exists thanks to all the amazing people who have contributed! Check out the Contributors Graph to see everyone who has helped out.

Contributors


📜 License

This project is licensed under the MIT License, meaning you’re free to use, modify, and distribute this software as long as the original license is included. For more information, please see the LICENSE file.