Code Monkey home page Code Monkey logo

car-dealership's Introduction

Car Dealership

Summary

You were tasked to create a car dealership management tool for a used car dealer with multiple locations.

The base goals of this project will create a basic vehicle inventory management tool.

Index

Client Component Tree

Main Features

  • Base Goals

    • Show all cars
    • Show single car details
    • Add/Edit car
    • Show all locations
    • Show single location and their inventory
    • Add/Edit location

    Cars Routes

Client Routes

Route Name Request Method Example Request URL Route
cars index GET /cars /cars
single car page GET /cars/1 /cars/:car_id
cars edit GET /cars/1/edit /cars/:car_id/edit
cars new page GET /cars/new /cars/new

Server Routes

Route Name Request Method Example Request URL Route
all cars GET /cars /cars
cars create POST /cars /cars
cars update PATCH /cars/1 /cars/:car_id
cars destroy DELETE /cars/1 /cars/:car_id

Cars Table

Column Name Data Type
id SERIAL
vin STRING
year INT
make STRING
model STRING
miles INT
price INT
photo_url STRING
location_id INT
  • For scalability and analytics, you might consider normalizing this data a little more into separate tables, however, it's not required.

User Stories

  • As a user, I can see all of the cars with the year, make, model and the dealerships they are located at.
  • As a user, when I click one of cars in the list, I am taken to a page that shows me the full details about that car.
  • As a user, when I click the add button, it takes me to a form that allows me to add a car to the list.
  • As a user, I am able to remove a car from this list by clicking the delete button next to the car.
  • As a user, I can click the edit button to take me to a form that will let me edit the car.

Location Routes

Client Location Routes

Route Name Request Method Example Request URL Route
location index GET /locations /locations
single location page GET /locations/1 /locations/:location_id
location new page GET /locations/new /locations/new
location edit GET /locations/1/edit /locations/:location_id/edit

Server Location Routes

Route Name Request Method Example Request URL Route
all locations GET /locations /locations
location update PATCH /locations/1/ /locations/:location_id
location create POST /locations /locations
location destroy DELETE /locations/1 /locations/:location_id

Locations Table

Column Name Data Type
id SERIAL
name STRING
address STRING

User Stories

  • As a user, I can see all of the locations with the name.
  • As a user, when I click one of location in the list, I am taken to a page that shows me the full details about that location.
  • As a user, when I click the add button, it takes me to a form that allows me to add a location to the list.
  • As a user, I am able to remove a location from this list by clicking the delete button next to the location.
  • As a user, I can click the edit button to take me to a form that will let me edit the location.

UI

LandingPage

Screen Shot 2019-09-06 at 1 29 37 PM

CarLists

Screen Shot 2019-09-06 at 1 31 45 PM --Can Delete a car from the list

Individual Car Details

Screen Shot 2019-09-06 at 1 33 30 PM

Add a new Car

Screen Shot 2019-09-06 at 1 34 20 PM

Lists of all Dealership

Screen Shot 2019-09-06 at 1 36 03 PM

List of Cars in each Dealership

Screen Shot 2019-09-06 at 1 37 12 PM

Form to Add a New Dealership

Screen Shot 2019-09-06 at 1 38 02 PM

car-dealership's People

Contributors

shirleymramirez avatar

Watchers

 avatar

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.