• 

  Get answers. Fast. No fluff. With Query

• 

  Home

• 

  Chat (Dark theme)

• 

  Chat (Light theme)

• 

  Profile

• 

  Login

Query

What Inspired Me

The idea for Query was inspired by my love for finding quick, relevant answers to complex questions. With a world full of information, I wanted to create a tool that could distill that information into concise, well-formatted responses. I envisioned a space where people could get answers in markdown, including code snippets, lists, or even simple formatted text. This led me to explore AI-powered solutions like the Llama3-8b-8192 model, which became the backbone of my project.

I was also motivated by the versatility of GROQ queries and how they could dynamically retrieve relevant data. My goal was to integrate these technologies in a seamless, efficient way to serve up answers without overwhelming the user with unnecessary detail.

What I Learned

Building this app introduced me to several exciting technologies and new concepts:

• GROQ Queries: I learned how powerful and flexible GROQ is when it comes to querying structured content. It gave me an elegant way to retrieve the exact data needed for each query.

• Llama3-8b-8192 AI Model: I got hands-on experience integrating an advanced language model, learning how to fine-tune it to produce short, crisp answers, which was a fun challenge.

• Supabase: This was my first time using Supabase for real-time data sync and authentication. The platform provided everything from user authentication to real-time updates, helping to streamline development.

• Markdown Rendering: Understanding how to take markdown and safely render it as HTML in React, without risking vulnerabilities, was a key learning experience.

How I Built the Project

I built the Query App using a Next.js frontend and a Supabase backend. The app follows a fairly simple architecture:

1. Frontend: A Next.js app with Tailwind CSS for styling. I used React hooks to handle state and React Query for API interaction.

2. Backend: Supabase serves as the backend for storing user queries and responses, and provides real-time updates when a query is submitted. I also integrated authentication via Supabase, so users have unique sessions.

3. AI Model: I leveraged the Llama3-8b-8192 AI model for processing the user’s query and returning an intelligent, markdown-formatted response.

4. GROQ API: The GROQ API was used to query the database and retrieve the correct data. I then passed the data into the AI model to generate the final markdown response.

5. Markdown to HTML: I used Markdown-it to convert the markdown response into HTML and render it in the UI, ensuring it was safely parsed and displayed.

Challenges I Faced

The journey was not without its challenges:

• Real-Time Updates: One of the biggest hurdles was ensuring real-time updates worked smoothly. I had to learn the nuances of Supabase’s real-time channel subscriptions and handle edge cases where users might not see new queries right away.

• Handling Markdown Rendering: I struggled with rendering complex markdown responses, especially when they included code blocks. Initially, the code would overflow the message blocks, so I had to explore ways to use Tailwind CSS effectively to make the content responsive and scrollable.

• Rate Limiting AI Responses: The Llama3 model sometimes took too long to respond or generated overly verbose responses. I had to fine-tune the AI and implement rate limiting to ensure that the app remained fast and responsive.

• Cross-Platform Design: Tailwind CSS made it relatively easy to implement a responsive design, but I had to pay close attention to how the layout shifted between mobile and desktop. Ensuring the flex layout behaved properly across devices took a fair amount of testing and tweaking.

Conclusion

Building the Query was an incredible learning experience. It allowed me to dive into cutting-edge technologies like Supabase, GROQ queries, and AI-powered models. I am proud of how the app turned out, and the challenges I overcame along the way made me a better developer. Moving forward, I’m excited to expand the app's functionality, improve the markdown features, and explore new ways to serve up quick, insightful answers to users.

Built With

• groq
• llama
• nextjs
• supabase
• tailwind