A full-stack web application template with React frontend, Express.js backend, and Supabase authentication.

• Frontend: React 18 with Vite for fast development
• Backend: Express.js with RESTful API
• Authentication: Supabase integration with email/password and OAuth
• Styling: Tailwind CSS for modern UI
• State Management: React Context for authentication
• Routing: React Router for client-side navigation
• Development: Hot reload for both client and server

web-app/
├── client/                 # React frontend
│   ├── src/
│   │   ├── components/     # Reusable components
│   │   ├── contexts/       # React contexts
│   │   ├── lib/           # Utilities and configurations
│   │   ├── pages/         # Page components
│   │   └── services/      # API services
│   ├── .env.example       # Environment variables template
│   └── package.json
├── server/                 # Express.js backend
│   ├── server.js          # Main server file
│   ├── .env.example       # Environment variables template
│   └── package.json
├── .gitignore
└── package.json           # Root package.json with scripts

• Node.js 20.19+ or 22.12+
• npm or yarn
• Git

git clone <your-repo-url>
cd web-app

# Install all dependencies (client + server)
npm run install:all

# Or install separately
npm install                    # Root dependencies
cd client && npm install      # Client dependencies
cd ../server && npm install   # Server dependencies

Copy the example environment file and configure it:

cp client/.env.example client/.env.local

Edit client/.env.local:

# Supabase Configuration
VITE_SUPABASE_URL=https://your-project-id.supabase.co
VITE_SUPABASE_ANON_KEY=your-supabase-anon-key

# API Configuration
VITE_API_URL=http://localhost:3001

cp server/.env.example server/.env

Edit server/.env:

PORT=3001

1. Create a new project at supabase.com
2. Go to Settings → API
3. Copy your project URL and anon key
4. Update your client/.env.local file with these values
5. Enable authentication providers in Supabase dashboard:
   • Email/Password authentication
   • OAuth providers (Google, Microsoft, etc.)

# Start both client and server
npm run dev

# Or start separately
npm run client:dev    # Client only (port 5173)
npm run server:dev    # Server only (port 3001)

• npm run dev - Start both client and server
• npm run install:all - Install all dependencies
• npm run build - Build for production

• npm run client:dev - Start Vite development server
• npm run client:build - Build client for production

• npm run server:dev - Start server with nodemon
• npm run server:start - Start server normally

• GET /api/health - Server health status

• GET /api/items - Get all items
• POST /api/items - Create new item
• PUT /api/items/:id - Update item
• DELETE /api/items/:id - Delete item

• POST /api/auth/register - Register new user
• POST /api/auth/login - Login user
• GET /api/auth/me - Get current user

• SignIn: Email/password login with OAuth options
• SignUp: User registration with validation
• AuthContext: Global authentication state management

• Dashboard: Main application dashboard
• Profile: User profile management
• Settings: Application settings

1. Supabase First: Primary authentication through Supabase
2. Backend Fallback: Falls back to backend API if Supabase fails
3. OAuth Support: Google and Microsoft OAuth integration
4. Session Management: Automatic token refresh and session handling

cd client
npm run build
# Deploy the 'dist' folder to your hosting service

cd server
npm start
# Deploy to your server platform (Heroku, Railway, etc.)

• Environment variable protection
• CORS configuration
• Input validation
• Secure authentication flow
• Protected API routes

• Hot Reload: Both client and server support hot reload
• Environment Variables: Use .env.local for client, .env for server
• API Communication: Client communicates with server via REST API
• Error Handling: Comprehensive error handling throughout the app

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

This project is open source and available under the MIT License.

If you encounter any issues:

1. Check the console for errors
2. Verify environment variables are set correctly
3. Ensure Supabase project is properly configured
4. Check that all dependencies are installed

For more help, please open an issue in the repository.