‘Alejandra Hair Salon’ is a web app for a hair salon located at the heart of little Italy in the Bronx. This web app aims to serve as a virtual storefront to brand the business to become recognizable, differentiated, and consistent among other competitors in the area. The app will have a booking system that will allow customers to book appointments.
-
When a new customer visits the app, the first screen will have either a full screen slideshow or a background video.
-
A navigation with ABOUT/SERVICES/HOURS & LOCATION/APPOINTMENTS
-
A customer/user would have the ability to book, reschedule and cancel an appointment.
The App uses React for the front-end file structure and routing between pages.
The Rails-Backend handles the requests that the front end sends. This happens via routing requests.
The App uses a database table consisting of three columns for the handling of the bookings
The App uses a Material Design based front-end framework that allows it to be responsive and modular.
Axios POST request
handleApptSubmit = (e) => {
e.preventDefault();
axios('/appointments', {
method: 'POST',
data: {
appointment: {
service: this.state.service,
appt_time: this.state.appt_time,
hairstylist: this.state.hairstylist
}
}
}).then(res => {
this.setState({
redirect: true,
currentPage: 'appointments'
});
})
.then(res=>{
this.setState({
redirect: false
})
})
.catch(err => {
console.log(err);
});
}Axios GET request
componentDidMount() {
if(this.props.appt_id !== undefined){
let appt_id = this.props.appt_id
axios(`/appointments/${this.props.appt_id}`, {method: 'GET'})
.then(res => {
this.setState({
appointmentData: res.data.appointment,
appointmentDataLoaded: true,
appt_id: appt_id
})
});
}else {
this.setState({
redirect: true,
})
}
}Auth