YAHYA MOTORS FRONT-END
##INTRODUCTION
.The website is a front-end interactive,easy to use application
## DESCRIPTION
The app main functionality is to enable users to navigate to the app with ease,login to the app before viewing cars, select the type of car they need a functionality that have been achieved using filter method in react,select the car they need by being able to view the car parts(back,side,front and inside car). On satisfaction, the buyer can go back view another car. The second part of the app is the admin section where the admin logs in to his/her account and is redirected to the dashboard where he/she can get acess to all that is taking place in the website. Below is attached short video of how the dasboard functions.
This project was contributed by :
Here is a sample sccreensot ofz the app.
Screencast.from.14-11-2022.9.16.27.WD.webm
Home page
Screencast.from.14-11-2022.9.21.23.WD.webm
Repository Front-End Github : https://github.com/Lucy-okoth/yahya_motors
Repository Back-End Github :https://github.com/Lucy-okoth/yahya_motors_backend
clone : [email protected]:Lucy-okoth/yahya_motors.git
##Table of Contents
.Problem Statement
.Setup
.Technologies Used
.Video Demo
.Problems Encountered
Problem Statement
.The app main functionality is to enable users to navigate to the app with ease,login to the app before viewing cars, select the type of car they need a functionality that have been achieved using filter method in react,select the car they need by being able to view the car parts(back,side,front and inside car). On satisfaction, the buyer can go back view another car.
The second part of the app is the admin section where the admin logs in to his/her account and is redirected to the dashboard where he/she can get acess to all that is taking place in the website. Below is attached short video of how the dasboard functions.
.Setup/Usage
.To use this app click on home page, in the home page you'll get to see the shop now button which will redirect the customer to the cars page. In the car page, you'll be able to see all the cars availabe and by clicking on a specific car model eg Nissan, you will be redirected to the Nissan car page with all Nissan cars available. You can then select the type of Nissa you want a property thjat has been accomplished by filter method in react. By clicking on the specific car model, you'll be able to update the car model details i.e(name, model,price,seats,transmission etc) After this you will be redirected to the admin page where the admin enters their user name and password to login. THis will redirect you to the dashboard which has or grants access to all the pages/components in the app itself.
We have ensured proper use of CRUD operations where a customer can be able to view cars available, the admin can update the cars available and sell Cars.The admin can finally update the cars available after selling the car.
.Technologies Used Tailwind CSS- For designing front-end and esuring the app is responsive. React JS- Uses for developing the front-end RUBY + SINATRA -Used to develope back-end configurations and send http request. SQLITE - Used to ensure active models are all set up to query data from the database.
.Screen Shots
.Requirements
You need a phone,Ipad or laptop with stable internet
Connection to run the app.
npm start to start the front end the in the back-end code run bundle exec rake server to connect your back-end to front end.
.Cloning
Clone the site and run it on your machine using the command below on your terminal and then run it
[email protected]:Lucy-okoth/yahya_motors.git
Licence Information
MIT License
Copyright (c) 2022 Yahya-Motors project
-->