killy10o10/fitmeup

Fit me up frontend is a react-based application that enables a given user to book a trainer and it consumes an api defined in the project: Fit Me Up Backend. On top of this it also supports admin users to manage trainers that is creating and removing of the different trainers.

Fit Me Up - Frontend

📗 Table of Contents

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

📖 FitMeUP

Fit me up frontend is a react-based application that enables a given user to book a trainer and it consumes an api defined in the project: Fit Me Up Backend. On top of this it also supports admin users to manage trainers that is creating and removing of the different trainers.

Please use Port 3001 in backend

rails s -p 3001

🛠 Built With

Tech Stack

Here are List of technologies used on this project

Languages

• Ruby
• JavaScript
• HTML
• CSS

Frameworks

• React
• Redux
• Ruby on Rails

Database

• PostgreSQL

Linters

• Rubocop
• Stylelint

Test library

• Rspec
• Jest

Key Features

• Book Trainers
• Create Trainers with specialty
• See a list of Trainers of different fileds (eg. Yoga, Fitness, Muscle gain💪🏽)

(back to top)

💻 Getting Started

Prerequisites

In order to run this project you need:

• Node.JS
• Git
• Broswer to Display
• IDE to run and edit the code

Setup

Clone this repository to your desired folder:

  git clone https://github.com/killy10o10/fitmeup.git

change directory to cloned folder

  cd fitmeup

Install

Install project dependecies with:

  npm install

Usage

To run the project, execute the following command:

  npm start

• After running npm start, open your browser and enter this address http://localhost:3000/

• Congratulations! your're running fitMeUp

(back to top)

👥 Authors

👤 Quami Killy

• GitHub: @killy10o10
• Twitter: @Quami_Killy
• LinkedIn: @Kingsley Okine

👤 Muskan Gupta

• GitHub: @github
• Twitter: @twitter
• Linkedin:Username

👤 Kibirige John

• Github: John-Kibrige
• Twitter: kibirigejohn005
• LinkedIn: Kibirige John

👨‍💻 Baraka Danny

• GitHub: @barakadan
• LinkedIn: danny baraka

👨‍💻 Aakash Verma

• GitHub: @skyv26
• Twitter: @vrma_aakash
• LinkedIn: skyv2022

(back to top)

🔭 Future Features

These features will be added in future updates. ⬇️⬇️

• Appointment Page
• Trainer list page
• Add api endpoint for generating trainers

(back to top)

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

⭐️ Show your support

If you like👍🏽 this project, give the repository a star ⭐

(back to top)

🙏 Acknowledgments

I would like to thank the Microverse community

Specails thanks to Murat Korkmaz on Behance for designing the template

📝 License

This project is MIT licensed.

(back to top)

fitmeup's Issues

[2pt] Setup controllers

• setup the different controllers and add the endpoints for the API

[0.5pt] Reserve an appointment

• To reserve an appointment, the user has to select a date and city (username and selected item are auto-filled).
  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.

[0.5] Implement Delete option

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

Nav Bar Improvement: Add User, Guest, Admin, and Login/Logout Links

Nav Bar Improvements

Description:

The Nav Bar of our project needs some improvement for better user navigation and experience.

Issues:

1. Add the following links:
   • User: Home, Appointments, Search Trainer, Profile (optional)
   • Guest: Home, Search Trainers
   • Admin: Home, Manage Trainers, Profile (optional), Manage Specialties
   • All: Login/Logout

Impact:
By addressing these issues, the Nav Bar will provide a clearer and more organized navigation system, improving the user experience.

Labels:

• type: improvement
• priority: high 🚨
• component: Nav Bar

[0.5pt] Add item Form

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

Home Page Improvement

Home Page Improvements

The progress is impressive and awesome.

Description:

The Home Page of our project needs some improvement for better user experience and performance optimization.

Issues:

1. Padding between the trainers' paragraph and between trainer cards on tablet size.
2. Use Redux for trainer background color management.
3. Limit the text description (Bio) for trainers to a few lines.
4. Remove social media icons since we want both users and trainers to exchange things on our platform.

Impact:
By addressing these issues, the Home Page will have a more visually appealing design, improved performance, and better user experience.

Labels:

• type: improvement
• priority: average 🧪
• component: Home Page

[0.5] Design main Page

• On the main page, the user can see a list of all Trainers

[3pt] Setup Models

• set up the Trainer, Speciality, User, and Appointment tables according to ER Diagram

[1pt] Create ER diagram (Group activity)

• create an Entity Relational diagram

[0.5pt] Add Store

• setup redux store to consume backend API data

[0.5pt] Create 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).

Responsiveness Improvement

Responsiveness Improvement

Description:

The responsiveness of our project needs improvement across all pages.

Issue:

1. Improve responsiveness on all pages.

Impact:
By addressing this issue, the project will have a better user experience on various devices, with a consistent and optimized layout.

Labels:

• type: improvement
• priority: high 🚨
• component: All

Proposal:

• Review the implementation of Bootstrap to ensure it is being used effectively.
• Use CSS media queries and/or responsive design principles to adjust the layout as needed.
• Consider testing the project on different devices and making further adjustments accordingly.

[1pt] Make app Responsive

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

[0.5pt] Front end Authentication

• Implement proper user authentication from the front-end to the server.
• Implement Protected and Public Routes

FitMeUp Kanban Board setup

There are five people in the group @killy10o10, @muskan2532150, @John-Kibirige, @skyv26, @barakadanny. we split ourselves into the backend and front end.

Backend

• @skyv26
• @barakadanny
• @John-Kibirige

Front end

• @killy10o10
• @muskan2532150

This is the link to the Kanban Board and the screenshot attached below:

Pages Improvement: Add User Appointment Page and Admin Manage Trainers and Manage Specialties Pages

Pages Improvement

Description:

The Pages of our project need some improvement for better user and admin management.

Issues:

1. User Side:
   • Add an Appointment Page to track all appointments made by the user and check approvals and declines.
2. Admin Side:
   • Add a Manage Trainers Page for adding, deleting, and other actions.
   • Add a Manage Specialties Page for adding, deleting, and other actions.

Impact:
By addressing these issues, the User and Admin Pages will provide a better and more organized management system, improving the user and admin experience.

Labels:

• type: improvement
• priority: high 🚨
• component: Pages

[1pt] Add Snapshots test

• create tests for the controllers and the models

[1pt] Design 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.5] Authorization

• Make sure that the Add item and Delete item links are accessible only by users who are admins.

[0.5] Document API

• Add full documentation for your API.

[0.5pt] Design Appointments Page.

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