ITurres / tesla-booking-front-end

Tesla's booking Website (front-end). See back-end at https://github.com/mahammad-mostafa/tesla-booking-back-end. Team: @ITurres, @mahammad-mostafa, @demesameneshoa, @78fatemanazari.

Tesla | Booking App

---

📗 Table of Contents

• 📖 About the Project
  • 📊 Kanban
  • 🛠 Built With
    • Tech Stack
• ⚙️ Setting Up Environment Variables
• 🖥️ Backend Integration
  • 🔑 Key Features
  • 🚀 Live Demo
• 💻 Getting Started
  • Setup
  • Prerequisites
  • Install
  • Usage
• 👥 Authors
• 🔭 Future Features
• 🤝 Contributing
• ⭐️ Show your support
• 🙏 Acknowledgements
• 📝 License

---

📖 Tesla | Booking App

Tesla | Booking App is a project developed by Front-end Arturo Emanuel Guerra Iturres, Mahammad Mostafa, and Back-end Demes Ameneshoa and Fatema Nazari.

Book your ideal Tesla model effortlessly with our new Tesla vehicle booking app! Enjoy daily rates on our five available models, available in cities worldwide. Experience the best service in the industry.

• Back-end repository: Tesla | Booking App - Back-end.

---

Learning objectives

• Apply technical knowledge and skills gained in previous modules in a complex project.
• Understand pros and cons of different approaches of connecting Ruby on Rails back-end with React front-end.
• Understand principles of Ruby on Rails and React frameworks.
• Apply JavaScript best practices and language style guides in code.
• Apply React best practices and language style guides in code.
• Learn about and practice giving constructive feedback to teammates.
• Perform a code reviews for a team member.
• Use the "Review change"" feature from GitHub.
• Write clear, professional, and respectful review comments for other team members.
• Explain "why" a change is requested when giving a code review.
• Plan a 2+ week project with no interim Microverse-set milestones and submit it on time.
• Apply knowledge of setting working agreements to set group project teams up for success.
• Independently implement best practices for group agreements to improve teamwork in larger group project.
• Demonstrate ability to apply best practices of communication for resolving teamwork challenges.
• Understand that respect is the foundation of strong relationship-building with teammates.
• Show up throughout group projects as a reliable and committed team member who communicates and manages your time effectively.
• Recognize the importance of investing in good working relationships with teammates.
• Understand principles of strong teamwork (being reliable, committed, and consistent) and how to apply them in group projects.
• Recognize the value of making equal contributions to group projects to produce the best outcome.
• Use empty Kanban board to manage tasks with team and own time on the project.

---

📊 Kanban Board

• Tesla Booking Front-end Kanban Board

Click to see the project's Kanban board initial state

(back to top)

---

🛠 Built With

Tech Stack

• React.js
• Redux
• JavaScript
• SCSS
• HTML

---

⚙️ Setting Up Environment Variables

In order to run this project, you'll need to set up your environment variables. We've provided a .env_sample file that you can use as a template. Follow these steps to configure your environment variables:

1. Create a Copy of .env_sample

   • Duplicate the .env_sample file and rename it to .env.

2. Replace Placeholder Values

   • Open the .env file in a text editor.
   • Replace the placeholder values (e.g., YOUR_API_BASE_URL, YOUR_API_SIGNUP_ENDPOINT, etc.) with your actual API details.

3. Save the Changes

   • Save the changes to the .env file.

4. Usage in the Project

   • The project will now automatically pick up the environment variables from the .env file during runtime.

Important Notes:

• Security: Keep your .env file secure and never expose it publicly, as it may contain sensitive information.
• Git Ignored: Ensure that the .env file is listed in your .gitignore to prevent accidental commits of sensitive information.

(back to top)

---

🖥️ Backend Integration

This project relies on a backend service to fetch and handle data. To ensure the project functions correctly, it's crucial to have a working backend with the corresponding API keys. If you don't have a backend set up yet, follow these steps:

1. Set Up Backend:

   • Create or use an existing backend service, e.g our Tesla Booking backend - repo | Tesla Booking API-documentation that supports the functionalities specified in the API endpoints provided in the .env file.

2. Replace API Endpoints:

   • Ensure that the API endpoints in the .env file match the corresponding routes and functionality in your backend.

3. Environment Variables:

   • Make sure that the environment variables set in the .env file are configured in your backend environment.

4. Run Backend:

   • Start your backend service to handle API requests from the frontend.

Note:

• Backend Requirement: This project requires a backend to fully operate. Ensure that your backend is configured correctly with the provided API keys for seamless integration.

Feel free to reach out if you encounter any issues or need further assistance with the setup.

(back to top)

---

🔑 Key Features

• Register with name, email, and password.
• Log in with email and password.
• View the latest models of Tesla vehicles.
• Book a ride for a Tesla vehicle.
• View the details of the vehicle.
• View the details of the reservation.
• Add a new vehicle to the database.
• Delete its own vehicles from the database.
• Responsive design for all devices.

(back to top)

---

🚀 Live Demo

• Live Demo Link

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

Setup

Clone this repository to your desired folder:

Example commands:

• With SSH:

  cd my-folder
  git clone [e-mail]:ITurres/tesla-booking-front-end.git

• With HTTPS:

  cd my-folder
  git clone https://github.com/ITurres/tesla-booking-front-end.git

• With GitHub CLI:

  cd my-folder
  gh repo clone ITurres/tesla-booking-front-end

Install

Install this project's dependencies with:

  npm install

Usage

To run the project, execute the following command:

 npm run start

Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.

The page will reload when you make changes.
You may also see any lint errors in the console.

Run Linters

ESLint

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

Stylelint

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

(back to top)

---

👥 Authors

👤 Arthur Iturres

• GitHub: @ITurres
• LinkedIn: Arthur Emanuel G. Iturres
• Angellist / Wellfound: Arturo (Arthur) Emanuel Guerra Iturres
• Youtube: Arturo Emanuel Guerra Iturres - Youtube Channel
• Portfolio: Arthur Iturres - Portfolio

👤 Mahammad Mostafa

• GitHub
• Twitter
• LinkedIn

(back to top)

---

🔭 Future Features

• Test the app with Jest and React Testing Library.
• Address all the inner issues left at the final-touches issue.
• Dark mode.
• Option to Delete reservations.
• Add "Social Login".
• Replace Loading Spinners with Loading Structure (Skeleton Loading).
• TypeScript migration.

(back to top)

---

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

(back to top)

---

⭐️ Show your support

Give a ⭐ if you liked this project!

(back to top)

---

🙏 Acknowledgments

• We the team would like to thank each other for the hard work and dedication to this project. We would also like to thank the Code Reviewers and Project Managers for their support and guidance throughout the project.

• Original design idea by Murat Korkmaz.

(back to top)

---

📝 License

This project is MIT licensed.

(back to top)

---