ReCap Project FrontEnd

Front side of ReCapBackend project. Angular v11.2.3 used to develop the frontend.

Click on the link below to get information about BackEnd side. Backend is developing with C# & .Net Core 3.1.1. For more information:

BackEnd: ReCapProject BackEnd

Used Technologies and Their Versions

Images

You can get information about what the project looks like via the images below.

Folder Structure

General Folder Structure

You can get information about general folder structure of this project.

General Folder Structure

      src
       |-- app
       |   |-- app-routing.module.ts
       |   |-- app.component.css
       |   |-- app.component.html
       |   |-- app.component.spec.ts
       |   |-- app.component.ts
       |   |-- app.module.ts
       |   |-- components
       |   |   |-- _layout
       |   |   |   |-- app-header
       |   |   |   |-- app-layout
       |   |   |-- brand-add
       |   |   |-- brand-update
       |   |   |-- brand
       |   |   |-- car-add
       |   |   |-- car-detail
       |   |   |-- car-filter
       |   |   |-- car-update
       |   |   |-- car
       |   |   |-- color-add
       |   |   |-- color-update
       |   |   |-- color
       |   |   |-- customer
       |   |   |-- payment
       |   |   |-- rent-car
       |   |   |-- rental
       |   |-- models
       |   |-- pages
       |   |   |-- add-page
       |   |   |-- car-detail-page
       |   |   |-- customers
       |   |   |-- error404
       |   |   |-- home
       |   |   |-- payment-page
       |   |   |-- rentals
       |   |-- pipes
       |   |-- services
       |-- assets
       |   |-- .gitkeep
       |-- environments
       |   |-- environment.prod.ts
       |   |-- environment.ts

Components

Service and components are binding in files from these folders. In addition, the HTML views of the components are located in these folders.

Components Folder Structure

 app
 |   |-- components
 |   |   |-- _layout
 |   |   |   |-- app-header
 |   |   |   |   |-- app-header.component.css
 |   |   |   |   |-- app-header.component.html
 |   |   |   |   |-- app-header.component.spec.ts
 |   |   |   |   |-- app-header.component.ts
 |   |   |   |-- app-layout
 |   |   |   |   |-- app-layout.component.css
 |   |   |   |   |-- app-layout.component.html
 |   |   |   |   |-- app-layout.component.spec.ts
 |   |   |   |   |-- app-layout.component.ts
 |   |   |-- brand-add
 |   |   |   |-- brand-add.component.css
 |   |   |   |-- brand-add.component.html
 |   |   |   |-- brand-add.component.ts
 |   |   |-- brand-update
 |   |   |   |-- brand-update.component.css
 |   |   |   |-- brand-update.component.html
 |   |   |   |-- brand-update.component.ts
 |   |   |-- brand
 |   |   |   |-- brand.component.css
 |   |   |   |-- brand.component.html
 |   |   |   |-- brand.component.spec.ts
 |   |   |   |-- brand.component.ts
 |   |   |-- car-add
 |   |   |   |-- car-add.component.css
 |   |   |   |-- car-add.component.html
 |   |   |   |-- car-add.component.ts
 |   |   |-- car-detail
 |   |   |   |-- car-detail.component.css
 |   |   |   |-- car-detail.component.html
 |   |   |   |-- car-detail.component.spec.ts
 |   |   |   |-- car-detail.component.ts
 |   |   |-- car-filter
 |   |   |   |-- car-filter.component.css
 |   |   |   |-- car-filter.component.html
 |   |   |   |-- car-filter.component.ts
 |   |   |-- car-update
 |   |   |   |-- car-update.component.css
 |   |   |   |-- car-update.component.html
 |   |   |   |-- car-update.component.ts
 |   |   |-- car
 |   |   |   |-- car.component.css
 |   |   |   |-- car.component.html
 |   |   |   |-- car.component.spec.ts
 |   |   |   |-- car.component.ts
 |   |   |-- color-add
 |   |   |   |-- color-add.component.css
 |   |   |   |-- color-add.component.html
 |   |   |   |-- color-add.component.ts
 |   |   |-- color-update
 |   |   |   |-- color-update.component.css
 |   |   |   |-- color-update.component.html
 |   |   |   |-- color-update.component.ts
 |   |   |-- color
 |   |   |   |-- color.component.css
 |   |   |   |-- color.component.html
 |   |   |   |-- color.component.spec.ts
 |   |   |   |-- color.component.ts
 |   |   |-- customer
 |   |   |   |-- customer.component.css
 |   |   |   |-- customer.component.html
 |   |   |   |-- customer.component.spec.ts
 |   |   |   |-- customer.component.ts
 |   |   |-- payment
 |   |   |   |-- payment.component.css
 |   |   |   |-- payment.component.html
 |   |   |   |-- payment.component.ts
 |   |   |-- rent-car
 |   |   |   |-- rent-car.component.css
 |   |   |   |-- rent-car.component.html
 |   |   |   |-- rent-car.component.ts
 |   |   |-- rental
 |   |   |   |-- rental.component.css
 |   |   |   |-- rental.component.html
 |   |   |   |-- rental.component.spec.ts
 |   |   |   |-- rental.component.ts

Updates

25.03.2021

Details and Images

Login and register services added.
Register, Login, Token Models added.
Html views of login and register components were included in the project.

27.03.2021

Details and Images

Login, Register and Account buttons added on the navbar.
Logged in, not login, logout situations handled. Buttons change according to the situation.
Not login, already logged in, role guards were added into the project and included in routes.
Administration buttons were hided from normal users and visitors. If the user has admin or author role, then the user will be able to see those buttons.

30.03.2021

Details and Images

Profile update page added.
Users can save their credit cards if they want this while paying
Findeks score service was simulated. If the user does not have enough point in terms of car's findeks score, the user can not rent that car.
Added a few controls in terms of credit card and findeks score.
If the user rents a car, the user has to be a company. The user can be a company in account management page. The user can has have up to 1 company.