PENZ Classes Frontend

An online class app that allows users to see all available courses, reserve a spot in a class, see all reservations, add and delete courses.

The app consumes an API created using the Ruby on Rails framework. Link to API repo PENZ Classes Backend.

Deployment

Visit the Website

Screenshot

Kanban Board

• Final number of team members is 4.
• Kanban Board link

Project Requirements

• You should follow the layout of the provided design. You should change only the titles, descriptions, and photos - in order to create a website about something other than motorcycles.

• Select a theme for your website - is it going to be a website for booking doctor appointments, booking online classes, or something else?

• The user logs in to the website, only by typing the username.

• 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" (if you are in a group of 4 people the link is visible to everybody).

  • "Delete motorcycle/doctor/class/item that you selected as a theme" (if you are in a group of 4 people the link is visible to everybody).

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

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

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

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

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

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

Built With

• ReactJS
• Redux
• HTML & CSS

Getting Started

To get a local copy run the following steps:

• Clone the repository with git clone https://github.com/ZeenatLawal/Penz_Classes_Frontend.git
• Open the folder with your code editor
• Run npm install --force to install all dependencies
• Run npm start and go to http:localhost:3001/ to launch the server.

Authors

👤 Zeenat Lawal

• GitHub: @ZeenatLawal
• Twitter: @lawal_zeenat
• LinkedIn: Zeenat Lawal

👤 Nkiruka

• Github: @enkog
• Linkedin: @enkog
• Twitter: @enkodes

👤 Elyor

• Github: @elyor-doniyorov
• LinkedIn: @elyor-doniyorov
• Twitter: @elyor-doniyorov

👤 Priscilla

• Github @prolajumokeoni
• Twitter @prolajumokeoni
• LinkedIn @olajumoke-priscilla-oni-44a48b162

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

Show your support

Give a ⭐️ if you like this project!

Acknowledgments

• Microverse
• Murat Korkmaz for the Project Design from Behance
• Learning partners, Standup and morning session team