Personal Catalogue Web App 🎯

A full-stack web application to manage your personal collection of colognes and shoes.

🚀 Tech Stack

• Frontend & Backend: Next.js 14 (React framework)
• Database: Supabase (PostgreSQL)
• Authentication: Supabase Auth
• Storage: Supabase Storage (for images)
• Styling: Tailwind CSS
• Deployment: Vercel

📋 Prerequisites

Before you start, make sure you have:

• Node.js 18+ installed (Download here)
• A Supabase account (free) - Sign up here
• A Vercel account (free) - Sign up here
• Git installed
• A code editor (VS Code recommended)

🛠️ Local Development Setup

Step 1: Clone or Download This Project

# If using Git
git clone <your-repo-url>
cd catalogue-app

# Or download the ZIP and extract it

Step 2: Install Dependencies

npm install

Step 3: Set Up Supabase Database

1. Go to supabase.com and create a new project
2. Wait for the database to be ready (takes ~2 minutes)
3. Go to the SQL Editor in your Supabase dashboard
4. Copy and paste the SQL from supabase/schema.sql file
5. Click "Run" to create your tables

Step 4: Get Your Supabase Credentials

1. In your Supabase project, go to Settings > API
2. Copy your:
   • Project URL
   • anon public key

Step 5: Configure Environment Variables

1. Copy .env.example to .env.local:

cp .env.example .env.local

2. Open .env.local and add your Supabase credentials:

NEXT_PUBLIC_SUPABASE_URL=your-project-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key

Step 6: Set Up Image Storage

1. In Supabase dashboard, go to Storage
2. Create a new bucket called catalogue-images
3. Make it public:
   • Click on the bucket
   • Go to Policies
   • Add these policies:
     • INSERT: Enable "Allow public uploads"
     • SELECT: Enable "Allow public reads"

Step 7: Run the Development Server

npm run dev

Open http://localhost:3000 in your browser!

🎨 Features

✅ Completed

• User registration and login
• Add/Edit/Delete items (colognes & shoes)
• Image upload
• Filter by category
• Search functionality
• Responsive design
• Secure authentication

🚧 You Can Add Later

• Tags system
• Rating/condition tracking
• Wishlist feature
• Usage tracking
• Analytics dashboard
• Barcode scanning
• Social sharing

📁 Project Structure

catalogue-app/
├── app/                    # Next.js app directory
│   ├── api/               # API routes (optional)
│   ├── dashboard/         # Dashboard pages
│   ├── login/             # Auth pages
│   ├── signup/
│   └── page.js            # Home page
├── components/            # React components
│   ├── AddItemForm.js
│   ├── CatalogueGrid.js
│   ├── ItemCard.js
│   └── Navbar.js
├── lib/                   # Utilities
│   └── supabase.js        # Supabase client
├── public/                # Static files
├── supabase/
│   └── schema.sql         # Database schema
├── .env.local            # Environment variables (don't commit!)
└── package.json

🚀 Deployment to Vercel

Method 1: Using Vercel Dashboard (Easiest)

1. Push your code to GitHub
2. Go to vercel.com
3. Click "Add New Project"
4. Import your GitHub repository
5. Add environment variables:
   • NEXT_PUBLIC_SUPABASE_URL
   • NEXT_PUBLIC_SUPABASE_ANON_KEY
6. Click "Deploy"

Method 2: Using Vercel CLI

# Install Vercel CLI
npm i -g vercel

# Deploy
vercel

# Follow the prompts and add environment variables when asked

🧪 Demo User

After deployment, create a test account:

• Email: demo@catalogue.com
• Password: (create your own secure password)

📝 How to Use

1. Sign Up: Create an account on the signup page
2. Login: Access your personal dashboard
3. Add Items: Click "Add New Item" to add colognes or shoes
4. Upload Images: Drag and drop or click to upload product images
5. Filter: Use the category buttons to filter between colognes and shoes
6. Search: Type in the search box to find items by name or brand
7. Edit/Delete: Click on any item card to edit or remove it

🐛 Troubleshooting

Issue: "Invalid API Key"

• Make sure you copied the anon public key, not the service key
• Check that .env.local has no extra spaces

Issue: "Cannot upload images"

• Verify your storage bucket is public
• Check bucket name is exactly catalogue-images

Issue: "npm install fails"

• Delete node_modules and package-lock.json
• Run npm install again
• Make sure you're using Node.js 18+

Issue: Database connection errors

• Verify your Supabase project is active
• Check the URL doesn't have trailing slashes
• Make sure you ran the schema.sql file

📚 Learning Resources

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

🎯 Next Steps

1. Get the basic app running locally
2. Understand how each component works
3. Customize the design (colors, fonts, layout)
4. Add bonus features one at a time
5. Deploy and share with friends!

💡 Tips for Beginners

• Don't rush: Take time to understand each part
• Use the console: Check browser console for errors (F12)
• Read error messages: They usually tell you what's wrong
• Google errors: Copy error messages and search them
• Commit often: Save your progress with Git
• Ask for help: Use ChatGPT, Claude, or developer communities

🤝 Contributing

This is your personal project! Feel free to:

• Modify the design
• Add new features
• Experiment and break things
• Learn by doing

📄 License

MIT - Feel free to use this for learning!

---

Built with ❤️ by a beginner developer (you!)