bavarianrhino / vehicle_search_react_frontend

Auto Pasture is a Fullstack web application that connects buyers to vehicles that are otherwise not listed in marketplaces.This application includes a full gamut of features including everything from authentication, geolocation services, heavy usage of custom API queries and error handling of inconsistent data. *******PLEASE ALLOW SERVER TO WARM UP******

Auto Pasture

Auto Pasture is a fullstack web application that connects buyers to vehicles that are otherwise not listed on other mainstream marketplaces. Auto Pasture gives back the power to users with easy and simplified vehicle searches that connects them to sellers based on their own custom search parameters. This application includes a full gamut of features including everything from authentication, geolocation services, heavy usage of custom API queries and error handing of inconsistent data.

USERNAME: guest | PASSWORD: 1234

🌎 Motivation

Full-Stack Web application that profiles advanced features of React, Redux, and Ruby on Rails API with its perspective Github Repository if you desire to see the code. RESTfully persists user data with postgreSQL database via Active Record implementing a has-many-through model relationship along with full CRUD actions.

🎬 Demo

Login provided using Bcrypt and JWT authentication.

🔬 Learning Objectives

• Architectural considerations of building a full stack app
• Connect a front-end Create-React-App server to a Ruby on Rails backend
• Communicate data via RESTful API from the PostgreSQL database to the Client React Application
• Understand how to route user requests on the front end with React Router and on the backend with Active Record
• Enhance authentication flows in the app with the Ruby gems Bcrypt & JWT for Authentication

🛠 Tech/Framework Stack

🌖Front-End

• React.js, React-Redux, React-Router-Dom
• Redux, Redux-Form, Redux-Thunk
• JavaScript, ES6
• Semantic-UI-React
• ADD HERE

🌘Back-End

• PostgreSQL Database
• Served by Puma
• Active Record "Has-Many-Through" Schema
• Ruby, Ruby on Rails
• Rack CORS for handling Cross-Origin Resource Sharing (CORS) and AJAX
• Byebug and Pry-Rails used in Debugging Development
• Spring and Spring-Watcher-Listen used to speed-up Development

☁️API

• MarketCheck Automotive API

🚀Deployment

• Ruby on Rails API hosted on Heroku
• React hosted on Github Pages

💻 Local Env Installation

🔨 Installation

  $ git clone [e-mail]:bavarianrhino/vehicle_search_rails_backend.git
  $ cd vehicle_search_rails_backend
  [server]$ bundle install
  [server]$ rails db:create
  [server]$ rails db:migrate
  [server]$ rails db:seed

  $ git clone [e-mail]:bavarianrhino/vehicle_search_react_frontend.git
  $ cd vehicle_search_react_frontend
  [server]$ yarn install

🔨 Development Configuration

• Sign up with MarketCheck Automotive API and save your api key in a newly created '.env' file at the root level of the client-react directory.

  REACT_APP_MARKETCHECK_API_KEY=your_api_key_goes_here_with_no_quotes

🔨 Running the application

• To serve the Ruby on Rails API navigate to the backend directory and execute the server command as seen below.
• To start the client side of the application, navigate to the react frontend directory and execute the client command as seen below.

  [server]$ rails s
  [client]$ yarn start

🚧 TODO

• Error Handling
• Vin Check
• Clear Vehicle Milage/Cost Graph