TagIt 📨

TagIt is a Chrome extension that helps users manage email overload by transforming inbox content into clear actions. It connects to users' email accounts (Gmail/Outlook) and calendars (Google Calendar) to automatically organize chaotic inboxes and prevent scheduling disasters. AI reads incoming emails, assigns urgency/category tags, generates one-line summaries, extracts deadlines and action items, then automatically detects meeting invitations and syncs them to the calendar while checking for conflicts.

MVP 🏆

• OAuth (Gmail/Outlook)
• Inbox scanning with action summary
• AI tagging system (Urgent, Action Required, Promotional)
  • Tag reasoning
• Deadline & meeting time extraction
• Auto-sync to calendar w/ conflict alerts
  • Events only added w/ user confirmation
  • Manual override
• Unified dashboard

Stretch Goals 💪

• Weekly digest
• Follow-up reminders
• Unsubscribe suggestions
• Context aware summaries

Timeline 📆

Week 1: Set Up ⚙️

• Discuss who’s frontend/backend and overall project goals & techstack
• Go over GitHub basics:
  • Create branches.
• Start wireframing on Figma
• Research techstack and gain familiarity
  

Week 2: More Preparation 💡

• Front End:
  • UI/UX design in Figma for pop up extension
  • UI/UX design in Figma for website
  • Color palette & logo design
• Back End:
  • Set up user authentication & read email perms
  • Work on designing the Schema for the Database
  • API research
    

Weeks 3-4: Coding 👨🏻‍💻

• Front End:

  • Signup/Login
  • “Connecting email…” screen
  • Tag badges
  • Pop ups for detected events/deadlines

• Back End:

  • Implement Oauth
  • Fetch recent emails
    • Store in database
  • AI tagging
    • Deadline extraction
  • Google Calendar integration

Weeks 5-6: Middle Stretch 👾

• Front End:

  • Priority inbox view
  • Action summary
  • Email hierarchy
  • Deadline view

• Back End:

  • Priority logic
  • Urgency reasoning
  • Fetch calendar meeting times
  • Conflict detection logic
  • Set up demo account

Weeks 7-8: Finishing Touches 👔

• Plan and brainstorm for the presentation.

  • Watch previous presentations for inspiration and understanding.

• Work on stretch goals.

• Front End:

  • Presentation slides & script
  • Final feature touches

• Back End:

  • Last integrations
  • Finished video/demo

Weeks 9-10: Wrapping Up/Presentation Night 🗣🎤🖥️

• Complete any remaining stretch goals.
• Prepare and practice the presentation & Q&A.
• Present!
  

Tech Stack & Resources 💻

Start here!

• What is a frontend?
• What is a backend?
• REST APIs
• Basic Git & GitHub in VSCode Tutorial

React Chrome Extension

• How to Create a Chrome Extension with React, TypeScript, TailwindCSS, and Vite
• How To Build A Chrome Extension Using React
• Tailwind CSS:
  • Documentation
  • Build a Chrome Extension in MINUTES With React and Tailwind CSS!
• Vite:
  • Documentation
  • Full Tutorial | Building a Chrome Extension in Typescript and Vite
• Content Scripts:
  • It allows you to read details from the web page
  • Beginners guide to Building Content Scripts

React Website

• Setup
• Setting up the Environment
• React Tutorial for Beginners
• Do’s and Don'ts -
  • 10 React Antipatterns to Avoid - Code This, Not That!

Git Commands 🤖

Command	What it does
git branch	lists all the branches
git branch "branch name"	makes a new branch
git checkout "branch name"	switches to specified branch
git add .	finds all changed files
git commit -m "Testing123"	commit with a message
git push	push to branch
git pull "branch"	pull updates from a specific branch

Team TagIt 😆

Developers

• Ankitha Shaji Thomas
• Peyton McEntire
• Aryan Sanoj Raj
• Sneha Lal
• Hayden Hayes

Project Manager

• Tramanh Trinh

Industry Mentor

• Abis Naqvi