📁 Project Structure (example)

enatega-clone/
├─ public/
│  ├─ screenshots/
│  │  ├─ landing.png
│  │  ├─ login.png
│  │  ├─ customer.png
│  │  └─ profile.png
├─ src/
│  ├─ assets/
│  ├─ components/
│  ├─ pages/
│  ├─ services/        # supabase client, api calls
│  ├─ hooks/
│  ├─ styles/
│  ├─ App.jsx
│  └─ main.jsx
├─ .env
├─ package.json
└─ README.md

🔧 Setup & Running Locally

1. Clone the repo

git clone https://github.com/<your-username>/enatega-clone.git
cd enatega-clone

2. Install dependencies

npm install
npm run dev
# or
yarn run dev

3. Create a Supabase project

• Go to supabase.com and create a new project.

• In the Supabase dashboard, enable Auth (Email + password is enough for now).

• Create a customers table with fields like:

  • id (Primary Key, UUID)
  • name (Text)
  • phone_number (Text)
  • email (Text)

4. Add environment variables

Create a .env (or .env.local) file in the project root and add:

VITE_SUPABASE_URL=https://your-supabase-url.supabase.co
VITE_SUPABASE_ANON_KEY=your-anon-public-key
# If using Create React App, use REACT_APP_ prefix instead
# REACT_APP_SUPABASE_URL=...
# REACT_APP_SUPABASE_KEY=...

Replace keys with the values from your Supabase project settings.

🛠️ CRUD Operations with Supabase

Inside your React project, you can use Supabase client to perform CRUD operations on the customers table.

1. Initialize Supabase Client (services/supabaseClient.js)

import { createClient } from '@supabase/supabase-js';

const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY;

export const supabase = createClient(supabaseUrl, supabaseAnonKey);

2. Create (Insert Data)

const { data, error } = await supabase
  .from('customers')
  .insert([{ name: 'Ali Khan', phone_number: '03001234567', email: 'ali@example.com' }]);

3. Read (Fetch Data)

const { data, error } = await supabase
  .from('customers')
  .select('*');

4. Update

const { data, error } = await supabase
  .from('customers')
  .update({ phone_number: '03111234567' })
  .eq('id', 'customer-uuid-here');

5. Delete

const { error } = await supabase
  .from('customers')
  .delete()
  .eq('id', 'customer-uuid-here');

5. Start the dev server

npm run dev
# or
npm start

6. Open http://localhost:5173 (Vite) or http://localhost:3000 (CRA) in your browser.

📦 Deployment

You can deploy the site using Vercel, Netlify, or GitHub Pages.

Vercel (recommended for easy React + Vite):

• Connect your GitHub repo to Vercel.
• Add the environment variables in Vercel dashboard (same names as .env).
• Deploy.

Netlify:

• Connect repository, set build command (npm run build) and publish directory (dist for Vite, build for CRA).
• Add environment variables in site settings.

🔐 Supabase Notes

• Use the anon (public) key for client-side calls. Keep the service_role key secret (server only).
• For simple demos, store customer details (name, phone number, email) in a customers table and fetch them from the client.
• Protect sensitive operations with row-level security (RLS) and policies in Supabase.

✅ Performance & Accessibility Tips

• Lazy-load images and components (React.lazy + Suspense).
• Use loading="lazy" for images.
• Minimize bundle size by importing only what you need.
• Use semantic HTML and ARIA attributes for better accessibility.

✨ Improvements / TODO

• Improve search & filtering
• Add unit tests and e2e tests

🤝 Contributing

Contributions are welcome!

1. Fork the repo
2. Create a new branch: git checkout -b feature/my-feature
3. Make changes and commit: git commit -m "Add feature"
4. Push and create a PR

📄 License

This project is open source. Add your preferred license (e.g., MIT).

📬 Contact

• Name:Muhammad Achar
• Email: muhammadacharzardari69@gmail.com
• GitHub: https://github.com/muhammadachar435/Enatega-Frontend-Website-Supabase/

Replace the Vercel and CodeSandbox demo links with your actual deployed links.

Lerna is a fast, modern build system for managing and publishing multiple JavaScript/TypeScript packages from the same repository.