Architecture
- Language:
- Frontend: Javascript/React, Tailwind CSS, daisy UI
- Backend: C#/ASP.NET
- Database: Azure SQL database
- Hosting: Azure App Service
- Other service:
- Azure OpenAI for Chatbot
- Azure monitor for application insight
- Azure communication service for email
- Package Manager: Yarn
- Build tool: Vite
Note: We're developing a kiosk application for use in front of the dealership. To streamline the process, we'll skip the authentication step, using a simple form to collect user information like email or phone number. Our focus is on delivering a fast-paced business solution that prioritizes user interaction and functionality over security. We will store minimal user data, primarily user profiles, accessed securely through Azure and Gmail services. Given our limited Azure credits, we'll allocate more of our student credits toward essential services like Azure App Service, AI service, database management, and communication services for email
- Michael: working on backend and implement Azure service
- My: manage Azure service, database and some backend
- Eric: working on design, frontend
- Aiden: working on design, frontend
- Thien: working as full-stack and Azure service
- Use the Development Slot feature of Azure App Service to swapping application deployment
- An application for a kiosk that minimizes interaction with dealership staff, we plan to create a mixed application.
- A single page that contains interactive components like the chatbot and the car list with filter options
- Multiple pages that refresh as the user navigates, specifically for less interactive sections such as loading the financial budget calculator and recommending a list of cars based on the user's budget
- SQL Database
-
Retrieve car information
SELECT * FROM Car WHERE id = 'car123'; -
Search Cars by Brand and Model
SELECT * FROM Car WHERE brand = 'Toyota' AND model = 'Camry'; -
Filter Cars by Price Range and Year
SELECT * FROM Car WHERE price BETWEEN 20000 AND 30000 AND year >= 2015;
- Red: home_header - This contains the Capgemini logo as well as the current time of use.
- Orange: home_body - This contains the tile screen as well as the mission statement / use of the app. It also contains the start button which will launch the user to the Search Page.
- Green: home_footer - This contains the language option as well as a help button, which if pressed would provide instructions for general use and description of features.
- Red: search_header - On top of the Capgemini logo, this now contains New, Used, and Financing buttons. By default it launches the user to the New page, The user can then change to the Used or Financing page based on their preference. It also contains a Log in button which would direct the user to a log in / create account page.
- Orange: search_bar - This is in the body, it contains a search bar where the user can type a description of what they are looking for and using AI it will populate with matching vehicles. It also has example searches listed below which can shuffle based on popular searches.
- Yellow: search_model - This is in the body, the user can select by model which will direct then to the specified search page based on their model.
- Green: search_footer - This is the footer for this search page, it just contains a back button as well as the help button.
- Red: login_header - This is the header for the login / signup, it contains the Capgemini logo as well as the current time of use
- Orange: login_body - This is in the body, this contains the Log in or Sign up header as well as the account information the user will input based on the route they choose (Create or Sign in). If they create an account for the first time, the app should check their email for validity and if it is already tied to another account. It should also send an email to the address if successful with account details and welcoming the user. If signing in, it checks for validity of current account and if successful will return back to the current page the user was on.
- Green: login_footer - This is the footer for the login page, it contains a back button and help button as described previously
- Red: sedan_header - This is the header for the specific sedan search by model, it contains the New, Used, Financing, and now Logged In user button. When the Logged in user button is clicked, it will show the choices for what the user can access in relation to the account.
- Blood Orange: sedan_search - This is in the body of this page. It is the search bar based on the already selected model, so it will search sedan's with the listed features chosen by the user.
- Orange: sedan_features - This is in the body of this page. It contains the chosen features based on this model that will impact the displayed sedan's. The user can click x to remove any feature.
- Yellow: sedan_results - This is in the body of the page. It contains the listed results of all sedan's based on the user's selected features. Each result will have a breif description under the picture: Name, Miles, Price. If clicked, it will direct the user to the Car Details page based on that specific car.
- Green: sedan_footer - This is the footer of this page. It contains a back button and help button as previously described, but now notifies the user it populates vertically with a Scroll down text.
- Red: cardetails_header - This is the header for the specific sedan car details page, it contains the New, Used, Financing, and Logged In user button. When the Logged in user button is clicked, it will show the choices for what the user can access in relation to the account.
- Blood Orange: car_detail_list - This is in the body, It will contain a list of dropdown buttons that reveal related information based on that dropdown.
- Orange: finance_calculator_button - This is in the body, it will direct the user to the Financing page, specifically to the section related to the finance calculator where it will populate related information based on this vehicle into the calculator.
- Purple: save_vehicle_button - This is in the body, It will save the vehicle listing under the user's account.
- Yellow: vehicle_image - This is in the body, It places the image larger and to the right and displays the name of the vehicle on top.
- Green: cardetails_footer - This is the footer of this page, it contains the back and help button as described previously.
- Red: cardetails_header - This is the header for the specific sedan car details page, it contains the New, Used, Financing, and Logged In user button. When the Logged in user button is clicked, it will show the choices for what the user can access in relation to the account.
- Blood Orange: car_detail_list - This is in the body, It will contain a list of dropdown buttons that reveal related information based on that dropdown.
- Orange: finance_calculator_button - This is in the body, it will direct the user to the Financing page, specifically to the section related to the finance calculator where it will populate related information based on this vehicle into the calculator.
- Purple: save_vehicle_button - This is in the body, It will save the vehicle listing under the user's account.
- Yellow: vehicle_image - This is in the body, It places the image larger and to the right and displays the name of the vehicle on top.
- Green: cardetails_footer - This is the footer of this page, it contains the back and help button as described previously.
- Red: finance_header - This is the header for the this page, it contains the New, Used, Financing, and Log In user button.
- Orange: finance_calculator - This is in the body, It contains all the variables needed from the user input to calculate the output when the calculate button is pressed.
- Green: finance_footer - This is the footer of this page, it contains the back and help button as described previously.
In general, our website will be split across a few major spaces, including the GenAI powered chat, profile/account, login, and car searching.
Where the kiosk will be when dormant. Just the page wil the "Start" button.
This is will serve as the first thing that users see after they logged in.
There will also be a part of the screen that will prompt for account creation which will link to /createaccount.
API Details: GET /account Depending on the inputted login information (and whether it is valid) a GET call will be used to retrieve the information of a specific user.
A page to allow users to create an account
API Details: POST /account For this part of the website, the API will be called to add a new user, with parameters such as: email, name, username, and a password.
A page to manage a users account. A user can adjust their own information here, such as their email and their password.
API Details: GET /account PUT /account Here, the user will retrieve their information and can also adjust it here. The relevant calls will be GET to retrieve, and PUT to update a user. PUT will need parameters similiar to account creation, such as a new updated email, password, username, name, etc.
This will be where all searches will happen. Filters, feature search, etc will all be on here. There will also be a link to the AI Chatbot to help with searching.
API Details: GET /cars Since there will only be retrieval of cars, only a GET called is used here. Parameters include, but not limited to: make, model, gas consumption, manufacture date, mileage, used/new, etc. Should POST or PUT be needed, that'll be for behind-the-scenes stuff to add/update cars with relevant information.
Users will probably land up here after searching for a car.
API Details: GET /cars/{car_id} Again, nothing more than GET is needed since users can't add/update/remove cars.
From here, users can engage in searching for a car by talking to a AI Agent.