jfoyarzo / final-capstone-frontend

The frontend of the Microverse final capstone group project. It was built using React by a team of 5 developers to graduate from the Microverse program

📗 Table of Contents

• 📗 Table of Contents
• 👴Private Investigator
  • 🛠 Built With
    • RoR & React
    • Key Features
  • 🚀 Live Demo
  • 🔗 Link to the Back-End API app
  • 💻 Getting Started
    • Prerequisites
    • Setup
    • Install
    • Usage
    • Run tests
  • ✍ Authors
  • 🔭 Future Features
  • 🤝 Contributing
  • ⭐️ Show your support
  • 🙏 Acknowledgments
  • ❓ FAQ
  • 📝 License

👴Private Investigator

Private Investigators is the ultimate solution for booking appointments with professional investigators. Our React app is designed to make the process of finding and booking an investigator as easy and seamless as possible. With a user-friendly interface and intuitive design, Private Investigators is the perfect tool for anyone in need of investigative services. Whether you're looking to investigate a business partner, or simply need help with a personal matter, Private Investigators has got you covered. Try it out today and experience the power of our cutting-edge React app.

🛠 Built With

RoR & React

Client

• ReactJS

Server

• /Rails/Rack

Database

• PostgreSQL

Key Features

• User-friendly interface: The app has a simple and intuitive design.
• Booking system: The app allows users to book appointments with professional investigators.
• Professional investigators: The app connects users with a network of professional investigators.
• Confidentiality: The app ensures the confidentiality of all user information and case details.

(back to top)

🚀 Live Demo

• Here's the link for the live demo of the app:: 👉 Private Investigators

🔗 Link to the Back-End API app

• Private-Investigators-Back-End

(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 to have:

NodeJS
npm (Node Package Manager)
And a Code editor

Setup

Clone this repository to your desired folder:

 git clone https://github.com/jfoyarzo/final-capstone-frontend.git

Move inside the directory:

 cd final-capstone-frontend

Install

 npm install

Setup the .env file

Navigate to the root directory and rename the ".env.example" file to ".env".

The .env file is necessary inorder for the app to operate properly.

Usage

To run the project, execute the following commands:

 npm start

Run tests

To run the tests, run the following command:

  npm test

And finally open the app on http://localhost:3000/

🔔Note: This app consumes APIs that are built using Ruby on Rails in a different repository (Link provided above). Please follow the steps in the README file of the back-end app to get the APIs server up and running.

(back to top)

✍ Authors

👨‍💻 Felipe Oyarzo

• GitHub: @jfoyarzo
• LinkedIn: LinkedIn

👨‍💻Mátyás Gombos

• GitHub: @MattGomb
• LinkedIn: LinkedIn

👨‍💻 Waris Haleem

• GitHub: @iAmWaris97
• LinkedIn: Waris Haleem

👨‍💻 Chris Clothier

• LinkedIn: @chris
• Github: @chris

👨‍💻 Emmanuel Orji-Ihuoma

• GitHub: @emmiiorji
• LinkedIn: LinkedIn

🔭 Future Features

• Real-time updates: Implement real-time updates to provide users with up-to-date information without needing to refresh the page.
• Integration with third-party services: Integrate the app with third-party services like Google Maps, PayPal, or Stripe to provide additional functionality.
• Search functionality: Implement a search feature that allows users to search for specific content within the app.

(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 stars on GitHub.

(back to top)

🙏 Acknowledgments

Special thank to Murat Korkmaz for providing the design guidelines.

(back to top)

❓ FAQ

• Is this app free to use?

  • Yes certainly, it is free to use this app.

• Is this app secure?

  • The app uses various security measures, such as encryption, authentication, and authorization, to protect user data and prevent unauthorized access.

(back to top)

📝 License

This project is MIT licensed.

(back to top)

final-capstone-frontend's Issues

[1.5 pt] Main Page (Investigators #index)

• It should list all the items
• And should contain links to the details page of each item

[1.5 pt] My Reservations 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).

[2 pt] Unit and integration Testing

• Setup unit tests for components and reducers
• Setup integration tests for component user interactions

[2 pt] Frontend Authentication

• Add a Landing page with a link to sign up and log in
• Add a signup and login component
• On login, the current user will be added as a state slice to the store

[2 pt] 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.

[1 pt] Frontend Documentation

• Add documentation for the Frontend part of the app

[1pt] Implement Authorization rules

Setup roles
The "Add item" and "Delete item" links are accessible only by users who are admins.

[1.5 pt] Navigation Panel

• It should contain 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 admins only).
  • "Delete motorcycle/doctor/class/item that you selected as a theme" (the link is visible to admins only).

[1 pt] Frontend Deployment

• Deploy the frontend on Netlify

[0.5 pt] Set up React App

• Create a new React app
• Install dependencies:
  • react-router-dom
  • redux-toolkit
  • react-redux
  • Bootstrap for styles

[2 pt] Details Page (Investigator #show)

• It should display details of the items with full description
• Should have a 'Back' and 'Reserve' button
• The Reserve button should link to the form for creating a new reservation
• The Back button should take the user back to the main page (list of items)

[2 pt] New Reservation Page

• 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 the username is auto-filled.