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
Screenshot
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 tohttp:localhost:3001/
to launch the server.
Authors
👤 Zeenat Lawal
- GitHub: @ZeenatLawal
- Twitter: @lawal_zeenat
- LinkedIn: Zeenat Lawal
👤 Nkiruka
👤 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