Brixs - AI Smart Contract Platform

A full-stack application combining Next.js 15 frontend with Express backend, powered by Supabase for authentication and data storage.

📋 Overview

Brixs is an AI-powered platform for building, auditing, and deploying smart contracts securely. This monorepo contains:

• Website (/website): Next.js 15 frontend with Obsidian design system
• API (/api): Express.js backend with Supabase integration

🚀 Quick Start

Prerequisites

• Node.js 18+ and npm/yarn/pnpm
• Supabase account (for database and authentication)
• Git

Setup

1. Clone the repository

   git clone https://github.com/Brixs-Chain/brixswebsite.git
   cd brixswebsite

2. Install dependencies

   npm install

3. Configure environment variables

   Copy .env.example to .env.local and fill in your Supabase credentials:

   cp .env.example .env.local

   Fill in the required variables:

   • NEXT_PUBLIC_SUPABASE_URL: Your Supabase project URL
   • NEXT_PUBLIC_SUPABASE_ANON_KEY: Your Supabase anon key
   • SUPABASE_SERVICE_ROLE_KEY: Your Supabase service role key

4. Get Supabase Credentials

   • Go to Supabase Dashboard
   • Select your project
   • Navigate to Settings → API
   • Copy Project URL and anon public key
   • Get service role key from same page

5. Start the development servers

   # Terminal 1: Start the API
   cd api
   npm run dev
   # API will run on http://localhost:3001
   
   # Terminal 2: Start the website
   cd website
   npm run dev
   # Website will run on http://localhost:3000

📁 Project Structure

brixswebsite/
├── api/                          # Express.js backend
│   ├── src/
│   │   ├── index.ts             # Main application entry
│   │   ├── routes/
│   │   │   ├── auth.ts          # Authentication routes
│   │   │   ├── contact.ts       # Contact form routes
│   │   │   ├── contracts.ts     # Smart contract routes
│   │   │   ├── audit.ts         # Audit routes
│   │   │   └── deploy.ts        # Deployment routes
│   │   ├── db/
│   │   │   └── database.ts      # Supabase client setup
│   │   ├── middleware/
│   │   │   └── auth.ts          # JWT authentication middleware
│   │   └── migrations/
│   │       └── 001_create_contact_submissions.sql
│   ├── package.json
│   └── .env.example
│
├── website/                      # Next.js 15 frontend
│   ├── app/
│   │   ├── layout.tsx           # Root layout
│   │   ├── page.tsx             # Home page
│   │   ├── globals.css          # Global styles
│   │   └── auth/
│   │       ├── login/page.tsx   # Login page
│   │       ├── signup/page.tsx  # Signup page
│   │       └── layout.tsx       # Auth layout
│   ├── components/
│   │   └── ContactForm.tsx      # Contact form component
│   ├── lib/
│   │   └── supabase.ts          # Supabase client & helpers
│   ├── package.json
│   ├── tailwind.config.js       # Tailwind configuration
│   └── .env.local.example
│
├── .env.example                 # Root environment variables
└── package.json                 # Root package.json

🔐 Features

Frontend (Next.js 15)

• Responsive Landing Page: Modern Obsidian design system
• Contact Form: With validation and error handling
• Authentication Pages: Login and signup with OAuth support
• Tailwind CSS: Complete design system implementation
• Obsidian Protocol Design: Electric cyan, vibrant purple, security green color scheme

Backend (Express.js)

• Contact Submission API: Store submissions in Supabase
• Authentication: JWT-based auth with Supabase
• Rate Limiting: Prevent spam submissions
• CORS Configuration: Allow frontend-backend communication
• Error Handling: Comprehensive error handling
• Input Validation: Zod schema validation

Database (Supabase)

• contact_submissions Table: Store form submissions with RLS
• Row Level Security: Protect user data
• Indexes: Optimize query performance
• OAuth Providers: Google and GitHub authentication

📝 API Endpoints

Contact Endpoints

Submit Contact Form

POST /contact/submit
Content-Type: application/json

{
  "name": "John Doe",
  "email": "john@example.com",
  "message": "Your message here"
}

Get Submissions (requires auth)

GET /contact/submissions
Authorization: Bearer <token>

Update Submission Status (requires auth)

PATCH /contact/submissions/:id
Authorization: Bearer <token>
Content-Type: application/json

{
  "status": "read"  // or "replied"
}

Auth Endpoints

Sign Up

POST /auth/signup
{
  "email": "user@example.com",
  "password": "securepassword",
  "name": "John Doe"
}

Login

POST /auth/login
{
  "email": "user@example.com",
  "password": "password"
}

Sync with Supabase

POST /auth/sync
Authorization: Bearer <supabase_jwt>

🎨 Design System (Obsidian Protocol)

The frontend implements the Obsidian design system with:

• Colors:

  • Electric Cyan: Primary actions (#dbfcff, #00f0ff)
  • Vibrant Purple: Secondary/Web3 (#ddb7ff, #6f00be)
  • Security Green: Success states (#dcffdb, #60f587)
  • Obsidian Surface: Dark backgrounds (#131314)

• Typography:

  • Display: Space Grotesk for headers
  • Body: Inter for content
  • Mono: Code and addresses

• Depth: Tonal layering without borders

• Components: Buttons, inputs, cards with consistent styling

🔧 Configuration

Environment Variables

Create .env.local in the root directory:

# Supabase
NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_anon_key
SUPABASE_SERVICE_ROLE_KEY=your_service_role_key

# API
NEXT_PUBLIC_API_URL=http://localhost:3001
WEBSITE_URL=http://localhost:3000
PORT=3001
NODE_ENV=development

Supabase Setup

1. Create a new project in Supabase
2. Copy API credentials to .env.local
3. The contact_submissions table will be auto-created on first API run
4. Configure OAuth (optional):
   • Go to Authentication → Providers
   • Enable Google and GitHub
   • Add credentials from Google Cloud Console and GitHub

📦 Scripts

API

npm run dev      # Start development server
npm run build    # Build for production
npm run start    # Start production server
npm run lint     # Run TypeScript check

Website

npm run dev      # Start development server
npm run build    # Build for production
npm run start    # Start production server
npm run lint     # Run linting

🚢 Deployment

Vercel Deployment - RECOMMENDED

The recommended approach is to deploy the website on Vercel and the API separately:

Option 1: Deploy Website + API as One Project (Monorepo)

1. Push to GitHub (already connected)

2. Go to Vercel Dashboard

3. Import the GitHub repository

4. Root directory: Leave as root (it's a monorepo)

5. Build & Output settings:

   • Build Command: cd website && npm install && npm run build
   • Output Directory: website/.next
   • Install Command: npm install

6. Add Environment Variables in Vercel:

   NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
   NEXT_PUBLIC_SUPABASE_ANON_KEY=your_anon_key
   SUPABASE_SERVICE_ROLE_KEY=your_service_role_key
   BACKEND_API_URL=https://your-api-domain.vercel.app
   

7. Deploy the API separately:

   • Create a new Vercel project for the API
   • Connect same GitHub repo
   • Root directory: api
   • Build Command: npm install && npm run build
   • Output Directory: dist
   • Add same Supabase env vars

Option 2: Deploy Website to Vercel, API to Different Provider

If your API is deployed elsewhere (e.g., Railway, Render, AWS):

1. Deploy website to Vercel as above
2. Deploy API to your chosen provider
3. Set BACKEND_API_URL to your API's public URL

Production Checklist

• Create Supabase project
• Copy Supabase credentials to environment variables
• Deploy API first (verify it works)
• Deploy website with BACKEND_API_URL pointing to API
• Test contact form submission
• Enable custom domain (optional)
• Setup GitHub deployments for auto-deploy on push

Manual Deployment (Local Build)

# Build API
cd api
npm install
npm run build

# Build website
cd ../website
npm install
npm run build

# Deploy dist/api to your hosting
# Deploy .next/website to your hosting

Troubleshooting Deployment

404 Error on Contact Form Submission:

• Check BACKEND_API_URL environment variable
• Verify API is deployed and accessible
• Check browser console for exact endpoint being called

CORS Error:

• Verify WEBSITE_URL is set in API environment
• Check API CORS configuration includes your website domain

Supabase Connection Error:

• Verify all Supabase env vars are set
• Check database is initialized with contact_submissions table
• Run migration if needed

🧪 Testing

# Test contact form submission
curl -X POST http://localhost:3001/contact/submit \
  -H "Content-Type: application/json" \
  -d '{
    "name": "Test User",
    "email": "test@example.com",
    "message": "This is a test message with at least 10 characters"
  }'

# Expected response:
# {
#   "success": true,
#   "message": "Your message has been received. We will get back to you soon.",
#   "submissionId": "uuid-here"
# }

📚 Documentation

• Supabase Documentation
• Next.js Documentation
• Express.js Documentation
• Tailwind CSS Documentation

🤝 Contributing

1. Create a feature branch: git checkout -b feature/your-feature
2. Commit your changes: git commit -am 'Add feature'
3. Push to the branch: git push origin feature/your-feature
4. Submit a pull request

📄 License

MIT License - see LICENSE file for details

🆘 Support

For issues and questions:

• Open an issue on GitHub
• Contact: support@brixs.io

⚡ Performance Tips

• Use npm run build to optimize for production
• Enable gzip compression on your server
• Use a CDN for static assets
• Implement caching strategies
• Monitor database query performance

🔒 Security Notes

• Never commit .env.local files
• Use environment variables for sensitive data
• Enable RLS (Row Level Security) in Supabase
• Validate all user inputs
• Use HTTPS in production
• Keep dependencies updated
• Rate limiting is enabled on contact endpoint

---

Built with ❤️ using Next.js 15, Express, and Supabase