Complete Guide: Setting Up the Gen AI Analytics Dashboard Project

This guide will walk you through setting up the Gen AI Analytics Dashboard project in VS Code, running it locally, and adding it to your GitHub repository.

1. Setting Up Your Development Environment

Install Required Software

1. Install Node.js and npm:

   • Download and install Node.js (v18 or later) from nodejs.org

   • Verify installation by opening a terminal and running:

     node --version npm --version

2. Install Git:

   • Download and install Git from git-scm.com

   • Verify installation:

     git --version

3. Install Visual Studio Code:

   • Download and install VS Code from code.visualstudio.com

4. Install Recommended VS Code Extensions:

   • Open VS Code
   • Go to Extensions (Ctrl+Shift+X or Cmd+Shift+X on Mac)

   • Install the following extensions:

     • ESLint
     • Prettier - Code formatter
     • Tailwind CSS IntelliSense
     • JavaScript and TypeScript Nightly

2. Creating the Project

Create a New Next.js Project

1. Open a terminal and navigate to the directory where you want to create your project:

   cd path/to/your/projects/folder

2. Create a new Next.js project with TypeScript and Tailwind CSS:

   npx create-next-app@latest gen-ai-analytics-dashboard --typescript --tailwind --eslint

   • When prompted, select:

     • Would you like to use TypeScript? › Yes
     • Would you like to use ESLint? › Yes
     • Would you like to use Tailwind CSS? › Yes
     • Would you like to use src/ directory? › No
     • Would you like to use App Router? › Yes
     • Would you like to customize the default import alias (@/*)? › Yes

3. Navigate to the project directory:

   cd gen-ai-analytics-dashboard

4. Open the project in VS Code:

   code .

3. Installing Dependencies

1. Install additional dependencies by running the following command in the VS Code terminal:

   npm install @reduxjs/toolkit react-redux recharts date-fns npm install @radix-ui/react-dropdown-menu @radix-ui/react-scroll-area @radix-ui/react-slot npm install class-variance-authority clsx tailwind-merge tailwindcss-animate npm install lucide-react next-themes

4. Setting Up Project Files

Now you'll need to create all the necessary files for the project. Let's organize this by folders:

1. Create the Redux Store and Slices

1. Create the Redux directory structure:

   mkdir -p lib/redux/slices lib/api

2. Create the Redux store file:

   • Create a new file at lib/redux/store.ts
   • Copy the store code from the project above

3. Create the Redux hooks file:

   • Create a new file at lib/redux/hooks.ts
   • Copy the hooks code from the project above

4. Create the query slice file:

   • Create a new file at lib/redux/slices/querySlice.ts
   • Copy the query slice code from the project above

5. Create the types file:

   • Create a new file at lib/types.ts
   • Copy the types code from the project above

6. Create the mock API file:

   • Create a new file at lib/api/queryProcessor.ts
   • Copy the query processor code from the project above

2. Create the Components

1. Create the components directory (if it doesn't exist):

   mkdir -p components

2. Create the component files:

   • Create components/dashboard.tsx
   • Create components/dashboard-header.tsx
   • Create components/mode-toggle.tsx
   • Create components/query-input.tsx
   • Create components/query-history.tsx
   • Create components/results-display.tsx
   • Copy the respective code for each component from the project above

3. Update the App Files

1. Update the app layout file:

   • Open app/layout.tsx
   • Replace its contents with the layout code from the project above

2. Create the providers file:

   • Create a new file at app/providers.tsx
   • Copy the providers code from the project above

3. Update the main page file:

   • Open app/page.tsx
   • Replace its contents with the page code from the project above

4. Update the global CSS file:

   • Open app/globals.css
   • Replace its contents with the CSS code from the project above

5. Update the Tailwind config file:

   • Open tailwind.config.ts
   • Replace its contents with the Tailwind config code from the project above

4. Create the README file

1. Update the README.md file:

   • Open README.md
   • Replace its contents with the README code from the project above

5. Running the Project Locally

1. Start the development server:

   npm run dev
2. Open your browser and navigate to http://localhost:3000

3. Test the application:

   • Try entering queries like "Show me sales performance by department"
   • Test the dark/light mode toggle
   • Verify that the charts render correctly

6. Adding the Project to GitHub

Create a New GitHub Repository

1. Go to GitHub and sign in to your account
2. Click the "+" icon in the top-right corner and select "New repository"

3. Fill in the repository details:

   • Repository name: gen-ai-analytics-dashboard
   • Description: A React-based dashboard prototype for a Gen AI Analytics tool
   • Visibility: Public (or Private if you prefer)
   • Do not initialize the repository with a README, .gitignore, or license
4. Click "Create repository"

Push Your Code to GitHub

1. Initialize a Git repository in your project folder (if not already initialized):

   git init

2. Add all files to the staging area:

   git add .

3. Commit the changes:

   git commit -m "Initial commit: Gen AI Analytics Dashboard"

4. Add the remote repository:

   git remote add origin https://github.com/YOUR_USERNAME/gen-ai-analytics-dashboard.git

   (Replace YOUR_USERNAME with your GitHub username)

5. Push the code to GitHub:

   git push -u origin main

   (If you're using an older version of Git, you might need to use master instead of main)

7. Deploying to Vercel

1. Go to Vercel and sign in with your GitHub account
2. Click "Add New" > "Project"

3. Import your GitHub repository:

   • Find and select gen-ai-analytics-dashboard
   • Click "Import"

4. Configure the project:

   • Project Name: gen-ai-analytics-dashboard (or customize)
   • Framework Preset: Next.js (should be auto-detected)
   • Root Directory: ./ (default)
   • Build and Output Settings: Leave as default
5. Click "Deploy"
6. Wait for the deployment to complete

7. Update the README:

   • Once deployed, Vercel will provide you with a URL (e.g., https://gen-ai-analytics-dashboard.vercel.app)
   • Update the demo link in your README.md file with this URL

   • Commit and push the updated README to GitHub:

     git add README.md git commit -m "Update README with deployment link" git push

8. Troubleshooting Common Issues

Issue: Missing Dependencies

If you encounter errors about missing dependencies, try:

Issue: Build Errors

If you encounter build errors:

1. Check the error messages in the terminal
2. Make sure all files have the correct content
3. Check for typos or syntax errors

4. Try running:

   npm run lint

Issue: Git Push Errors

If you encounter errors when pushing to GitHub:

1. Make sure you've set up the remote correctly

2. If your default branch is main but GitHub expects master (or vice versa), try:

   git branch -M main git push -u origin main

9. Next Steps

After successfully setting up your project, consider:

1. Customizing the dashboard to fit your specific needs
2. Adding more chart types or visualization options
3. Implementing real API integration instead of mock data
4. Adding user authentication for a more complete application
5. Setting up CI/CD for automated testing and deployment

10. Project Structure Reference

Here's a reminder of the project structure for reference:

This guide should provide you with everything you need to set up, run, and deploy your Gen AI Analytics Dashboard project. If you encounter any specific issues not covered here, feel free to ask for additional help!