Code Monkey home page Code Monkey logo

ha-manel / luxy-rides-frontend Goto Github PK

View Code? Open in Web Editor NEW
8.0 1.0 3.0 685 KB

This project is made for the reservation of fancy cars. If you're preparing for a special day/event and you want a cool car for it this website is the best place for you. If you have a luxurious car and want to make some extra money from it, you can add that to our website and others will be able to reserve it!

Home Page: https://luxy-ride-frontend.vercel.app/

HTML 1.70% CSS 19.92% JavaScript 78.37%
bootstrap5 css react reservations ruby-on-rails

luxy-rides-frontend's Introduction

Luxy Rides

This project is made for the reservation of fancy cars. If you're preparing for a special day/event and you want a cool car for it this website is the best place for you. If you have a luxurious car and want to make some extra money from it, you can add that to our website and others will be able to reserve it!

Main features of this website are:

  • Users can see details of all the cars.
  • Users can reserve a car for a special day (a car that hasn't been reserved yet).
  • Users can add their own cars and remove them if they want to.

Animation

Project Documentation ๐Ÿ“„

  • Live demo link๐Ÿ‘ˆ
  • API deployment link๐Ÿ‘ˆ
  • API GitHub repository link๐Ÿ‘ˆ

Kanban Board:

Kanban Board link

Initial state of the Kanban Board:

image

Team members: 3 (Manel Hammouche, Hammad Siddique, Toussaint Saraza)

Built With ๐Ÿ› ๏ธ

  • Programming Languages: HTML, CSS, JavaScript.
  • Frameworks: React, Redux and Bootstrap.
  • Code Editor: VS Code.

Getting Started

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

Prerequisites

  • A web browser like Google Chrome.
  • A code editor like Visual Studio Code with Git and nodejs.

You can check if Git is installed by running the following command in the terminal.

$ git --version

Likewise for Node installation.

$ node --version

Setup

Clone the repository using the GitHub link provided below.

Install

In the terminal, go to your file directory and run this command.

$ git clone [email protected]:ha-manel/Luxy-Rides-Frontend.git

Usage

Run locally

Make your way to the correct directory by running this command:

$ cd Luxy-Rides-Frontend

Install the required dependencies to run the project with this command:

$ npm install

Then run it in your browser with this command:

$ npm start

Kindly modify the files as needed.

Run tests

To run tests, please run this command

$ npm run test

Authors

๐Ÿ‘ค Manel Hammouche

๐Ÿ‘ค Toussaint Saraza

๐Ÿ‘ค Hammad Siddique

๐Ÿค 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

๐Ÿ“ License

This project is MIT licensed.

luxy-rides-frontend's People

Contributors

ha-manel avatar hammadsiddique avatar sarazatoussaint avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

luxy-rides-frontend's Issues

[3pt] Setup the details page

  • In the details page, the user can see the details page with its full description (skip the "Rotate image" button).
  • The user can click the "Reserve" button (in the design you can see the "Configure" button - please replace it with the "Reserve" button).

[3pt] Setup reservation

  • To reserve an appointment, the user has to select a date and city (username and selected item are autofilled).
  • 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 username is autofilled.

[2pt] Delete an item

  • When the user clicks the "Delete item" link in the navigation panel they can see a list of all items with title and "Delete" button.
  • When the user clicks the "Delete" button, the selected item is marked as removed and does not show on the main list anymore.

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

[1.5pt] Create the navigation pannel - GROUP TASK

  • In the navigation panel, the user can see links to:

    • Items that you selected as a theme.
    • "Reserve" form.
    • "My reservations".
    • "Add item" that you selected as a theme (the link is visible to everybody).
    • "Delete item" that you selected as a theme (the link is visible to everybody).

[2pt] Add new item

  • When the user clicks the "Add item" link in the navigation panel they can see a form for adding a new item.

[3pt] Setup the main page

  • On the main page, the user can see a list of the items (that you selected as a theme).
  • When the user selects a specific item, they can see the details page.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.