Prerequisites
Before you begin, ensure you have the following installed:- Node.js (v18 or higher)
- npm (v9 or higher)
- Git
- A code editor (VS Code recommended)
SENTi-radar is built with Vite + React 18 + TypeScript. Familiarity with these technologies will help you contribute effectively.
Initial Setup
Install Dependencies
Install all required npm packages:This will install:
- React 18 and React Router for the UI
- shadcn-ui components built on Radix UI
- TanStack React Query for data fetching
- Supabase client for database and edge functions
- Recharts for sentiment visualizations
- Vitest and Testing Library for unit tests
Configure Environment Variables
Copy the example environment file and configure your API keys:Edit
.env and add your credentials:Where to get API keys
Where to get API keys
- Supabase: Create a free project at supabase.com
- Scrape.do: Get a free API token at scrape.do
- YouTube: Enable YouTube Data API v3 at Google Cloud Console
- Gemini: Get an API key at Google AI Studio
- Groq: Sign up at Groq Console
Available Commands
Here are the key npm scripts you’ll use during development:Supabase Edge Functions
If you’re working on backend functionality, you’ll need to deploy Supabase Edge Functions:Verify Your Setup
To ensure everything is working correctly:- Check the dev server: Navigate to
http://localhost:8080and verify the app loads - Test authentication: Try signing up or logging in (requires Supabase)
- Search for a topic: Enter a search term like “climate change” to test data fetching
- Run tests: Execute
npm run testto ensure all unit tests pass
Troubleshooting Common Issues
Troubleshooting Common Issues
Port 8080 already in use
- Change the port in
vite.config.tsunderserver.port
- Delete
node_modulesandpackage-lock.json, then runnpm installagain - Ensure you’re using Node.js v18 or higher
- Verify your
VITE_SUPABASE_URLandVITE_SUPABASE_PUBLISHABLE_KEYare correct - Check your Supabase project is active and not paused
- Verify
VITE_SCRAPE_TOKENis set correctly - X.com is heavily protected; try enabling
super: truein scraping options
Next Steps
Now that your environment is set up:- Review the Project Structure to understand the codebase
- Learn about Testing to write and run tests
- Explore the source code in
src/to familiarize yourself with components and services