🔥 Deploy : Release v0.0.2

README.md

@@ -1,35 +1,36 @@
 <a name="readme-top"></a>
+
 <details>
 <summary>Table of Contents</summary>
 
-- [🚗 RENTCAR - Luxury cars renting plateform ](#-rentcar---luxury-cars-renting-plateform-)
+- [🚗 RENTCAR - Luxury cars renting platform ](#-rentcar---luxury-cars-renting-platform-)
   - [📸 Screenshots ](#-screenshots-)
   - [🚀 Live Demo](#-live-demo)
   - [📋 Kanban Board](#-kanban-board)
     - [Kanban Board.](#kanban-board)
     - [The members: @Salwa, @Ahmed, @Talha](#the-members-salwa-ahmed-talha)
-  - [Tech Stack  ](#tech-stack--)
-  - [✨ Key Features  ](#-key-features--)
-  - [📘 Getting Started  ](#-getting-started--)
+  - [Tech Stack ](#tech-stack--)
+  - [✨ Key Features ](#-key-features--)
+  - [📘 Getting Started ](#-getting-started--)
     - [📋 Prerequisites](#-prerequisites)
     - [Setup ](#setup-)
     - [📥 Installation](#-installation)
     - [💾 Database](#-database)
     - [💻 Usage](#-usage)
     - [🧪 Tests](#-tests)
-  - [👨‍💻 Authors  ](#-authors--)
+  - [👨‍💻 Authors ](#-authors--)
     - [👤 **Salwa Ballouti**:](#-salwa-ballouti)
     - [👤 **Ahmed Hasan Rony**](#-ahmed-hasan-rony)
     - [👤 **Muhammad Talha Hanif**](#-muhammad-talha-hanif)
-  - [🎯 Future Features  ](#-future-features--)
+  - [🎯 Future Features ](#-future-features--)
   - [🙏 Acknowledgements](#-acknowledgements)
   - [💎 Resources](#-resources)
-  - [🤝 Contribution  ](#-contribution--)
-  - [💖 Show Your Support  ](#-show-your-support--)
+  - [🤝 Contribution ](#-contribution--)
+  - [💖 Show Your Support ](#-show-your-support--)
   - [📜 License ](#-license-)
-</details>
+  </details>
 
-# 🚗 RENTCAR - Luxury cars renting plateform <a name="about-project"></a>
+# 🚗 RENTCAR - Luxury cars renting platform <a name="about-project"></a>
 
 **RENTCAR** is a collaborative project, it's about luxury car rental platform built with Rails and React. Users can browse and reserve available models, manage reservations, and contribute by adding or deleting cars. It offers a seamless experience for renting luxury cars with ease.
 
@@ -43,59 +44,54 @@
   <img src="https://github.com/roniy68/capstone-rails/assets/77187003/f2359c19-0684-4b01-97b2-66236afa374c" width=400 height=250 alt="screenshot" />
 </p>
 
-
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
 
-
 ## 🚀 Live Demo
 
 [RENTCAR-Luxury Cars](https://capstone-rails.onrender.com/)
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
 
-## 📋 Kanban Board 
+## 📋 Kanban Board
 
 We have used a Kanban board to split the tasks and simplify the project workflow.
 
 ### [Kanban Board](https://github.com/roniy68/capstone-rails/projects/1).
 
 ### The members: [@Salwa](https://github.com/Salwa99), [@Ahmed](https://github.com/roniy68), [@Talha](https://github.com/Talha-Hanif5666)
 
-
 <img src="https://github.com/roniy68/capstone-rails/assets/77187003/bdb6c83b-1e4c-4d1b-98ed-cf28d59ed7f2" width=600 height=400 alt="kanban board" />
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
 
-## Tech Stack  <a name="tech-stack"></a>
-
-- **Back-end** 💻:   
-  <details>
-  <summary>Client</summary>
-  <ul>
-    <li><a href="https://rubyonrails.org/">Ruby on Rails</a></li>
-    <li><a href="https://redux-toolkit.js.org/">PostgreSQL</a></li>
-  </ul>
-</details>
+## Tech Stack <a name="tech-stack"></a>
 
-  - **Front-end** 💻: 
+- **Back-end** 💻:
     <details>
     <summary>Client</summary>
     <ul>
-      <li><a href="https://react.dev/">React</a></li>
-      <li><a href="https://redux-toolkit.js.org/">Redux Toolkit</a></li>
-      <li><a href="https://reactrouter.com/en/main">React Router</a></li>
-      <li><a href="https://tailwindcss.com/">Tailwind</a></li>
-      <li><a href="https://reactrouter.com/en/main">React icons</a></li>
+      <li><a href="https://rubyonrails.org/">Ruby on Rails</a></li>
+      <li><a href="https://redux-toolkit.js.org/">PostgreSQL</a></li>
     </ul>
-</details>
+  </details>
 
+  - **Front-end** 💻:
+  <details>
+  <summary>Client</summary>
+  <ul>
+  <li><a href="https://react.dev/">React</a></li>
+  <li><a href="https://redux-toolkit.js.org/">Redux Toolkit</a></li>
+  <li><a href="https://reactrouter.com/en/main">React Router</a></li>
+  <li><a href="https://tailwindcss.com/">Tailwind</a></li>
+  <li><a href="https://reactrouter.com/en/main">React icons</a></li>
+  </ul>
+  </details>
 
-- **Tools** 🛠: 
+- **Tools** 🛠:
   - [Rspec](https://rspec.info/)
   - [Esbuild](https://esbuild.github.io/)
   - [Render](https://render.com/)
 
-
 <details>
 <summary>Linter</summary>
   <ul>
@@ -107,7 +103,7 @@ We have used a Kanban board to split the tasks and simplify the project workflow
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
 
-## ✨ Key Features  <a name="key-features"></a>
+## ✨ Key Features <a name="key-features"></a>
 
 - **Log in with a username to access the palteform.**
 - **Browse list of available cars.**
@@ -118,13 +114,14 @@ We have used a Kanban board to split the tasks and simplify the project workflow
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
 
-## 📘 Getting Started  <a name="getting-started"></a>
+## 📘 Getting Started <a name="getting-started"></a>
 
 To get a local copy up and running, follow these steps.
 
 ### 📋 Prerequisites
 
 Make sure you have the following installed on your machine:
+
 - [Ruby 3.1.3 or higher](https://www.ruby-lang.org/en/)
 - [Rails 7.0.4 or higher](https://rubyonrails.org/)
 - [PostgreSQL 15.2 or higher](https://www.postgresql.org/)
@@ -143,6 +140,7 @@ Clone this repository to your desired foler.
 ```
 
 ### 📥 Installation
+
 Install the required gems with:
 
 ```sh
@@ -155,6 +153,8 @@ Install the node dependencies with:
 yarn install
 ```
 
+or
+
 ```sh
 npm install
 ```
@@ -174,26 +174,34 @@ To load the sample data, run:
 rails db:seed
 ```
 
+### 💾 API
+
+For API documentiation see the file [API Documentation](./readme-assets/API.md).
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
 ### 💻 Usage
 
 To run the project, execute the following command:
 
 ```sh
   ./bin/dev
 ```
+
 ### 🧪 Tests
 
 To run tests, run the following command:
 
 ```sh
-rspec spec 
+rspec spec
 ```
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
 
-## 👨‍💻 Authors  <a name="author"></a>
+## 👨‍💻 Authors <a name="author"></a>
 
 ### 👤 **Salwa Ballouti**:
+
 - GitHub: [@Salwa99](https://github.com/Salwa99)
 - Twitter: [@SalwaBallouti](https://twitter.com/salwa_ballouti)
 - LinkedIn: [LinkedIn](https://www.linkedin.com/in/salwa-ballouti)
@@ -212,7 +220,7 @@ rspec spec
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
 
-## 🎯 Future Features  <a name="future-features"></a>
+## 🎯 Future Features <a name="future-features"></a>
 
 - [ ] Implement the full authentication.
 - [ ] Implement edit car or reservation.
@@ -222,7 +230,7 @@ rspec spec
 
 ## 🙏 Acknowledgements
 
-This app was designed based on an original design idea by [Murat Korkmaz](https://www.behance.net/muratk) on Behance. 
+This app was designed based on an original design idea by [Murat Korkmaz](https://www.behance.net/muratk) on Behance.
 We would like to thank Murat Korkmaz for this inspiring design.
 
 - [App Design Template](https://www.behance.net/gallery/26425031/Vespa-Responsive-Redesign)
@@ -232,20 +240,22 @@ We would like to thank Murat Korkmaz for this inspiring design.
 ## 💎 Resources
 
 🎨 **Colors**
+
 - 🟢 Accent: #96bf01
 
 🖌 **Fonts**
+
 - Normal: [Roboto](https://fonts.google.com/specimen/Roboto)
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
 
-## 🤝 Contribution  <a name="contribution"></a>
+## 🤝 Contribution <a name="contribution"></a>
 
 Contributions, issues, and feature requests are welcome!
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
 
-## 💖 Show Your Support  <a name="support"></a>
+## 💖 Show Your Support <a name="support"></a>
 
 If you like this project, please consider giving it a ⭐.
 

app/javascript/components/fragments/Layout.jsx

@@ -2,11 +2,11 @@ import React, { useEffect, useState } from 'react'
 import Sidebar from './Sidebar'
 import { Outlet, useNavigate } from 'react-router-dom'
 // import NavBar from './NavBar'
-import { HiOutlineMenu, HiAnnotation, HiBell, HiOutlineUser } from 'react-icons/hi'
+import { HiOutlineMenu, HiAnnotation, HiOutlineUser } from 'react-icons/hi'
 import { AiOutlineLogout } from "react-icons/ai";
 
 const Layout = () => {
-  const [show, setShow] = useState(true)
+  const [show, setShow] = useState(false)
 
   const handleClick = (e) => {
     setShow(current => !current)
@@ -41,19 +41,19 @@ const Layout = () => {
             <div className="flex bg-[#96bf01] lg:h-[80px] md:h-[60px] p-4 sticky top-0 z-10 items-center justify-between">
               {/* Navbar Ham burger */}
               <div onClick={handleClick} className='flex-none text-white'>
-                <HiOutlineMenu size={36} />
+                <HiOutlineMenu size={30} />
               </div>
               {/* Navbar Menus */}
               <div className='flex text-slate-50 justify-end flex-auto gap-2'>
                 <div className='p-6'>
-                  <HiAnnotation size={36} />
+                  <HiAnnotation size={30} />
                 </div>
                 <div className='p-6'>
-                  <HiOutlineUser size={36} />
+                  <HiOutlineUser size={30} />
                 </div>
 
                 <div className='p-6'>
-                  <AiOutlineLogout size={36} onClick={handleLogout} />
+                  <AiOutlineLogout size={30} onClick={handleLogout} />
                 </div>
               </div>
             </div>

app/javascript/components/fragments/Sidebar.jsx

@@ -50,7 +50,7 @@ const Sidebar = () => {
           {links.map((link) => (
             <Link to={link.url}>
               <li
-                className={`p-4 ml-6 mb-4 text-[20px] lg:text-[30px] rounded-md ${
+                className={`p-4 ml-6 mb-4 text-[15px] lg:text-[25px] rounded-md ${
                   location.pathname === link.url
                     ? "bg-[#96bf01] text-white"
                     : "hover:bg-[#96bf01] hover:text-white"

app/javascript/components/fragments/navigation/AddCar.jsx

@@ -51,7 +51,6 @@ const AddCar = () => {
 
       if (response.ok) {
         const newCar = await response.json();
-        console.log("New car added:", newCar);
 
         setCarData({
           name: "",
@@ -72,9 +71,14 @@ const AddCar = () => {
   };
 
   return (
-    <div className="flex flex-col items-center justify-center h-screen">
-      {carAdded && <p className="bg-green-200 font-bold mb-6 p-4 rounded shadow-lg">New car has been added!</p>}
-      <div className="h-auto lg:w-[800px] w-[600px] p-6 bg-slate-300 rounded-lg shadow-lg">
+    <div className="flex flex-col items-center justify-center">
+      {carAdded && (
+        <p className="bg-green-200 font-bold mb-6 p-2 rounded shadow-lg">
+          New car has been added!
+        </p>
+      )}
+      <div className="h-auto w-auto lg:w-[800px] p-6 bg-slate-300 rounded-lg shadow-lg">
+        <h1 className="text-center text-[25px] font-bold mb-6">Add Car</h1>
         <form onSubmit={handleSubmit} className="space-y-4 shadow">
           <div>
             <label htmlFor="name" className="block mb-1">
@@ -139,7 +143,6 @@ const AddCar = () => {
               onChange={handleChange}
               className="w-full border border-gray-300 rounded px-3 py-2"
             />
-
           </div>
           <div className="flex justify-center items-center">
             <button
@@ -155,4 +158,4 @@ const AddCar = () => {
   );
 };
 
-export default AddCar;
+export default AddCar;