Skip to content

redundantinfo/frontend-deploy

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Fullstack project - HKR Beauty Salon

This is a fullstack web-application for a beauty salon.

Features:
User registration and login.
Registration and login with Google.
User profile.
Once logged in, the user can book a timeslot for a specific service.
The user will be sent a confirmation email for the booking.
Once a costumer has spent a certain amount of money, a discount coupon is added to the user profile.

Setting up the project

Install the node modules

npm install

Run the project

npm run dev

Enjoy developing!

Backend

Middleware

auth.js

Check if the role of the logged in user is 'admin' or 'user'

function checkRole()

Authenticate the user with JWT. Uses cookies for access token.

function authenticateUser()

Models

The mongoDB database models are located here.

admin.js
availableTime.js
booking.js
employee.js
service.js
user.js

Routes

Contains the REST api routes.

admin.js

Admin routes

Get users from userModel.

/getUsers

Get admins from adminModel.

/getAdmins

Get users by ID.

/getUsersById

Add a new user.

/addUser

Add a new admin to the database.

/addAdmin

Change user data.

/updateUser

Remove a user.

/removeUser

Update admin data.

/updateAdmin

Remote admin from database.

/removeAdmin

bookings.js

Booking routes

Get all bookings.

/getBookings

Get booking with service ID, uses auth middleware.

/getBookings/:service_id

Get bookings for a specific user, using user ID. Uses auth middleware.

/getBookingsByUserId

Delete a booking. Contains functionality for managing discount coupons upon booking removal. Will not allow removal of a booking for a timeslot that is less than 24 hours away.

/deleteBooking

Updates a booking.

/updateBooking

Adds a new user or admin booking. Also calculates amount of bookings for the user. Handles adding coupons once amount spent hits discount threshold. Handles email validation.

/postBooking

Get available timeslots for booking.

/getAvailableTimeSlots/:service_id/:date

Get booking amount for chosen service.

/getAmount/:service_id

Get booking amount for all services.

 /getAmount

employees.js

Employee Routes

Get employee by ID.

 /getEmployees/:ids

mail.js

Mail Routes

Confirm a booking by sending an email to the customer.

 function confirmBooking()

services.js

Service routes

Get all services.

 /getServices

Get a service by it's ID.

 /getServiceById/:_id

Create a new service. This is a helper route that can be used in a route.rest file.

 /createService

statistic.js

Statistics routes

Get total amount of users.

/getUsersCount

Get total amount of bookings.

/getBookingsCount

Get user with most bookings.

/getMostLoyal

Update customer coupon status.

/updateUserCoupon

Update customer booking.

/updateUserBooking

users.js

User routes

Get user data. Checks if role is user or admin. Uses auth middleware.

/getUserData

Get user data by ID.

/getUserData/:_id

Register a new user. Uses bcrypt for password encryption. Returns error if user already exists.

/register

Register a new admin. Uses bcrypt for password encryption. Returns error if admin already exists.

/registerAdmin

Login route. Compares pasword input with encrypted password in database. Creates accessToken cookie.

/login

Frontend

The frontend is made using React. It uses components that can be imported to where they're needed.

Components

AboutPage.jsx

Click me!

Return the about page code.

function AboutPage()

AdminPage.jsx

Click Me!

Finds the most loyal customer and displays them in a list using .map().

function AdminPage()
  useEffect()
    /statistic/getMostLoyal

Booking.jsx

Click Me!

Handle the booking.

function Booking()

Handles booking timeslots. Sets start and end times for the bookings. Displays the booking form.

Set start and end times for bookings. Display the booking form.

function handleBooking()

Uses .map for timeslots. Goes through timeslots to see if they are available or not.

handleNewTimeSlots()

Handles fetching the timeslots.

function fetchTimeSlots()
  /bookings/getAvailableTimeSlots/${_id}/${selectedDate}

Fetch the employees. Can be used for assigning an employee to a specific service.

function fetchEmployees()
  /employees/getEmployees/${employee_ids.join(",")}

Carousel.jsx

Click Me!

Returns image carousel for the main page.

function CarouselComp()

ContactUs.jsx

Click Me!

Handles contact page. Uses google maps API for displaying address location on map.

ContactUs()

GoogleLogin.jsx

Click Me!

Handles the user data returned from pressing google login button. Decoding the incoming JWT to allow for user credential storage in database.
Clicking the button fetches registration route. If the user already exists, clicking the button will fetch login route.

function handleCredentialResponse()
  /users/register
  /users/login

Initializes the google login functionality. Renders the google login button.

function initializeGoogleLogin()

Import API script before calling init function.

function GoogleLogin()

LoginForm.jsx

Click Me!

Handle login submission. Checks if user is 'user' or 'admin'. Sets login status based on if submission is successful or not.

handleLoginSubmit()
  /users/login

NavigationBar.jsx

Click Me!

Checks if accessToken cookie exists. Returns true or false.

function checkToken()

Registration.jsx

Click Me!

Handles registration form submission. Checks if person registering is 'user' or 'admin'.
Depending on user role, fetches the appropriate route.

function Registration()
  /admin/addAdmin
  /users/register

Validates form inputs. Checks for valid text formatting. Checks if both password inputs match.

validateForm()

Service.jsx

Click Me!
fetchServices()
  /services/getServices

User.jsx

Click Me!

Lets the user change their email on the profile page.

handleUpdateEmailClick()
  /admin/updateUser

Lets the user change their phone number on the profile page.

handleUpdatePhoneNumberClick()
  /admin/updateUser

Get booking by user ID. If service ID response is ok, add the new booking.

handleUserBookings()
  /bookings/getBookingsByUserId
  /services/getServiceById/${booking.service_id}

Backgrounds

Contains larger images used on the page as backgrounds.

CSS

Contains CSS files for styling.

Images

Contains smaller images used for components such as services.

Parts

Contains smaller components such as forms, popup windows, footer, accordions.

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors