Skip to main content

​
Prerequisites

Before setting up the frontend, ensure you have the following installed:
Download and install from nodejs.org. Check your version:
node --version  # Should be v20.x.x or higher
Comes with Node.js. Verify installation:
npm --version  # Should be 10.x.x or higher
Required for version control:
git --version

​
Installation

​
1. Clone the Repository

git clone <repository-url>
cd tambo360

​
2. Navigate to Frontend Directory

cd apps/frontend

​
3. Install Dependencies

npm install
This will install all required packages including:
  • React 19 and React DOM
  • TypeScript
  • Vite
  • TanStack Query
  • React Router
  • Tailwind CSS
  • And all other dependencies
Installation may take 2-3 minutes depending on your internet connection.

​
4. Configure Environment Variables

Create a .env file in the frontend root directory: 
touch .env
Add the following configuration:
.env
# API Endpoints
VITE_API_URL=http://localhost:3000/api
VITE_API_IA_URL=http://localhost:3000/ia

# Optional: Enable development features
VITE_ENABLE_DEVTOOLS=true
Never commit .env files to version control. The .env file is already included in .gitignore.

​
5. Start Development Server

npm run dev
You should see output similar to: 
  VITE v6.2.0  ready in 385 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: http://192.168.1.100:5173/
  ➜  press h + enter to show help
Open your browser and navigate to http://localhost:5173.

​
Verify Installation

​
Check the Login Page

If everything is set up correctly, you should see the Tambo360 login page with:
  • Tambo360 logo
  • Email and password input fields
  • “Iniciar sesión” button
  • Link to register page

​
Test Hot Module Replacement

  1. Open any .tsx file in src/pages/
  2. Make a small change (e.g., modify text)
  3. Save the file
  4. The browser should automatically update without a full reload

​
Development Scripts

The package.json includes several useful scripts: 
# Start dev server with HMR
npm run dev

​
Editor Setup

Install these extensions for the best development experience:
1

ESLint

Install dbaeumer.vscode-eslint for real-time linting
2

Prettier

Install esbenp.prettier-vscode for code formatting
3

Tailwind CSS IntelliSense

Install bradlc.vscode-tailwindcss for Tailwind class autocomplete
4

TypeScript

Built-in support, no extension needed

​
VS Code Settings

Create .vscode/settings.json in the project root:
.vscode/settings.json
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "typescript.tsdk": "node_modules/typescript/lib",
  "tailwindCSS.experimental.classRegex": [
    ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
  ]
}

​
Troubleshooting

​
Port Already in Use

If port 5173 is already in use: 
# Kill the process using port 5173
lsof -ti:5173 | xargs kill -9

# Or use a different port
vite --port 3001

​
Module Not Found Errors

# Clear node_modules and reinstall
rm -rf node_modules package-lock.json
npm install

​
TypeScript Errors

# Restart TypeScript server in VS Code
Ctrl+Shift+P -> "TypeScript: Restart TS Server"

# Or run type checking manually
npx tsc --noEmit

​
Build Errors

# Clear Vite cache
rm -rf node_modules/.vite

# Try building again
npm run build

​
Environment Variables Not Working

Remember: Vite requires environment variables to be prefixed with VITE_
# ✅ Correct
VITE_API_URL=http://localhost:3000/api

# ❌ Wrong (won't be accessible)
API_URL=http://localhost:3000/api
After changing .env, restart the dev server: 
# Stop server (Ctrl+C)
# Start again
npm run dev

​
Next Steps

Project Structure

Understand the architecture

Layout Components

Learn about layout system

Authentication

Implement authentication

Routing

Configure application routes

​
Additional Resources

Vite Docs

Official Vite documentation

React Docs

Official React documentation

TypeScript

TypeScript handbook

Build docs developers (and LLMs) love

Get started for freeTalk to us