tsheporamantso / final-capstone-react-front-end

This is Microverse group final capstone.

StaySphere

📗 Table of Contents

• 📗 Table of Contents
• 📖 StaySphere
  • 🛠 Built With
    • Tech Stack
    • Key Features
  • 🚀 Live Demo
  • 📋Kanban board
  • 💻 Getting Started
    • Prerequisites
    • Setup
    • Install
    • Usage
    • Deployment
  • 👥 Authors
  • 🔭 Future Features
  • 🤝 Contributing
  • ⭐️ Show your support
  • 🙏 Acknowledgments
  • 📝 License

📖 StaySphere

StaySphere this app built with Rails and React on two different apps. This application enables users to signin/signup create hotels/AirBnb listings and create reservations on each hotel.

🛠 Built With

• Ruby on Rails
• React and Redux

Tech Stack

• Ruby
• Rails
• Postgresql

Key Features

• [React Components]
• [Redux]
• [Database]
• [Rails API]

(back to top)

🚀 Live Demo

• Coming soon.

• Link to Stay Sphere back-end repository

(back to top)

📋 Kanban Board

Link to Kanban board

Link to initial kanban board state

We are a team of three:

• 👤 Gladwin Tshepo Ramantso
• 👤 George Hamman
• 👤 Evans Kofi Nyamekye

(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:

• VScode
• Ruby
• Rails
• Postgres

Setup

Clone this repository to your desired folder:

Make sure you setup and run the back-end first.

  git clone [email protected]:tsheporamantso/final-capstone-react-front-end.git
  cd final-capstone-react-front-end

Install

Install this project with:

  npm install

  rails db:create

  rails db:migrate
  rails db:seed

Usage

To run the project, execute the following command:

  npm start

Deployment

Not deployed

(back to top)

👥 Authors

👤 Gladwin Tshepo Ramantso

• GitHub: @tsheporamantso
• Twitter: @ramgt001
• LinkedIn: Tshepo Gladwin Ramantso

👤 George Hamman

• GitHub: @githubhandle
• LinkedIn: George Hamman

👤 Evans Kofi Nyamekye

• GitHub: evansnyamekye
• Twitter: @nyamekye2131
• LinkedIn: Evans Kofi Nyamekye

(back to top)

🔭 Future Features

• Improve Styling
• Spesific room selection with each place
• Check to see if a person can book the hotel if they have rooms available

(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 feel free to leave a star and/or follow me on Github.

(back to top)

🙏 Acknowledgments

I would like to thank the code reviewers for taking the time to review our project and for Microverse for supplying it. Also I would like to thank Murat Korkmaz on Behance for the design inspiration.

(back to top)

📝 License

This project is MIT licensed.

(back to top)

final-capstone-react-front-end's Issues

[6pt] Front-End Testing Group Task

• Add Front End testing

[ 1pt ] Create Logo

• Check Canva.com for looo creation
• Consult with Lesego for assistance with Logo design

[4pt] API Documentation Group Task

• Add full documentation for your API.

[4pt] View Reservations

• 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).

[3pt] Add item

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

[3pt] Details Page

• 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).

[0.5pt] Setup Group Task

• Setup new react app with relevant dependencies
• Add linter files

[4pt] Responsive designing Group Task

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

[3pt] Navigation

• In the navigation panel, the user can see links to:
  • Motorcycles/doctors/classes/items that you selected as a theme.
  • "Reserve" form.
  • "My reservations".
  • "Add motorcycle/doctor/class/item that you selected as a theme" (the link is visible to everybody).
  • "Delete motorcycle/doctor/class/item that you selected as a theme" (the link is visible to everybody).

[3pt] Main Page

• On the main page, the user can see a list of motorcycles/doctors/classes/items that you selected as a theme.

[4pt] Delete Item

• When the user clicks the "Delete item" link in the navigation panel they can see a list of all items with title and "Delete" button.
  • When the user clicks the "Delete" button, the selected item is marked as removed and does not show on the main list anymore.
• To reserve an appointment, 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.