juandbta / booking-bites

Built with Ruby on Rails on the backend and React & Redux on the frontend, our responsive web application offers a seamless dining reservation experience. Users can conveniently choose their preferred dining ambience, whether it's the cozy bar, the chic lounge, the scenic rooftop, the tranquil garden, or the vibrant live music area.

BookingBites App

📗 Table of Contents

• 📖 About the Project
  • 🛠 Built With
    • Tech Stack
    • Key Features
    • Kanban Board
  • 🚀 Live Demo
• 💻 Getting Started
  • Prerequisites
  • Setup
  • Install
  • Usage
  • Run Tests
  • Deployment
• 👥 Authors
• 🔭 Future Features
• 🤝 Contributing
• ⭐️ Show your support
• 🙏 Acknowledgements
• ❓ FAQ
• 📝 License

📖 [BookingBites APP]

[BookingBites App APP] Built with Ruby on Rails on the backend and React & Redux on the frontend, our responsive web application offers a seamless dining reservation experience. Users can conveniently choose their preferred dining ambience, whether it's the cozy bar, the chic lounge, the scenic rooftop, the tranquil garden, or the vibrant live music area. This project represents the final capstone of our Microverse journey. And this is the link of the repo that contains both the frontend and the backend Booking bites repo

🛠 Built With

1- Ruby 3.2.2
2- Rails 7.0.7.2
3- PostgreSQL
4- React & Redux
5- Gitflow
6- Rubocop
7- Rspec
8- Jest

Tech Stack

Client

• Microverse

Ruby

• Ruby

Rails

• Rails

Database

• PostgreSQL

React

• React

Redux

• Redux

Key Features

• [Set up the repository and tools]
• [Created the home page to display Sections]
• [Created the Add Section page to add a Section]
• [Created the splash page]
• [Created registration and login page]
• [Created the page to add a reservation]
• [Created the reservations page]
• [Added tests]

Kanban Board

We are two people working on this project: @beteland123 and @JuanDBta.

Check our Kanban Board

This is our empty Kanban Board:

This is our Kanban after creating the cards:

(back to top)

🚀 Live Demo

• BookingBites App

(back to top)

💻 Getting Started

To get a local copy up and running, follow these steps.

Prerequisites

In order to run this project you need:

Web Browser (Chrome recommended)
Code editor (VS recommended)
GitHub account

Setup

Clone this repository to your desired folder:

  cd my-folder
  git clone "https://github.com/JuanDBta/booking-bites.git"

Install

Go to your /booking-bites folder:

  cd booking-bites
  bundle install
  npm install

Usage

1. Once the setup is complete, ensure you are still in the directory containing the Ultimate Booking bites file files.

2. To set up the database and seed initial data, run the following commands:

rails db:create
rails db:migrate

This will create the database and apply migrations.

If you want to populate the database you can run (this step is not required):

rails db:seed

To run the app in development mode, execute the following command:

  npm run build
  rails server

Run Tests

To run the test, execute the following command:

npx jest
rspec spec

Deployment

You can deploy this project using:
- BookingBites App

(back to top)

👥 Authors

👤 Micronaut Betel Andarge

• GitHub: @beteland123
• Twitter: @betelandarge
• LinkedIn: LinkedIn

👤 Micronaut JUAN DAVID DIAZ

• GitHub: @JuanDBta
• Twitter: @simplebetsas
• LinkedIn: LinkedIn

(back to top)

🔭 Future Features

• [Add animations and transitions]
• [Add more functionalities to navigation bar]
• [Add functionality to the delete section page]

(back to top)

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

(back to top)

⭐️ Show your support

If you like this project, please give me a like, it doesn't cost you anything and it helps me a lot to keep working.

(back to top)

🙏 Acknowledgments

We would like to thank Bee in Student Success who is always avalaible to solve issues and Microverse for push us to work hard every day!

Credit goes to Murat Korkmaz on Behance whose original design was used.

(back to top)

❓ FAQ

• ["How can I see more projects associated with these authors?"]

  • Check my @beteland123
  • Check my @JuanDBta

• [How can I contact the authors of this project?]

  • Check my Betel Andarge LinkedIn profile
  • Check my Juan Díaz LinkedIn profile or email me at [email protected]

(back to top)

📝 License

This project is MIT licensed.

(back to top)

booking-bites's Issues

CREATE RESERVATIONS FORM (REACT) [3pts]

To reserve a section, the user has to select a date and city (username and selected item are autofilled).
Use the design based on the "Book a vespa test-ride" and add all necessary inputs.

The user can also access the "Reserve" page from the navigation panel. In that case only username is autofilled.

Make the page responsive to Mobile and Desktop version.

Reservations Controller [5pts]

Generate Reservations Controller
Add actions to: new, create, index
Add routes to Reservations
Create API endpoint

NOTE: You have to return the outcome of the action in JSON format.

CREATE NAVIGATION BAR (REACT) [3pts]

In the navigation panel, the user can see links to:
Sections
"Reserve" form.
"My reservations".
"Add Section" (the link is visible to everybody).
"Delete Section" (the link is visible to everybody).
Make the NavBar responsive to Mobile and Desktop version.

SETUP [3pts]

Install Rails App with webpack bundler
Install gems (Rubocop, Rack-cors, CanCanCan)
Config cors.rb file
Install React & Redux
Install Redux Toolkit Package
Install packages react-dom, react-icons, react-router
Install stylelint package
Create babel.config.js
Update webpack.config.js

CREATE MAIN PAGE (REACT) [3pts]

Follow the Behance design and stick to it.
On the main page, the user can see a list of Restaurant Sections.
Make the page responsive to Mobile and Desktop Version.

CREATE SPLASH PAGE [4pts]

The user logs in to the website, only by typing the username.
Add buttons to Login In and Sign Up (registration form).

Make the app responsive, creating both mobile and desktop versions.

CREATE DETAILS SECTION PAGE (REACT) [3pts]

Follow the Behance design and stick to it.
On the Details page, the user can see the Section details
When the user selects a specific item, they can see the details page with its full description (skip the "Rotate image" button).
In the details page, the user can click the "Reserve" button (in the design you can see the "Configure" button - please replace it with the "Reserve" button).
Make the page responsive to Mobile and Desktop Version.

CREATE ADD SECTION PAGE (REACT) [3pts]

When the user clicks the "Add Section" link in the navigation panel they can see a form for adding a new section.

Make the app responsive, creating both mobile and desktop versions.

Sections Controller [5pts]

Generate Sections Controller
Add actions to: new, create, index, show
Add routes to Sections
Create API endpoint

NOTE: You have to return the outcome of the action in JSON format.

REVIEW KANBAN BOARD

Dear Reviewer:

We are two people in this Final Capstone Project: @beteland123 and @JuanDBta.

The link to our Kanban Board is:
https://github.com/users/JuanDBta/projects/2

And here is the screenshot of our Kanban Board:

Thank you!

CREATE MY RESERVATIONS PAGE (REACT) [3pts]

When the user clicks the "My reservations" link in the navigation panel they can see a list of their reservations (with information about item name, date and city).

Make the page responsive to Mobile and Desktop version.

DATABASE MIGRATION [3pts]

Create Database in PostgreSQL
Config database.yml
Create Migrations for tables: users, restaurants, reservations, sections.
Run Migrations
Create Models with Relations and Validations: user, restaurant, reservation, section.