Table of Contents
This web application was developed as part of an interview assignment for Asurion. It is designed to help users track and manage protection plans for their devices. The app also provides AI-generated recommendations for maintaining or upgrading devices.
- Device Protection Tracking: Add, view, and manage device protection plans.
- AI-Generated Recommendations: Receive personalized tips, reminders, and upgrade suggestions based on device type and age.
- User-Friendly Interface: Intuitive design for easy navigation and interaction.
This app also uses Gemini by Google to generate AI recommendation to suggest tips, reminders, or upgrades based on device type and age that the users are currently using.
This app is based on the Next JS framework and uses the app routing to create dynamic routes based on the file system hierarchy or file structure of the repository.\
- Frontend: Next JS, React, HTML, CSS, Tailwind
- Backend: Firebase Firestore (NoSQL Database), Firebase Web API for Reads and Writes, Auth0 (OAuth) service for JWT (JSON Web Token) based Authentication and Authorization.
- AI: Google Gemini 1.5 Flash Hosted Model with Prompt Enhancement with Retrieval Augmented Generation
.
├── public # Media and Images Used Throughout the Application
│ ├── ...
│ ├── index.js # Javascript Exporting the Images as Objects
├── src/app # Source files. App Routing (Dynamic Routing) Directory that is used by Next JS.
│ ├── ...
│ ├── api # Local APIs that have been written in Next JS.
│ │ ├── ...
│ ├── components # Modular and Reusable React Components that have been used across the application.
│ │ ├── ...
│ ├── confirmation # Directory for the /confirmation route. Protected Page only accesible by Authenticated Users.
│ │ ├── page.js # src code for the rendered /confirmation page
│ ├── constants # constants used throughout the application for styling and other constant data.
│ │ ├── ...
│ ├── user # Directory for the /user route. Protected Page only accesible by Authenticated Users.
│ │ ├── page.js # src code for the rendered /user page
│ ├── utils # Directory for backend handlers from firebase and gemini by google. Singleton pattern for handlers to avoid multiple instances.
│ │ ├── ...
├── .env.local # TO DO: Create and Fill Up as mentioned in Instructions below.
├── package.json # Package Specification for the Application used by npm
└── README.md
This 6929 is how you may give set up your project locally. To get a local copy up and running follow these simple example steps.
This is an example of how to list things you need to use the software and how to install them.
-
npm
npm install npm@latest -g
-
Google Firebase Account and APIs: You can find out more at Firebase.
-
Gemini API Key: You can configure your API key to access the gemini 1.5 flash model at the Google AI Studio under the free tier here.
-
Auth0: Set up an Auth0 account and project to generate API keys required for running the project locally.
-
Environment Variables: In the Root Folder of the Repository create an .env.local file and fill in with the API keys from all the above mentioned services in this format.
NEXT_PUBLIC_FIREBASE_API_KEY= "Your API Key Here" NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN= "Your API Key Here" NEXT_PUBLIC_FIREBASE_PROJECT_ID= "Your API Key Here" NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET= "Your API Key Here" NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID= "Your API Key Here" NEXT_PUBLIC_FIREBASE_APP_ID="Your API Key Here" NEXT_PUBLIC_GEMINI_API_KEY="Your API Key Here" AUTH0_SECRET='Your API Key Here' AUTH0_BASE_URL='Your API Key Here' AUTH0_ISSUER_BASE_URL='Your API Key Here' AUTH0_CLIENT_ID='Your API Key Here' AUTH0_CLIENT_SECRET='Your API Key Here'
- Clone the repo
git clone https://github.com/rmurarishetti/asurion-app
- Install NPM packages
npm install
- Finish the Prerequisites as mentioned in the above section
- Run the Dev Environment
npm run dev