HandyHome Hub App Front-end (API)

📗 Table of Contents

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

🖥️ "HandyHome Hub" Front-end

HandyHome Hub Front-end is an application to complement our "Appointments for Home Services" project, providing a user-friendly interface for scheduling and managing home service appointments.

⚙️ Integration with Back-End

This front-end project is designed to seamlessly integrate with its counterpart back-end project 👉🏽Appointment-capstone-backend. The Back-end project provides the API endpoints and database for the front-end project.

🛠 Built With

Tech Stack

Built With

Tech Stack

Client

Server

Key Features

• Authenticate users: Create an account by providing a valid name, e-mail, and password with password confirmation. Once your account is created, you'll be automatically logged in and can access all of the app's features.

• User-Friendly Interface: The app offers an intuitive and visually appealing user interface, ensuring a seamless experience for users of all backgrounds.

• Appointment Booking: Users can easily browse and book appointments for a wide range of home services, from cleaning to plumbing, with just a few clicks.

• Reservation Management: The app allows users to view and manage their reservations, providing a convenient overview of upcoming appointments.

• Responsive Design: Our app is responsive, ensuring a consistent and enjoyable experience on both mobile devices and desktops.

(back to top)

🚀 Live Demo

• Enjoy the live version of the app 👉🏽 here

(back to top)

💻 Getting Started

Prerequisites and setup instructions for the project are listed below.

Prerequisites

In order to run this project you need:

• Computer running MacOS, Linux or Windows
• Terminal (MacOS/Linux) or Command Line (Windows)
• Git (Download)
• Web browser (Chrome, Firefox, etc.)
• Source code editor (VSCode, Atom, etc.)
• Node.js (version 14.15.4 or higher) (Download)
• NPM (version 6.14.10 or higher) (Download)
• React (Create React App)
• Redux (React Redux)

(back to top)

Setup

1. Clone the repository:

open git bash
git clone https://github.com/lincoln1883/Appointment-capstone-frontend.git
cd Appointment-capstone-frontend

2. Install the dependencies:

npm install

3. Modify your local environment: To setup your environment variables, you need to create a .env file in the root directory of the project and add the following line:

• For development:

REACT_APP_API_URL=http://localhost:3001/api/v1
REACT_APP_API_AUTH_URL=http://localhost:3001

• For production:

REACT_APP_API_URL=https://appointments-ajt3.onrender.com/api/v1
REACT_APP_API_AUTH_URL=https://appointments-ajt3.onrender.com 

4. Start the app in a Power-Shell/bash terminal:

npm start

5. Open your web browser and navigate to: http://localhost:3000/ to access the application.

6. Back End: You need to have the back-end running in order to see the run your frontend server, please visit the Appoinment-capstone-backend repository and follow the instructions in the README file.

(back to top)

Tests

Testing Instructions

To ensure the reliability and functionality of this project, we have included a "tests" section. This section includes unit tests for the project's components and integration tests for the project's functionality.

Tools and dependencies used in the testing are listed below:

- Jest
- Jest-Dom
- React Testing Library
- Redux Mock Store
- Redux Thunk

We use React Testing Library in combination with Jest and jest-dom for our testing framework. These tools allow us to perform various types of tests, including unit tests and integration tests, ensuring that the application's components and functionality work as expected.

Follow these specific instructions to correctly run the tests using npm.

1. Open your terminal or command prompt.

example:

open git bash

2. Navigate to the project directory using the cd command:

cd path/to/your/project
example:
cd ~/Documents/GitHub/Appointment-capstone-frontend

3. Install project dependencies (if you haven't already) by running:

npm install

4. Now, run the tests using the following command:

npm test

5. Observe the test results in your terminal. Any failures or errors will be displayed, helping you identify and address any issues.

Running these tests regularly ensures that your project maintains its expected behavior and helps catch any regressions or bugs early in development.

(back to top)

👥 Authors (in alphabetical order)

This project was developed by the following people:

👤 Cosmos Hagan

• GitHub: cosmosha
• LinkedIn: cosmoshagan
• Twitter: @hagancosmos

👤 Ibrahim Hossain

• GitHub: ibugithub
• LinkedIn: ibuu
• Twitter: @mdibrahimibuu

👤 Jorge Camargo

• GitHub: @jicamargo
• LinkedIn: Jorge Camargo
• Twitter: @ji_camargo

👤 Lincoln Gibson

• GitHub: lincoln1883
• LinkedIn: lincoln-gibson
• Twitter: @lincolngibson7

👤 Moyasi Ginko

• GitHub: @MoyasiGinko
• LinkedIn: moyasi
• Twitter: @moyasi_ginko

(back to top)

📈 Kanban Board

The project's kanban board is available here

You can see a screenshoot of the initial state of the board below:

(back to top)

🔭 Future Features

• Add categories to services
• Add payment processing
• Add user profiles
• Add user reviews and ratings

(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 it a ⭐️!

(back to top)

🙏 Acknowledgments

• We would like to thank to microverse For teaching me the database and more things.
• Thank to Murat Korkmaz on Behance for the design of the website 👉🏽.(https://www.behance.net/gallery/26425031/Vespa-Responsive-Redesign)
• Thanks a lot to everyone who will get time to check this out.

(back to top)

📝 License

This project is MIT licensed.

(back to top)