Booking-app-frontend

This app uses a Rails back-end as an API to send doctor details and appointment data to the frontend of a booking application.

Connect to our API or design and connect your own. Enjoy your Booking App!

Live server

Demo

Link to RAILS BACKEND

RAILS BACKEND

Built With

• Rails-Booking-App API
• REACT
• REDUX
• Thunk

Milestones

Project Requirements - distributed into milestones below:

Booking-app-frontend

• Milestone 1: Setup the project for the frontend (group task)

• Milestone 2: Node package manager dependencies (group task)

• Milestone 3: Create login page (group task)

• Milestone 4: Create navigation panel (group task)

• Milestone 5: Create main page (Ranjit)

• Milestone 6: Create details page (Melaku)

• Milestone 7: Create Reservation page (Steve)

• Milestone 8: Create my reservation page (Ismail)

• Milestone 9: Create the redux store (group task)

• Milestone 10: Create the doctor reducer (group task)

• Milestone 11: Create the reservation reducer (group task)

• Milestone 12: Create the login reducer (group task)

• Debug linter errors

Screenshots

Desktop version

Mobile Version

Getting Started

To get a local copy up and running follow these simple example steps.

Pre-requisites

• Text Editor | Git and Github set up

Usage

In your terminal, navigate to your current directory and run this code

[email protected]:Melaku05/booking-app-frontend.git

Then run:

cd booking-app-frontend

Open the project in your favorite code editor. code . for VS Code.

For Local machine please UPDATE your URL

Change the URL to your backend URL in ./helpers/ApiUrl.js

ex. const url = 'http://localhost:3000/';

Dependencies

• Run npm install - to load necessary files from package.json

• Then click on http://127.0.0.1:3000

Linter Setup

• Apply Linter checks with the following instructions

• Stylelint: Install stylelint for clean Styles and elimination of related errors. Run:npm install --save-dev [email protected] [email protected] [email protected] [email protected] Afterwards create a .stylelintrc.json file and then run npx stylelint "**/*.{css,scss}" to check errors. Use npx stylelint "**/*.{css,scss}" --fix to fix multiple errors.

• Eslint: To find and fix script errors, run npm install --save-dev [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] @babel/[email protected] @babel/[email protected] @babel/[email protected] @babel/[email protected] @babel/[email protected] After, create a .eslintrc.json file. Then run npx eslint . to print errors. Use npx eslint . --fix to fix multiple errors.

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

Usage

• Login into Booking App with your username
• Click on the list of Doctors to see their specific detailed information
• From Navigation or from details page click 'Reserve' to book an appointment
• Click from Navigation panel, 'My Reservation' to view a list of your appointment details

Enjoy saving time on long appointment calls by using our top ranking appointment booking App!

Author 1:

👤 Melaku Eshetu

• GitHub: Melaku05
• Twitter: Melaku
• LinkedIn: LinkedIn

Author 2:

👤 Ranjit Luwang

• GitHub: @aboongm
• Twitter: @John_luang1
• LinkedIn: LinkedIn

Author 3:

👤 STEVE W DAMES JR

• GitHub: @githubhandle
• Twitter: @twitterhandle
• LinkedIn: LinkedIn

Author 4:

👤 Ismail Courr

• GitHub: @ismailco
• Twitter: @ismailcourr
• LinkedIn: Ismail courr

🤝 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

• Hat tip to anyone whose code was used
• Original design idea by Murat Korkmaz on Behance.

📝 License

This project is MIT licensed.