Book An Appointment App - Front End - Final Capstone

Book An Appointment App - Front End - Final Capstone

📗 Table of Contents

• 📗 Table of Contents
• 📖 About project
  • 📖 Kanban Board
  • 🛠 Built With
    • Tech Stack
    • Key Features
  • 🚀 Presentation
  • 💻 Getting Started
    • Prerequisites
    • Setup
    • Install
    • Usage
    • Run tests
    • Deployment
  • 👥 Authors
  • 🔭 Future Features
  • 🤝 Contributing
  • ⭐️ Show your support
  • 🙏 Acknowledgments
  • ❓ FAQ
  • 📝 License

📖 About project - Book An Appointment App - Front End (React & Redux) - Final Capstone

The Book An Appointment App - Front End - Final Capstone project is a project using React.js and Redux, that connects to a back-end API project which provides the data.

Front-end application name: book-an-appointment-front-end-mv-final-capstone link: https://github.com/jcmunav63/book-an-appointment-front-end-mv-final-capstone.git

Back-end application name: book-an-appointment-back-end-mv-final-capstone link: https://github.com/jcmunav63/book-an-appointment-back-end-mv-final-capstone.git

📖 KANBAN BOARD - Book An Appointment Web App - Ruby on Rails Back-End

• Number of team members: 3 (Julio Alejandro Quezada, Kazim Mohammadi, Juan Carlos Muñoz)

• Link to our Kanban Board: https://github.com/users/jcmunav63/projects/6/views/1

• Links to 2 images that show our Kanban Board at the beginning...

  • First image (Kanban Board - table view) https://drive.google.com/file/d/1ZEWuTbIN_ITMl13PYAsZh3aQ4zbOEOJT/view?usp=drive_link

  • Second image (Kanban Board - table view) https://drive.google.com/file/d/132tbQEmSjXSmgK0uiCKLVfwkUYCtLdNi/view?usp=drive_link

🛠 Built With

Tech Stack

• React.js
• Redux.js

Key Features

• Set up a React & Redux front-end project.
• Connect the React-Redux project to a back-end API endpoint, provided by the Ruby on Rails complementary project.
• Implement a splash screen, a navigation panel, in our case, we implemented an authentication feature (login & sign up), a main page of products, a details page of a specific product, and a page for reservations of products.
• Implement some functionalities for Products and Reservations: create, display (list), and delete.

(back to top)

🚀 Presentation

Not available at the moment.

(back to top)

💻 Getting Started

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

Prerequisites

In order to run this project you need:

Install React.js

Install Redux.js

Prerquisites: Node.js, npm...

Setup

  cd my-folder
  git clone https://github.com/jcmunav63/book-an-appointment-front-end-mv-final-capstone.git

Install

This project requires the following dependencies: Additionally, the project requires the following linters checkers: Stylelint (CSS styles), ESLint (JavaScript).

npx create-react-app my-app

npm install @reduxjs/toolkit

Usage

To run the project, navigate to the project directory and execute the following command:

Start the Webpack web server typing the following command...

  npm start

Run tests

• Install the Stylelint linters.

Install Stylelint linters checker using the following command...

npm install --save-dev [email protected] [email protected] [email protected] [email protected]

• Remember to copy the .stylelintrc.json file to the root directory.

Install ESlint linters checker using the following command...

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]

• Remember to copy the .eslintrc.json and the .babelrc files to the root directory.

• Copy the linters.yml file inside of path .github/workflows

To run LINTERS, run the following command:

Run the following command for CSS code...

npx stylelint "**/*.{css,scss}"

Run the following command for JavaScript code...

npx eslint "**/*.{js,jsx}"

(back to top)

👥 Authors

👤 Juan Carlos Muñoz

• GitHub: @jcmunav63
• Twitter: @jcmunav63
• LinkedIn: @juan-carlos-muñoz

👤 Julio Alejandro Quezada

• GitHub: Alejandroq12
• Twitter: @JulioAle54
• LinkedIn: Julio Quezada

👤 Kazim Mohammadi

• GitHub: @Kazim110
• Twitter: @Kazim471
• LinkedIn: @Kazim Mohammadi

(back to top)

🔭 Future Features

• No future features.

(back to top)

🤝 Contributing

Contributions, issues, and feature requests are welcome!

(back to top)

⭐️ Show your support

If you like this project please give a star. Thanks in advance.

(back to top)

🙏 Acknowledgments

• We would like to acknowledge that our application is based on Murat Korkmaz application design called "Vespa - Responsive Redesign", which is open for use under the Creative Commons license. You can find this design on Behance. We are very grateful to Murat Korkmaz for his excellent contribution.

• We would like to thank our colleagues, who inspire us to do our best everyday.

(back to top)

❓ FAQ

Did you create this project from scratch?

• Yes. It is a complete Ruby on Rails project on the backend with connection to React.js & Redux.js on the frontend. It uses two repos, this one for the front-end and another one for the back-end.

(back to top)

📝 License

This project is MIT licensed.

(back to top)