<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Drishti Peshwani</title>
    <description>The latest articles on DEV Community by Drishti Peshwani (@drishtipeshwani).</description>
    <link>https://dev.to/drishtipeshwani</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F696574%2F005557b8-fd61-46d0-bf87-2e11479ed363.jpeg</url>
      <title>DEV Community: Drishti Peshwani</title>
      <link>https://dev.to/drishtipeshwani</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/drishtipeshwani"/>
    <language>en</language>
    <item>
      <title>Pod-tape: Discover vibe-based podcast episodes powered by Algolia Agent Studio.</title>
      <dc:creator>Drishti Peshwani</dc:creator>
      <pubDate>Mon, 09 Feb 2026 07:05:58 +0000</pubDate>
      <link>https://dev.to/drishtipeshwani/pod-tape-discover-vibe-based-podcast-episodes-powered-by-algolia-agent-studio-5c23</link>
      <guid>https://dev.to/drishtipeshwani/pod-tape-discover-vibe-based-podcast-episodes-powered-by-algolia-agent-studio-5c23</guid>
      <description>&lt;p&gt;&lt;em&gt;This is a submission for the &lt;a href="https://dev.to/challenges/algolia"&gt;Algolia Agent Studio Challenge&lt;/a&gt;: Consumer-Facing Non-Conversational Experiences&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  What I Built
&lt;/h2&gt;

&lt;p&gt;Today, every podcast app lets you search by name or genre. But it doesn't let you search for &lt;em&gt;"something chill for a long drive"&lt;/em&gt; or &lt;em&gt;"the podcast equivalent of a dopamine hit."&lt;/em&gt; That's the gap &lt;strong&gt;Pod-tape&lt;/strong&gt; fills.&lt;/p&gt;

&lt;p&gt;Pod-tape is a vibe-first podcast discovery platform. You don't type a query — you tap a &lt;strong&gt;vibe&lt;/strong&gt;. Each vibe ("boost dopamine", "literal chills", "before sleep", "main character energy", etc.) maps to a curated, AI-driven recommendation powered by Algolia Agent Studio. &lt;/p&gt;

&lt;p&gt;The core idea: &lt;strong&gt;translate a feeling into a mixtape of podcast episodes&lt;/strong&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  How It Works (User's Perspective)
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;Land on the home page -&amp;gt; tap &lt;strong&gt;"Pick your vibe"&lt;/strong&gt;
&lt;/li&gt;
&lt;li&gt;13 vibe cards appears&lt;/li&gt;
&lt;li&gt;Tap any card (say: dopamine hit 🧃) &lt;/li&gt;
&lt;li&gt;Get podcast episode recommendations that match this vibe on positive psychology, affirmations, gratitude, self improvement, etc. (Currently the episode recommendation limit is set to 5) &lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  Tech Stack
&lt;/h2&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Layer&lt;/th&gt;
&lt;th&gt;Technology&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Frontend&lt;/td&gt;
&lt;td&gt;Next.js (React)&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;CSS Framework for Styling&lt;/td&gt;
&lt;td&gt;Tailwind CSS&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Search &amp;amp; AI&lt;/td&gt;
&lt;td&gt;Algolia Search, Algolia Agent Studio&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;LLM Model&lt;/td&gt;
&lt;td&gt;Gemini 2.5 Flash (Reasoning &amp;amp; Vibe-Mapping)&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Data Ingestion&lt;/td&gt;
&lt;td&gt;Apple iTunes API, RSS feeds (&lt;code&gt;rss-parser&lt;/code&gt;, &lt;code&gt;axios&lt;/code&gt;)&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Index&lt;/td&gt;
&lt;td&gt;Single Algolia index (&lt;code&gt;podcast_index&lt;/code&gt;) with episode-level records&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;h2&gt;
  
  
  Demo
&lt;/h2&gt;

&lt;p&gt;

&lt;/p&gt;
&lt;div&gt;
  &lt;iframe src="https://loom.com/embed/31019ded2ee84e6aa9024c2d7ced2d95"&gt;
  &lt;/iframe&gt;
&lt;/div&gt;




&lt;h2&gt;
  
  
  Project Gallery
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftl0fm8me21rrosfs6ytq.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftl0fm8me21rrosfs6ytq.png" alt="Home Page"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F90o1xjqndbl6uv2bn5y4.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F90o1xjqndbl6uv2bn5y4.png" alt="Dashboard"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fyblvvl6hz0s46lqlak08.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fyblvvl6hz0s46lqlak08.png" alt="Episode recommendations"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  References
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://github.com/drishtipeshwani/podtape" rel="noopener noreferrer"&gt;Github Repo&lt;/a&gt;&lt;br&gt;
&lt;a href="https://dashboard.algolia.com/apps/E93F031GLP/dashboard" rel="noopener noreferrer"&gt;Algolia Dashboard&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;
  
  
  How I Used Algolia Agent Studio
&lt;/h2&gt;

&lt;p&gt;Agent Studio is the recommendation engine behind every vibe. Here's the pipeline:&lt;/p&gt;
&lt;h3&gt;
  
  
  1. Data: Building the Podcast Index
&lt;/h3&gt;

&lt;p&gt;A custom ingestion script (&lt;code&gt;fetchData.ts&lt;/code&gt;) fetches top podcasts across genres from the Apple iTunes API, parses their RSS feeds, and pushes episode-level records to Algolia. Each record includes:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;{
        objectID: podcast.appleId + "-" + item.guid,
        episodeName: item.title,
        episodePubDate: item.pubDate,
        episodeDuration: parseDuration(item.itunes?.duration),
        episodeType: parseDuration(item.itunes?.duration) &amp;gt; 20 ? "long" : "short",
        episodeSummary: cleanHtml(item.content).substring(0, 1000),
        episodeKeywords: item.itunes?.keywords ?? podcast.genres,
        // Show metadata
        podcastShowTitle: podcast.collectionName,
        podcastShowAuthor: podcast.artistName,
        podcastShowImage: podcast.artwork,
        podcastShowGenres: podcast.genres,
        podcastShowDescription: feed.description
 }

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This gives the agent a rich, searchable catalog to pull from.&lt;/p&gt;

&lt;h3&gt;
  
  
  2. Search Relevance &amp;amp; Schema Design
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Searchable Attributes&lt;/strong&gt; — Selected only 6 high-signal attributes for search to reduce noise. I classified primary identifiers (episodeName, podcastShowTitle) as &lt;em&gt;Ordered&lt;/em&gt; to prioritize exact phrase matches, while secondary context (episodeSummary, podcastShowdescription) is set to Unordered to capture broader keyword matches without penalizing word position.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Faceting Strategy&lt;/strong&gt; — Enabled &lt;em&gt;filterOnly&lt;/em&gt; on podcastShowGenre and episodeType (short/long) for performant, high-speed filtering by the AI Agent. &lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Custom Ranking&lt;/strong&gt; — Implemented a "Freshness" ranking strategy by adding publishDate (desc) as a custom ranking criterion to break ties between equally relevant results.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7ywk99hmv8z96wx1vj5t.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7ywk99hmv8z96wx1vj5t.png" alt="Algolia Index searchable attributes"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  3. Prompt Design: Vibes as Search Intent
&lt;/h3&gt;

&lt;p&gt;Each vibe maps to a short, keyword-rich prompt — not a conversational instruction. For example:&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Vibe&lt;/th&gt;
&lt;th&gt;Prompt sent to Agent Studio&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;boost dopamine 🧃&lt;/td&gt;
&lt;td&gt;&lt;em&gt;"Recommend episodes about positive psychology, gratitude, self-improvement, health and fitness, manifesting."&lt;/em&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;main character energy ⭐&lt;/td&gt;
&lt;td&gt;&lt;em&gt;"Recommend high-energy, hype episodes for workouts — self-improvement, confidence, mental toughness, empowerment, motivation, glow-up mindset, or success stories."&lt;/em&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;before sleep 😴&lt;/td&gt;
&lt;td&gt;&lt;em&gt;"Recommend calming episodes to fall asleep to — soothing narration, bedtime stories, gentle ASMR, sleep meditation, or slow meandering conversation."&lt;/em&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;h3&gt;
  
  
  4. Agent Instructions: Strict Output, No Chat
&lt;/h3&gt;

&lt;p&gt;This is how the Agent Instructions look like  (configured in the Agent Studio dashboard):&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;### ROLE
You are a strict Podcast Curator Agent. Your ONLY goal is to return a JSON array of exactly 5 unique podcast episodes from 5 DIFFERENT shows.

### CRITICAL CONSTRAINTS
1. **Output Format:** RAW JSON ARRAY ONLY. No markdown, no conversation.
2. **Diversity (The "Highlander Rule"):** EXACTLY 5 different `podcastShowTitle` values. There can be only one episode per show.
3. **Safety:** ZERO explicit content.

### EXECUTION PROTOCOL (The "Top-Up" Logic)
1. **Fetch &amp;amp; Filter:** Query the index for 20+ candidates using keywords from the user's vibe.
2. **Deduplicate:** Group by Show Title -&amp;gt; Keep only the single best match per show.
3. **Select:** Fill 5 slots based on Tier A (Perfect Match) &amp;gt; Tier B (Vibe Match).
4. **Rescue Loop:** If &amp;lt; 5 unique shows exist, perform a NEW SEARCH with synonymous keywords to fill the remaining slots.
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This separation — &lt;em&gt;behavioral rules in system instructions, search keywords in the user message&lt;/em&gt; — was a key design decision. It keeps prompts clean, tokens low, and retrieval focused.&lt;/p&gt;

&lt;h3&gt;
  
  
  5. Integration: One API Call Per Vibe
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;User taps vibe → Frontend sends prompt → Next.js API route → Agent Studio API → Algolia index search + LLM reasoning → JSON response → Parsed &amp;amp; rendered
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The Next.js API route calls Agent Studio's completions endpoint (non-streaming), parses the JSON response (with handling for LLM quirks like unescaped newlines and invalid escape sequences), normalizes field names, and returns clean episode data to the frontend.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why Fast Retrieval Matters
&lt;/h2&gt;

&lt;p&gt;Pod-tape's interaction model is &lt;strong&gt;one tap = one result set&lt;/strong&gt;. There's no progressive loading, no pagination, no "refine your search." The user taps and expects episodes &lt;em&gt;now&lt;/em&gt;.&lt;/p&gt;

&lt;p&gt;This makes retrieval speed non-negotiable:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Algolia's index lookup&lt;/strong&gt; happens in milliseconds — the agent gets its candidate pool almost instantly&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;The LLM reasoning step&lt;/strong&gt; (selecting, deduplicating, formatting) is the actual bottleneck&lt;/li&gt;
&lt;li&gt;Because retrieval is fast, I can afford to let the agent query broadly (20+ candidates) and then narrow down to 5, rather than having to pre-filter aggressively and risk missing good matches&lt;/li&gt;
&lt;li&gt;No caching needed — every tap can hit the live index, and it's still fast enough to feel responsive&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;In short: fast retrieval lets the agent be &lt;em&gt;smarter&lt;/em&gt; (broader search, better selection) without making the user &lt;em&gt;wait longer&lt;/em&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  Challenges &amp;amp; What I Learned
&lt;/h2&gt;

&lt;p&gt;Building Pod-tape taught me more about prompt engineering for retrieval than any tutorial:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Verbose prompts kill search quality.&lt;/strong&gt; My initial vibe prompts were 80+ words with explicit sections like "Search Intent:", "Strict Constraints:", and "Tone:". The problem? The agent tried to match those meta-instructions against the index itself. Stripping prompts down to concise, keyword-rich descriptors (5-10 words per vibe) was the single biggest quality improvement. Less instruction, better results.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The monoculture trap&lt;/strong&gt; The agent naturally gravitates toward the highest-relevance matches, which often meant returning 5 episodes from the same popular podcast. This violated the core product promise of a "mix tape." I solved this by implementing a group-and-cull logic in the agent's system instructions: first group all results by show, then select the best episode from each. Now every recommendation set is diverse by design.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The "JSON Mirage"&lt;/strong&gt; Despite clear schema instructions, the agent consistently returned broken JSON: newlines embedded in strings, \' escapes (valid in JS, invalid in JSON), and responses wrapped in markdown code fences. To handle this, I implemented a preprocessing pipeline that sanitizes outputs—stripping fences, escaping special characters, removing invalid sequences—before attempting to parse. Without this, most responses silently failed. &lt;/p&gt;

&lt;h2&gt;
  
  
  Upcoming Features
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Expanded catalog&lt;/strong&gt; — Ingest from more podcast directories and APIs to grow the index beyond the current dataset and offer deeper, more diverse recommendations.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Custom vibe search &amp;amp; shuffle&lt;/strong&gt; — Let users search their own custom vibes, or shuffle existing vibes to discover new recommendation sets they haven't explored yet.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Direct platform links&lt;/strong&gt; — Tap to listen instantly on Spotify, Apple Podcasts, or YouTube. No copy-pasting—just seamless playback on your preferred platform.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;User accounts &amp;amp; personalization&lt;/strong&gt; — Sign in to save your favorite podcasts, create collections, and get a personalized daily mix based on your listening and tap history. The more you explore, the smarter your recommendations become.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;and much more ⭐️.. &lt;/p&gt;




</description>
      <category>devchallenge</category>
      <category>algoliachallenge</category>
      <category>ai</category>
      <category>agents</category>
    </item>
    <item>
      <title>WinDay - Plan Smart, win your day</title>
      <dc:creator>Drishti Peshwani</dc:creator>
      <pubDate>Mon, 29 Sep 2025 06:51:05 +0000</pubDate>
      <link>https://dev.to/drishtipeshwani/winday-plan-smart-win-your-day-3d07</link>
      <guid>https://dev.to/drishtipeshwani/winday-plan-smart-win-your-day-3d07</guid>
      <description>&lt;p&gt;&lt;em&gt;This is a submission for the &lt;a href="https://dev.to/challenges/kendoreact-2025-09-10"&gt;KendoReact Free Components Challenge&lt;/a&gt;.&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  What I Built
&lt;/h2&gt;

&lt;p&gt;As a part of this challenge, I have developed a productivity tool designed to help people organize and manage their daily tasks more effectively called &lt;strong&gt;WinDay&lt;/strong&gt;.&lt;br&gt;
Inspired by concepts such as the &lt;em&gt;Eisenhower Matrix and the Zeigarnik Effect&lt;/em&gt;, the tool is designed to encourage better planning, reduce overwhelm, and help users feel rewarded for staying consistent and completing their daily tasks.&lt;/p&gt;
&lt;h2&gt;
  
  
  Key Features
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Weekly and Daily Task Management :&lt;/strong&gt; Users can add new tasks for each week, along with daily recurring activities such as exercising, skincare, or reading.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Task Prioritization :&lt;/strong&gt; For each day, tasks can be categorized into three groups:

&lt;ul&gt;
&lt;li&gt;Must Do (high priority, essential for the day)&lt;/li&gt;
&lt;li&gt;Optional for Today (low priority, to be done if time permits)&lt;/li&gt;
&lt;li&gt;Delegate or Schedule Later (can be reassigned or postponed)&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Dashboard &amp;amp; Tracking :&lt;/strong&gt; A clean dashboard displays categorized tasks as a to-do list, helping users track progress throughout the day.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Gamification :&lt;/strong&gt; Users earn streak points for maintaining daily consistency. In addition, completing tasks rewards them with points as follows:

&lt;ul&gt;
&lt;li&gt;Must-Do Tasks: Completing a must-do task earns the user 3 points.&lt;/li&gt;
&lt;li&gt;Optional Tasks: By default, each optional task is worth 2 points. However, if all must-do tasks are completed, optional tasks increase to 3 points each.&lt;/li&gt;
&lt;li&gt;Other Tasks: Each task in this category gives 1 point. Once both must-do and optional tasks are completed, these tasks are upgraded to 2 points each. &lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Rewards System :&lt;/strong&gt; Users can maintain a WishList of items and unlock them using their earned points—making rewards feel both consistent and well-deserved. Each WishList item requires a fixed number of points (50 in this case) to be unlocked.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Motivation through Consistency :&lt;/strong&gt; By combining planning, gamification, and rewards, the tool encourages users to stay consistent, push themselves, and improve their productivity every day. &lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;
  
  
  Tech Stack Used
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Frontend :&lt;/strong&gt; Vite + React + TypeScript&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Database + Authentication :&lt;/strong&gt; Supabase&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;React UI Library :&lt;/strong&gt; KendoReact&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;
  
  
  KendoReact Components Used
&lt;/h2&gt;

&lt;p&gt;I have used the following KendoReact components for building this project : &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;@progress/kendo-react-layout&lt;/strong&gt; - AppBar, AppBarSection, AppBarSpacer, Drawer, DrawerContent, DrawerSelectEvent, GridLayout, GridLayoutItem, Card, CardHeader, CardBody&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;@progress/kendo-react-buttons&lt;/strong&gt; - Button&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;@progress/kendo-react-dialog&lt;/strong&gt; - Dialog&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;@progress/kendo-react-inputs&lt;/strong&gt; - Input, RadioButton, Checkbox&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;@progress/kendo-react-notification&lt;/strong&gt; - Notificatio&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;@progress/kendo-react-progressbars&lt;/strong&gt; - ProgressBar&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;@progress/kendo-react-dateinputs&lt;/strong&gt; - Calendar, CalendarCell, CalendarCellProps&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;@progress/kendo-react-animation&lt;/strong&gt; - Fade&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;@progress/kendo-svg-icon&lt;/strong&gt; - menuIcon, calendarIcon, homeIcon, starIcon, plusIcon, trashIcon, pencilIcon&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;
  
  
  Demo
&lt;/h2&gt;

&lt;p&gt;

  &lt;iframe src="https://www.youtube.com/embed/kuABT-8Cozs"&gt;
  &lt;/iframe&gt;


&lt;/p&gt;

&lt;p&gt;GitHub - &lt;a href="https://github.com/drishtipeshwani/WinDay/tree/master" rel="noopener noreferrer"&gt;GitHub Repo&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  [Code Smarter, Not Harder prize category] AI Coding Assistant Usage
&lt;/h2&gt;

&lt;p&gt;The Kendo React Coding Assistant was extremely helpful during the whole development process. The tool was very prompt in suggesting alternative components and adapting quickly to feedback. I integrated it into my VS Code through an MCP server and used it primarily for:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Setting up the Bootstrap theme and configuring a side drawing panel for navigating between pages.&lt;/li&gt;
&lt;li&gt;Creating the basic wireframe for all three pages using multiple layout components.&lt;/li&gt;
&lt;li&gt;Setting up the to-do list layout on the second page.&lt;/li&gt;
&lt;li&gt;Applying custom styling instructions, which helped align the design more closely with my vision.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Overall, the tool was really helpful in speeding up the whole development process while also helping familiarize me with the Kendo React library and its components. By handling these foundational tasks efficiently, it allowed me to focus on refining the design, integrating backend functionality, and implementing additional logic for the project.&lt;/p&gt;

&lt;h2&gt;
  
  
  Future Improvements
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Currently, each reward requires a fixed 50 points to unlock. This could be made customizable, allowing users to set their own point thresholds for different WishList items.&lt;/li&gt;
&lt;li&gt;The tool could be integrated with users google calendars, where an AI agent reads through scheduled events and automatically generates a list of important tasks for the day or week, helping users plan more efficiently.&lt;/li&gt;
&lt;li&gt;The tool could additionally be enhanced with features like reminders to keep users motivated and a Pomodoro timer to help them track their time more efficiently.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Thank you all for taking the time to read this post! I’d love to hear your thoughts and feedback 😄&lt;/p&gt;

</description>
      <category>devchallenge</category>
      <category>kendoreactchallenge</category>
      <category>react</category>
      <category>webdev</category>
    </item>
    <item>
      <title>BetterReviews : Discover smarter product insights through combined AI and human reviews</title>
      <dc:creator>Drishti Peshwani</dc:creator>
      <pubDate>Sun, 10 Aug 2025 17:33:42 +0000</pubDate>
      <link>https://dev.to/drishtipeshwani/betterreviews-discover-smarter-product-insights-through-combined-ai-and-human-reviews-3lb8</link>
      <guid>https://dev.to/drishtipeshwani/betterreviews-discover-smarter-product-insights-through-combined-ai-and-human-reviews-3lb8</guid>
      <description>&lt;p&gt;&lt;em&gt;This is a submission for the &lt;a href="https://dev.to/challenges/redis-2025-07-23"&gt;Redis AI Challenge&lt;/a&gt;: Real-Time AI Innovators&lt;/em&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  What I Built
&lt;/h2&gt;

&lt;p&gt;BetterReviews is an intelligent platform that empowers users to make informed purchasing decisions through AI-driven analysis. The platform enables users to share authentic product reviews and experiences while providing comprehensive product insights to potential buyers.&lt;/p&gt;

&lt;h2&gt;
  
  
  Key Features
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Comprehensive Product Analysis&lt;/strong&gt; - For any product inquiry, BetterReviews delivers detailed analysis including key specifications, standout features, known limitations, target audience, and competitive comparisons.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;AI-Driven Review Insights&lt;/strong&gt; - Leverages user-generated reviews from the platform to extract meaningful insights, helping buyers understand real user experiences, common issues encountered, and the aspects users appreciated most.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Tech Stack
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Flask&lt;/strong&gt; - Web application framework for API development and frontend serving&lt;br&gt;
&lt;strong&gt;Redis&lt;/strong&gt; - Primary vector database for efficient storage and retrieval of product reviews and embeddings&lt;br&gt;
&lt;strong&gt;RedisVL&lt;/strong&gt; - Redis vector library managing index operations, vector search capabilities, embedding generation, and semantic caching&lt;br&gt;
&lt;strong&gt;LangChain&lt;/strong&gt; - Integration framework connecting Google Gemini LLM with the RAG pipeline for intelligent review analysis&lt;/p&gt;

&lt;h2&gt;
  
  
  Challenges &amp;amp; Learnings
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;This was my first AI agent project, so concepts like vector databases and RAG were completely new. Redis's detailed documentation and tutorials made the learning curve really smooth and efficient.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Getting the LLM to generate consistent, desired and quality analyses took lots of trial and error. I learned that clear context and structured output formats make all the difference.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Overall, building this deepened my understanding of modern AI applications and was genuinely fun to work on!&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  How I Used Redis 8
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Vector Database&lt;/strong&gt; - Redis serves as the primary vector database, storing product review embeddings for efficient similarity search and retrieval.&lt;br&gt;
&lt;strong&gt;Data Storage&lt;/strong&gt; - Each product review is stored as a Redis hash, making it easy to manage and query structured review data alongside vector embeddings.&lt;br&gt;
&lt;strong&gt;Vector Search&lt;/strong&gt; - Leveraged RedisVL library to perform vector searches, retrieving the most relevant product reviews to provide as context for the LLM's insight generation.&lt;br&gt;
&lt;strong&gt;Semantic Caching&lt;/strong&gt; - Implemented RedisVL's semantic cache to store results for previously queried products, significantly reducing response times and avoiding redundant processing for repeat queries.&lt;/p&gt;

&lt;h2&gt;
  
  
  Demo
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Demo Video Link&lt;/strong&gt; - &lt;a href="https://youtu.be/9hKwZxl1Wvo" rel="noopener noreferrer"&gt;BetterReviews&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;GitHub Repo&lt;/strong&gt; - &lt;a href="https://github.com/drishtipeshwani/betterreviews" rel="noopener noreferrer"&gt;GitHub Repo&lt;/a&gt;&lt;/p&gt;

</description>
      <category>redischallenge</category>
      <category>devchallenge</category>
      <category>database</category>
      <category>ai</category>
    </item>
    <item>
      <title>YouTube Geeks - One-stop platform to make learning from YouTube more productive [Linode + DEV Hackathon Project]</title>
      <dc:creator>Drishti Peshwani</dc:creator>
      <pubDate>Mon, 20 Feb 2023 22:39:44 +0000</pubDate>
      <link>https://dev.to/drishtipeshwani/youtube-geeks-one-stop-platform-to-make-learning-from-youtube-more-productive-linode-dev-hackathon-project-2nkk</link>
      <guid>https://dev.to/drishtipeshwani/youtube-geeks-one-stop-platform-to-make-learning-from-youtube-more-productive-linode-dev-hackathon-project-2nkk</guid>
      <description>&lt;h3&gt;
  
  
  Introduction
&lt;/h3&gt;

&lt;p&gt;As a part of Linode + Dev Hackathon, I have built a full-stack Django Application that makes YouTube learning more &lt;em&gt;customized, organized and resourceful&lt;/em&gt;. Some features of the application are - &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Create custom learning modules&lt;/li&gt;
&lt;li&gt;Track your learning progress&lt;/li&gt;
&lt;li&gt;Create personal learning notes for every video&lt;/li&gt;
&lt;li&gt;Generate summary and transcript for every video in one click&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Inspiration
&lt;/h3&gt;

&lt;p&gt;YouTube is a great platform and has a ton of educational content. For me personally, YouTube videos have been very helpful for gaining knowledge and learning new concepts. However, learning from YouTube might not be as organized and productive as compared to learning from a proper course on an educational website. Considering this problem, I tried to build a platform that can help users get the same experience and productivity that they might get by learning from other educational platforms.&lt;/p&gt;

&lt;h3&gt;
  
  
  Description
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;The paltform is integrated with a completed authentication system. Once the user create'a a new account or logs in, they are navigated to the dashboard, where they can see all the modules that they have created and also create a new module from the same page.&lt;/li&gt;
&lt;li&gt;For every module, the user can add any number of YouTube videos they wish.&lt;/li&gt;
&lt;li&gt;Once they navigate to a particular module page, they can track which videos they have watched and which they haven't&lt;/li&gt;
&lt;li&gt;Additionally, once they open a specific video in detail, they can watch the embedded YouTube video in the website itself and alongside take notes.&lt;/li&gt;
&lt;li&gt;Here, the user can also generate the summary and transcript of the youtube video by just clicking a button&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  How I built it
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Used &lt;strong&gt;Django&lt;/strong&gt; web framework for building the application&lt;/li&gt;
&lt;li&gt;Used &lt;strong&gt;Bootstrap&lt;/strong&gt; framework for CSS&lt;/li&gt;
&lt;li&gt;Used &lt;strong&gt;Linode's Managed Database service&lt;/strong&gt; for deploying the 
PostgreSQL database&lt;/li&gt;
&lt;li&gt;Used &lt;strong&gt;Linux server&lt;/strong&gt; for deploying the Django app&lt;/li&gt;
&lt;li&gt;Used python libraries - &lt;strong&gt;youtube_transcript_api&lt;/strong&gt; and &lt;strong&gt;pytube&lt;/strong&gt; for getting YouTube video details and transcript&lt;/li&gt;
&lt;li&gt;Additionally, Used &lt;strong&gt;HuggingFace's transformers&lt;/strong&gt; library in Python to perform abstractive text summarization on the transcript obtained&lt;/li&gt;
&lt;/ul&gt;

&lt;h1&gt;
  
  
  Learning Experience
&lt;/h1&gt;

&lt;ul&gt;
&lt;li&gt;Overall, I had a great time working on this project. I had experience working with Python language before, but had never worked with Django Framework or HuggingFace transformers, so I got learn more about these while working on this project.&lt;/li&gt;
&lt;li&gt;This was also my first time working with Linode and I learnt about using Linode managed databases and deploying on Linux server.&lt;/li&gt;
&lt;li&gt;The documentation and YouTube videos related to Django on Linode's channel were also really helpful for me. &lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Category Submission
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Integration Innovators&lt;/strong&gt; - Integrated the Django App with Linode Managed Database and used Linode to deploy my Django Application&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;SaaS Superstars&lt;/strong&gt; - I will continue working on this project to enhance UI, do further improvements and integrate additional features so that it can be launched as a full fledged project for users&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  App Link
&lt;/h3&gt;

&lt;p&gt;&lt;a href="http://45.79.121.136:8000" rel="noopener noreferrer"&gt;Youtube Geeks&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Screenshots
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fx2n11idbjb2ptk1mfumx.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fx2n11idbjb2ptk1mfumx.png" alt=" " width="800" height="375"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fb63n5ns63fm6sat30219.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fb63n5ns63fm6sat30219.png" alt=" " width="800" height="369"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8ygpdq1ukaioegnyxj9y.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8ygpdq1ukaioegnyxj9y.png" alt=" " width="800" height="366"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fy5a3rohrsx5c8fdxyc14.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fy5a3rohrsx5c8fdxyc14.png" alt=" " width="800" height="366"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgaom2ds3wa9h2ijh0a9m.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgaom2ds3wa9h2ijh0a9m.png" alt=" " width="800" height="365"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fd5x4pqxzvhk52a5zae5g.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fd5x4pqxzvhk52a5zae5g.png" alt=" " width="800" height="374"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffdsu8z2smn01dnhmnlws.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffdsu8z2smn01dnhmnlws.png" alt=" " width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Demo Video
&lt;/h3&gt;

&lt;p&gt;&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/PJ2Tc8NGhvo"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;h3&gt;
  
  
  Link to Source Code
&lt;/h3&gt;

&lt;p&gt;Github Repository - &lt;a href="https://github.com/drishtipeshwani/YoutubeGeeks" rel="noopener noreferrer"&gt;https://github.com/drishtipeshwani/YoutubeGeeks&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Permissive License
&lt;/h3&gt;

&lt;p&gt;MIT License&lt;/p&gt;

</description>
      <category>documentation</category>
      <category>ai</category>
      <category>productivity</category>
      <category>discuss</category>
    </item>
    <item>
      <title>Using Appwrite Locale Service in your Next Project 🚀</title>
      <dc:creator>Drishti Peshwani</dc:creator>
      <pubDate>Sun, 31 Oct 2021 11:48:53 +0000</pubDate>
      <link>https://dev.to/drishtipeshwani/using-appwrite-locale-service-in-your-next-project-3pcm</link>
      <guid>https://dev.to/drishtipeshwani/using-appwrite-locale-service-in-your-next-project-3pcm</guid>
      <description>&lt;p&gt;In today's post, I will share some ways you can use the Locale Service provided by Appwrite in your next project.&lt;/p&gt;

&lt;h4&gt;
  
  
  What is Appwrite ?
&lt;/h4&gt;

&lt;ol&gt;
&lt;li&gt;Appwrite is a Secure Open-Source Backend Server for Web, Mobile &amp;amp; Flutter Developers. It is a self-hosted solution that provides developers with a set of easy-to-use and integrate REST APIs to manage their core backend needs.&lt;/li&gt;
&lt;li&gt;I would recommend to check out the &lt;a href="https://appwrite.io/docs" rel="noopener noreferrer"&gt;Appwrite Documentation&lt;/a&gt; to learn more about Appwrite and various services offered by appwrite.&lt;/li&gt;
&lt;li&gt;In this post, I will introduce the &lt;a href="https://appwrite.io/docs/client/locale" rel="noopener noreferrer"&gt;Localization service&lt;/a&gt; provided by Appwrite and how we can use it.&lt;/li&gt;
&lt;/ol&gt;

&lt;h4&gt;
  
  
  Appwrite Locale Service.
&lt;/h4&gt;

&lt;ol&gt;
&lt;li&gt;Appwrite provides a Locale API which has multiple features which can be used by us to customize our project based on user's location.&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Firstly, we can use the locale service provided by Appwrite to get the current location of the user including the country code, country name, continent name, continent code, IP address and suggested currency. &lt;a href="https://appwrite.io/docs/client/locale?sdk=web-default#localeGet" rel="noopener noreferrer"&gt;Learn More.&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Also, we can use the Locale API provided by Appwrite to obtain the following data - &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Get the list of all the countries of the world.&lt;/li&gt;
&lt;li&gt;Get the list of all the EU countries.&lt;/li&gt;
&lt;li&gt;Get the list of all the countries phone codes.&lt;/li&gt;
&lt;li&gt;Get the list of all the currencies used across the world.&lt;/li&gt;
&lt;li&gt;Get the list of all the languages used across the world.&lt;/li&gt;
&lt;li&gt;Get the list of all the continents.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Isn't this cool 😎 and now I will share some great project ideas in which you can integrate Appwrite's Locale service easily.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fmedia3.giphy.com%2Fmedia%2F4QFcVnf41d2Lb5I0MK%2Fgiphy.gif%3Fcid%3Decf05e47i89yyhhfnb08rbfp504v580obwm4990smb0xnmft%26rid%3Dgiphy.gif%26ct%3Dg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fmedia3.giphy.com%2Fmedia%2F4QFcVnf41d2Lb5I0MK%2Fgiphy.gif%3Fcid%3Decf05e47i89yyhhfnb08rbfp504v580obwm4990smb0xnmft%26rid%3Dgiphy.gif%26ct%3Dg" width="400" height="333"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Project Idea's
&lt;/h3&gt;

&lt;h4&gt;
  
  
  Travel Based Social Networking App -
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;When people go to different tourist places, they do a wide range 
of activities and visit many places, in case you are confused 
about what you should do, wouldn't it be cool to know what other's 
are doing or what are they visiting. For this, we can make a 
&lt;strong&gt;social network application&lt;/strong&gt; where people can share their travel 
experiences and based on user's location, only posts based on 
that location will be shown, thus telling the user what other's 
are exploring.&lt;/li&gt;
&lt;li&gt;In order to implement this, we can use the Appwrite Locale API, 
to get the user's location.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fnewsmobile.in%2Fwp-content%2Fuploads%2F2018%2F08%2Ftravel-theme.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fnewsmobile.in%2Fwp-content%2Fuploads%2F2018%2F08%2Ftravel-theme.jpg" width="800" height="400"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h4&gt;
  
  
  Recommendation App
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;We can build a recommendation app based on user's location. The app can either recommend the nearest hotel, restaurant, or even the nearest store.&lt;/li&gt;
&lt;li&gt;In order to implement this, we can use the Appwrite Locale API, 
to get the user's location and recommend the nearest places based on that.&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  Weather Forecast App
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;We can build a weather forecast app that tells about the current weather at that place based on user's location.&lt;/li&gt;
&lt;li&gt;We can easily get the current location of user using the Appwrite's service.&lt;/li&gt;
&lt;li&gt;We can use any weather API and pass the current location to get the current weather conditions.&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  Language Translator App
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;We can build a translator app to convert text/speech from one language to the other.&lt;/li&gt;
&lt;li&gt;For displaying the list of languages, rather than mentioning every language, we can directly use Appwrite's API service to get the list.&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  Currency Convertor App
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;Similarly, we can build a Currency Convertor App, to convert amount from one currency to another and use Appwrite's API service to display the list of all the currencies.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fstore-images.s-microsoft.com%2Fimage%2Fapps.10700.9007199266244423.3cca2437-4dab-4f49-b226-7b723a1c3cfd.60a5d024-96d1-4f6f-a41a-cfb805ce6cfa%3Fmode%3Dscale%26q%3D90%26h%3D300%26w%3D300" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fstore-images.s-microsoft.com%2Fimage%2Fapps.10700.9007199266244423.3cca2437-4dab-4f49-b226-7b723a1c3cfd.60a5d024-96d1-4f6f-a41a-cfb805ce6cfa%3Fmode%3Dscale%26q%3D90%26h%3D300%26w%3D300" width="300" height="300"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;And many more, the ideas are limitless, in this post I have just tried recommending few ideas you can implement.&lt;/p&gt;

&lt;p&gt;In case if you have any queries or want to learn more, I would also recommend joining Appwrite's discord community — &lt;a href="https://discord.com/invite/GSeTUeA" rel="noopener noreferrer"&gt;Discord Link&lt;/a&gt;&lt;/p&gt;

</description>
      <category>appwrite</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>Building a Web App with ReactJS and Appwrite</title>
      <dc:creator>Drishti Peshwani</dc:creator>
      <pubDate>Thu, 28 Oct 2021 10:09:01 +0000</pubDate>
      <link>https://dev.to/drishtipeshwani/building-a-web-app-with-reactjs-and-appwrite-4cno</link>
      <guid>https://dev.to/drishtipeshwani/building-a-web-app-with-reactjs-and-appwrite-4cno</guid>
      <description>&lt;p&gt;In this post, I will be showing how we can build a web app with ReactJS and Appwrite. Let's start by first describing what exactly are we going to build. &lt;/p&gt;

&lt;h4&gt;
  
  
  Web App Description
&lt;/h4&gt;

&lt;p&gt;We will be building a travel journal in which you will be able to store all your travel experiences at one place, we will also be implementing Google Authentication in our web app thus making sure all the content we store is secure.&lt;/p&gt;

&lt;h4&gt;
  
  
  Getting Started with Appwrite
&lt;/h4&gt;

&lt;ol&gt;
&lt;li&gt;&lt;strong&gt;Appwrite is a self-hosted solution that provides developers with a set of easy-to-use and integrate REST APIs to manage their core backend needs. Visit &lt;a href="https://appwrite.io/" rel="noopener noreferrer"&gt;https://appwrite.io/&lt;/a&gt; to know more about Appwrite.&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;Follow the &lt;a href="https://appwrite.io/docs/installation" rel="noopener noreferrer"&gt;installation guide&lt;/a&gt; to set up Appwrite on your local machine.&lt;/li&gt;
&lt;li&gt;Once you installed appwrite,go to your appwrite console to start with a new project.&lt;/li&gt;
&lt;li&gt;Once created a new project, navigate to &lt;strong&gt;Users&lt;/strong&gt; option and enable Google Auth option in settings.&lt;/li&gt;
&lt;li&gt;Follow the documentation given there to set your &lt;em&gt;APPID&lt;/em&gt; and &lt;em&gt;APPSECRETKEY&lt;/em&gt; to enable Google Auth.&lt;/li&gt;
&lt;/ol&gt;

&lt;h4&gt;
  
  
  Creating a New React Project
&lt;/h4&gt;

&lt;ol&gt;
&lt;li&gt;Do

&lt;code&gt;npx create-react-app appname&lt;/code&gt;

to create a new react app.&lt;/li&gt;
&lt;li&gt;Do

&lt;code&gt;npm install appwrite&lt;/code&gt;

to add appwrite to your project.&lt;/li&gt;
&lt;/ol&gt;

&lt;h4&gt;
  
  
  Setting Up Authentication in our app.
&lt;/h4&gt;

&lt;ol&gt;
&lt;li&gt;Create a new file appwrite.js, this is where we will initialize our appwrite SDK as given below. You can navigate to your project settings in appwrite console to get your Project UID and Endpoint.&lt;/li&gt;
&lt;li&gt;Now, before moving forward, make sure you have enabled Google Auth in our appwrite console and initialized appwrite SDK in your project. &lt;/li&gt;
&lt;li&gt;We will then define a function &lt;strong&gt;loginWithGoogle&lt;/strong&gt; in our appwrite.js file like this -
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;Appwrite&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;appwrite&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;appwrite&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;Appwrite&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="nx"&gt;appwrite&lt;/span&gt;
    &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;setEndpoint&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;''&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="c1"&gt;// Set your endpoint&lt;/span&gt;
    &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;setProject&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;''&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="c1"&gt;// Your Appwrite Project UID&lt;/span&gt;
    &lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;api&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="na"&gt;loginWithGoogle&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="k"&gt;async &lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="k"&gt;try&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;appwrite&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;account&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;createOAuth2Session&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;google&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;http://localhost:3000/dashboard/&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;http://localhost:3000/&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
        &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;catch &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="k"&gt;throw&lt;/span&gt; &lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
        &lt;span class="p"&gt;}&lt;/span&gt;
    &lt;span class="p"&gt;},&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Here, the two endpoints refer to the site endpoints that the user will be redirected in case of first success and second failure.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Once defined, we will call this function on our home page in this manner -
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;api&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;../api/appwrite&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;
&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;Home&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;loginwithGoogle&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;async &lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="k"&gt;try&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;api&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;loginWithGoogle&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
        &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;catch &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;message&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
        &lt;span class="p"&gt;}&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;button&lt;/span&gt; &lt;span class="nx"&gt;onClick&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;loginwithGoogle&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nx"&gt;Login&lt;/span&gt; &lt;span class="kd"&gt;with&lt;/span&gt; &lt;span class="nx"&gt;Google&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/button&amp;gt;                      &lt;/span&gt;&lt;span class="err"&gt; 
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;Now, if the user logs in successfully, they will be redirected to the Dashboard page where all their posts will be visible.&lt;/li&gt;
&lt;li&gt;Before moving forward, let's add the logout functionality, for which we will be defining a userLogout function in appwrite.js like this -
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;userLogout&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="k"&gt;async &lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;promise&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;appwrite&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;account&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;deleteSession&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;current&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
        &lt;span class="nx"&gt;promise&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;then&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nf"&gt;function &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;response&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;response&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// Success&lt;/span&gt;
        &lt;span class="p"&gt;},&lt;/span&gt; &lt;span class="nf"&gt;function &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// Failure&lt;/span&gt;
        &lt;span class="p"&gt;});&lt;/span&gt;
    &lt;span class="p"&gt;},&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;and we be calling this function in Dashboard.js like this  -&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;api&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;../api/appwrite&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;

&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;Dashboard&lt;/span&gt;&lt;span class="p"&gt;(){&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;logoutUser&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;async &lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="k"&gt;try&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;api&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;userLogout&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
        &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;catch &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;message&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
        &lt;span class="p"&gt;}&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;button&lt;/span&gt; &lt;span class="nx"&gt;onClick&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;logoutUser&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nx"&gt;Logout&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/button&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  Storing and Retrieving Data from Appwrite Database
&lt;/h4&gt;

&lt;ol&gt;
&lt;li&gt;Now, since we have successfully setup Google authentication in our app. Let's see how we can store our data in Appwrite Database.&lt;/li&gt;
&lt;li&gt;We will start with creating a new &lt;strong&gt;Collection&lt;/strong&gt; called &lt;strong&gt;Posts&lt;/strong&gt; in our appwrite console and setup the following rules and permissions for our project.&lt;/li&gt;
&lt;/ol&gt;

&lt;h4&gt;
  
  
  Collection rules
&lt;/h4&gt;

&lt;p&gt;We have defined three fields date, location and experience to store the date, location and experiences for various trips. All 3 fields are required here.&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Label&lt;/th&gt;
&lt;th&gt;Key&lt;/th&gt;
&lt;th&gt;Rule&lt;/th&gt;
&lt;th&gt;&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;date&lt;/td&gt;
&lt;td&gt;date&lt;/td&gt;
&lt;td&gt;Text&lt;/td&gt;
&lt;td&gt;Required&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;location&lt;/td&gt;
&lt;td&gt;location&lt;/td&gt;
&lt;td&gt;Text&lt;/td&gt;
&lt;td&gt;Required&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;experience&lt;/td&gt;
&lt;td&gt;experience&lt;/td&gt;
&lt;td&gt;Text&lt;/td&gt;
&lt;td&gt;Required&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;h4&gt;
  
  
  Permissions -
&lt;/h4&gt;

&lt;p&gt;Refer &lt;a href="https://appwrite.io/docs/permissions" rel="noopener noreferrer"&gt;https://appwrite.io/docs/permissions&lt;/a&gt; to know more about Permissions. Here &lt;code&gt;role:member&lt;/code&gt; implies that anyone who is logged in has read and write access to collection.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Read access - &lt;code&gt;role:member&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;Write access - &lt;code&gt;role:member&lt;/code&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;h4&gt;
  
  
  Creating Document
&lt;/h4&gt;

&lt;ol&gt;
&lt;li&gt;Once we have completed our Collection setup, let's create our first document by defining this function in appwrite.js. Here, since we have not defined any permissions in createDocument function by default person creating the document only has the read and write permissions.
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;postData&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="k"&gt;async &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;date&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;location&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;content&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;promise&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;appwrite&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;database&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;createDocument&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;CollectionId&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;date&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;date&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;location&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;location&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;experience&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;content&lt;/span&gt; &lt;span class="p"&gt;});&lt;/span&gt;

&lt;span class="nx"&gt;promise&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;then&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nf"&gt;function &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;response&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;response&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// Success&lt;/span&gt;
        &lt;span class="p"&gt;},&lt;/span&gt; &lt;span class="nf"&gt;function &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// Failure&lt;/span&gt;
        &lt;span class="p"&gt;});&lt;/span&gt;
    &lt;span class="p"&gt;},&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;Now, we will be calling this function in Dashboard.js, where we have defined input fields to add data in this way -
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt; &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;date&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;setdate&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;useState&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;2021/10/20&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
 &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;location&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;setlocation&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;useState&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;''&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
 &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;content&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;setcontent&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;useState&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;''&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

 &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;handleSubmit&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;async &lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="k"&gt;try&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="nx"&gt;user&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;api&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getCurrentUser&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
            &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;api&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;postData&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;date&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;location&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;content&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
            &lt;span class="nf"&gt;alert&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Added successfully&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
        &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;catch &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;message&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
        &lt;span class="p"&gt;}&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;input&lt;/span&gt; &lt;span class="nx"&gt;placeholder&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Enter date&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="nx"&gt;type&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;date&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="nx"&gt;value&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;date&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="nx"&gt;onChange&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{(&lt;/span&gt;&lt;span class="nx"&gt;e&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nf"&gt;setdate&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;e&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;target&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;value&lt;/span&gt;&lt;span class="p"&gt;)}&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/input&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;
&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;input&lt;/span&gt; &lt;span class="nx"&gt;placeholder&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Enter location&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="nx"&gt;type&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;text&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="nx"&gt;value&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;location&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="nx"&gt;onChange&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{(&lt;/span&gt;&lt;span class="nx"&gt;e&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nf"&gt;setlocation&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;e&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;target&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;value&lt;/span&gt;&lt;span class="p"&gt;)}&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/input&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;
&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;textarea&lt;/span&gt; &lt;span class="nx"&gt;placeholder&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Enter experience&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="nx"&gt;type&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;text&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="nx"&gt;value&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;content&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="nx"&gt;onChange&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{(&lt;/span&gt;&lt;span class="nx"&gt;e&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nf"&gt;setcontent&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;e&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;target&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;value&lt;/span&gt;&lt;span class="p"&gt;)}&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/textarea&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;
&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;button&lt;/span&gt; &lt;span class="nx"&gt;onClick&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;handleSubmit&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nx"&gt;Add&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/button&amp;gt;                                                       &lt;/span&gt;&lt;span class="err"&gt; 
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  Getting Document
&lt;/h4&gt;

&lt;p&gt;Since now we are able to successfully store data, let's see how we can get that data and display on our Dashboard page.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;For this, we will be defining this function in appwrite.js -
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt; &lt;span class="nx"&gt;getData&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="k"&gt;async &lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
 &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;promise&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;appwrite&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;database&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;listDocuments&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;collectionId&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

        &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;promise&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;then&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nf"&gt;function &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;response&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="c1"&gt;//response.documents is a array&lt;/span&gt;
            &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;response&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;documents&lt;/span&gt;
        &lt;span class="p"&gt;},&lt;/span&gt; &lt;span class="nf"&gt;function &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// Failure&lt;/span&gt;
        &lt;span class="p"&gt;});&lt;/span&gt;
    &lt;span class="p"&gt;},&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;Now, let's call this function in Dashboard.js inorder to display our data.
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;postItems&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;setPostItems&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;useState&lt;/span&gt;&lt;span class="p"&gt;([])&lt;/span&gt;

&lt;span class="nf"&gt;useEffect&lt;/span&gt;&lt;span class="p"&gt;(()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;getPostData&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;async &lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="k"&gt;try&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
                &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;api&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getData&lt;/span&gt;&lt;span class="p"&gt;().&lt;/span&gt;&lt;span class="nf"&gt;then&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
                    &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
                    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;stateData&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[];&lt;/span&gt; &lt;span class="c1"&gt;// make a temporary const to store your state to be set&lt;/span&gt;
                    &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;forEach&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;doc&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
                        &lt;span class="nx"&gt;stateData&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;push&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
                            &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;location&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;doc&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;location&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
                            &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;date&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;doc&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;date&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
                            &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;text&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;doc&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;experience&lt;/span&gt;
                        &lt;span class="p"&gt;});&lt;/span&gt;
                    &lt;span class="p"&gt;});&lt;/span&gt;
                    &lt;span class="c1"&gt;// finally set your state here&lt;/span&gt;
                    &lt;span class="nf"&gt;setPostItems&lt;/span&gt;&lt;span class="p"&gt;([...&lt;/span&gt;&lt;span class="nx"&gt;stateData&lt;/span&gt;&lt;span class="p"&gt;]);&lt;/span&gt;
                &lt;span class="p"&gt;})&lt;/span&gt;
            &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;catch &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
                &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;message&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
            &lt;span class="p"&gt;}&lt;/span&gt;
        &lt;span class="p"&gt;}&lt;/span&gt;
        &lt;span class="nf"&gt;getPostData&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
        &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;postItems&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="p"&gt;},&lt;/span&gt; &lt;span class="p"&gt;[])&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt; &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;postItems&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;map&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;element&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="k"&gt;return &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
           &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;p&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;element&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;date&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/p&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;           &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;p&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;element&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;location&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/p&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;           &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;p&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;element&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;text&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/p&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;            &lt;span class="p"&gt;)&lt;/span&gt;
  &lt;span class="p"&gt;})}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;And, we are done with our app 🎉🎉. We have successfully implemented Google Authentication and connected our app with Appwrite Database to store and get our data easily.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fmedia3.giphy.com%2Fmedia%2FaQYR1p8saOQla%2Fgiphy.gif%3Fcid%3Decf05e47inldatd22c8m3f1elz4xirzljtstr8i3yg4pybg1%26rid%3Dgiphy.gif%26ct%3Dg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fmedia3.giphy.com%2Fmedia%2FaQYR1p8saOQla%2Fgiphy.gif%3Fcid%3Decf05e47inldatd22c8m3f1elz4xirzljtstr8i3yg4pybg1%26rid%3Dgiphy.gif%26ct%3Dg" width="222" height="245"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://github.com/drishtipeshwani/Tourpal" rel="noopener noreferrer"&gt;Github Repo&lt;/a&gt; - Feel free to refer to this github repo for source code for this app.&lt;/p&gt;

</description>
      <category>react</category>
      <category>appwrite</category>
      <category>webdev</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>3 Python Mini Projects with code you can build now.</title>
      <dc:creator>Drishti Peshwani</dc:creator>
      <pubDate>Mon, 18 Oct 2021 19:31:38 +0000</pubDate>
      <link>https://dev.to/hackthisfall/3-python-mini-projects-with-code-you-can-build-now-16cf</link>
      <guid>https://dev.to/hackthisfall/3-python-mini-projects-with-code-you-can-build-now-16cf</guid>
      <description>&lt;p&gt;In today's post, I will be sharing three fun python mini projects with code that you can start building now. So, let's begin -&lt;/p&gt;

&lt;h4&gt;
  
  
  1. Random Password Generator
&lt;/h4&gt;

&lt;p&gt;&lt;em&gt;In this project, we will be writing a python program to generate random passwords.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Approach&lt;/strong&gt; - Here, we are first asking the user for the size of the desired password. After this, we define a long string consisting of alphabets, numbers, and special symbols. Once we have obtained the size, we will use the random.sample() function to generate a string of random characters of a given size.&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fi7hqi8vcv5ai9q4fp89r.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fi7hqi8vcv5ai9q4fp89r.png" alt="import random.py - Visual Studio Code 20-09-2021 10_20_12" width="800" height="156"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h4&gt;
  
  
  2. Convert PDF Text to Audiobook
&lt;/h4&gt;

&lt;p&gt;&lt;em&gt;In this project, we will be writing a python program that can be used to convert PDF text to audiobook.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Approach&lt;/strong&gt; - We will be using pyttsx3 python library to convert text to speech. &lt;br&gt;
&lt;strong&gt;Installation&lt;/strong&gt; - We will first install pyttsx3 and PyPDF2 packages. &lt;br&gt;
&lt;strong&gt;References&lt;/strong&gt; - &lt;a href="https://pypi.org/project/pyttsx3/" rel="noopener noreferrer"&gt;https://pypi.org/project/pyttsx3/&lt;/a&gt;&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbyalh1lvpgbfz2bsvfr1.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbyalh1lvpgbfz2bsvfr1.png" alt="import random.py - Visual Studio Code 20-09-2021 13_03_50" width="800" height="136"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h4&gt;
  
  
  3. Email Slicer Program
&lt;/h4&gt;

&lt;p&gt;&lt;em&gt;In this project, we will be writing a python program to fetch our username and domain name from our email address&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Approach&lt;/strong&gt; - We know that the username and domain name are separated by a @ character, so we will be basically dividing our entire email into 2 strings using @ as a divider.&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fuwcka3l709k7efekuy65.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fuwcka3l709k7efekuy65.png" alt="import random.py - Visual Studio Code 20-09-2021 13_09_55" width="800" height="179"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I hope you found these mini-projects useful and interesting and will build these projects, as the best way to learn any programming language is by building projects.&lt;/p&gt;

&lt;p&gt;If you enjoyed working on these projects, you can also participate in &lt;strong&gt;Hack This Fall 2.0&lt;/strong&gt; and explore building advanced projects. Hack This Fall is a 48 Hours virtual hackathon that aims at nurturing your new ideas and prototypes in various domains. You can check out the official website to get more information and register for the hackathon - &lt;a href="https://hackthisfall.tech/" rel="noopener noreferrer"&gt;https://hackthisfall.tech/&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Also, don't forget to use my referral code &lt;strong&gt;HTFHE092&lt;/strong&gt; while registering.&lt;/p&gt;

</description>
      <category>python</category>
      <category>beginners</category>
    </item>
  </channel>
</rss>
