Welcome to the Dappier Job Application UI repository. This repository houses the user interface for an integrated application designed to enhance the job application process by allowing users to upload resumes and job descriptions. Utilizing a RAG (Retrieval-Augmented Generation) model, it provides insightful feedback and generates potential interview questions. Our goal is to facilitate seamless and user-friendly interaction with the backend API and the RAG model.
This project is a part of a larger application structure:
- UI: The current repository, responsible for the front-end experience.
- Backend API: Built using NestJS, it handles the business logic and API requests. You can find it here.
- RAG Model: A Flask-based service that processes the resumes and job descriptions to generate feedback or questions. You can find it here.
- File Upload & Management: Simplified upload process for resumes and job descriptions with a comprehensive dashboard to view all uploads.
- Feedback & Question Generation: Immediate AI-driven feedback and question generation for interview preparation based on uploaded documents.
- User Authentication: Secure JWT-based login and signup system with token management and automatic redirection on token expiry.
- Responsive Chatbot UI: Interactive and responsive chatbot interface supporting both desktop and mobile with chat history management.
- Form Validation & Notifications: Robust form validation across all user inputs with integrated toaster notifications for success and error messages.
src
├── api
│ ├── auth-api.ts
│ ├── file-upload-api.ts
│ ├── lib
│ │ └── api-client.ts
│ ├── resume-api.ts
│ └── user-api.ts
├── assets
│ └── react.svg
├── domain
│ ├── constants
│ │ ├── index.ts
│ │ ├── prompt-type.ts
│ │ ├── search-query-type.ts
│ │ └── session-storage-type.ts
│ ├── entities
│ │ ├── chat-history.ts
│ │ ├── index.ts
│ │ ├── resume.ts
│ │ └── user.ts
│ ├── index.ts
│ ├── props
│ │ ├── app-children-props.ts
│ │ ├── chat-bubble-props.ts
│ │ ├── chat-form.ts
│ │ ├── chat-props.ts
│ │ ├── chatbot-dropdown-props.ts
│ │ ├── index.ts
│ │ ├── layout-props.ts
│ │ └── loader-props.ts
│ ├── requests
│ │ ├── chat-completion-request.ts
│ │ ├── chat-history-request.ts
│ │ ├── create-resume-request.ts
│ │ ├── index.ts
│ │ ├── login-request.ts
│ │ └── signup-request.ts
│ ├── response
│ │ ├── chat-completion-response.ts
│ │ ├── file-upload-response.ts
│ │ ├── index.ts
│ │ └── user-access-token-response.ts
│ └── utils
│ ├── class-names.ts
│ └── index.ts
├── hooks
│ ├── use-session-storage.tsx
│ └── use-toast.tsx
├── index.css
├── main.tsx
├── pages
│ ├── auth
│ │ ├── login.tsx
│ │ └── signup.tsx
│ ├── dashboard
│ │ └── dashboard.tsx
│ ├── home
│ │ ├── components
│ │ │ └── user-welcome.tsx
│ │ └── home.tsx
│ ├── resume-chatbot
│ │ ├── components
│ │ │ ├── chat-bot-dropdown.tsx
│ │ │ ├── chat-bubble.tsx
│ │ │ └── chat.tsx
│ │ └── resume-chatbot.tsx
│ └── resume-upload
│ └── resume-upload.tsx
├── routes
│ ├── helpers
│ │ ├── auth-route.tsx
│ │ └── protected-route.tsx
│ ├── index.tsx
│ ├── provider.tsx
│ ├── root.tsx
│ └── router.tsx
├── shared
│ ├── layout.tsx
│ └── loader.tsx
└── vite-env.d.ts
These instructions will help you set up and run the project locally on your machine for development and testing purposes.
Ensure you have the following installed:
-
Clone this repository:
git clone https://github.com/Amaan09/dappier-job-app-ui.git cd dappier-job-app-ui -
Install the project dependencies:
npm install
-
Set up environment variables:
Create a
.envfile in the root directory of the project. You can define your environment variables here. For local development, you might include:# API Base URL Configuration VITE_BASE_URL=http://localhost:8080/
To start the development server, run:
npm run devOpen your browser and navigate to http://localhost:5173 to interact with the application.
Ensure the backend API and RAG Model services are running. Follow their respective instructions in each repository: