Animas Project 🛍️

A modern, full-stack e-commerce catalog application for second-hand clothing built with Next.js 15 and Firebase. This project showcases a responsive product catalog with advanced filtering, search functionality, and seamless WhatsApp integration for customer inquiries.

✨ Introduction

Animas Project is a professional e-commerce catalog platform designed for selling second-hand clothing. The application features a clean, modern interface with real-time product filtering, search capabilities, and direct WhatsApp integration for customer communication. Built with cutting-edge technologies, this project demonstrates full-stack development skills with a focus on performance, user experience, and scalability.

Key Features

• 🔍 Advanced Search & Filtering: Real-time product search with category and price filtering
• 📱 Responsive Design: Fully responsive layout optimized for all devices
• 💬 WhatsApp Integration: Direct contact functionality for product inquiries
• 🚀 Performance Optimized: Built with Next.js 15 for optimal performance
• 🔥 Firebase Backend: Scalable cloud database with Firebase Firestore
• 🎨 Modern UI: Clean, professional interface with Tailwind CSS

🚀 Technologies Used

Frontend

• Next.js 15.0.3 - React framework with App Router
• React 19.0 - UI library
• TypeScript 5.0 - Type-safe JavaScript
• Tailwind CSS 3.4.1 - Utility-first CSS framework

Backend & Services

• Firebase 11.0.2 - Backend-as-a-Service
  • Firestore - NoSQL database for product storage
  • Firebase Data Connect - GraphQL-based data layer
  • Firebase Hosting - Static site hosting

Development Tools

• ESLint - Code linting
• PostCSS - CSS processing
• Node.js - Runtime environment

⚙️ Installation

Prerequisites

• Node.js 18+ and npm/yarn/pnpm
• Firebase account and project setup
• Git

Setup Instructions

1. Clone the repository

   git clone <repository-url>
   cd animas-app

2. Install dependencies

   npm install
   # or
   yarn install
   # or
   pnpm install

3. Configure environment variables

   Create a .env.local file in the root directory:

   NEXT_PUBLIC_FIREBASE_API_KEY=your_api_key
   NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your_auth_domain
   NEXT_PUBLIC_FIREBASE_PROJECT_ID=your_project_id
   NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your_storage_bucket
   NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=your_messaging_sender_id
   NEXT_PUBLIC_FIREBASE_APP_ID=your_app_id
   NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=your_measurement_id

   See .env.example for the complete template.

4. Set up Firebase

   • Create a Firebase project at Firebase Console
   • Enable Firestore Database
   • Configure Firebase Data Connect (if using)
   • Add your Firebase configuration to .env.local

5. Run the development server

   npm run dev
   # or
   yarn dev
   # or
   pnpm dev

6. Open your browser

   Navigate to http://localhost:3000 to see the application.

🧩 Project Structure

animas-app/
├── src/
│   ├── app/                    # Next.js App Router
│   │   ├── layout.tsx         # Root layout component
│   │   ├── page.tsx           # Main product catalog page
│   │   ├── globals.css        # Global styles
│   │   └── fonts/             # Custom fonts (Geist)
│   └── lib/                   # Utility functions
│       ├── firebase.js        # Firebase configuration
│       └── getProductos.ts    # Product data fetching
├── public/                    # Static assets
│   ├── logo.png              # Application logo
│   └── ...
├── dataconnect/              # Firebase Data Connect
│   ├── connector/            # GraphQL connector
│   └── schema/               # GraphQL schema
├── dataconnect-generated/    # Generated Data Connect code
├── firebase.json            # Firebase configuration
├── next.config.ts           # Next.js configuration
├── tailwind.config.ts       # Tailwind CSS configuration
├── tsconfig.json            # TypeScript configuration
├── package.json             # Project dependencies
└── README.md                # Project documentation

📜 Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run start - Start production server
• npm run lint - Run ESLint

🚢 Deployment

This application can be deployed to various platforms:

Vercel (Recommended)

The easiest way to deploy a Next.js app is using Vercel:

1. Push your code to GitHub
2. Import your repository in Vercel
3. Add environment variables in Vercel dashboard
4. Deploy automatically on every push

Firebase Hosting

Deploy using Firebase Hosting:

npm run build
firebase deploy

Other Platforms

• Render - Full-stack platform with automatic deployments
• AWS Amplify - AWS hosting solution
• Netlify - JAMstack platform
• Railway - Modern deployment platform

🔒 License

Copyright (c) 2024 Steven Morales Fallas

All rights reserved. Redistribution, modification, reproduction, sublicensing, or any form of transaction (including commercial, educational, or promotional use) involving this repository, its source code, or derived works is strictly prohibited without the explicit and personal written authorization of the Lead Developer, Steven Morales Fallas.

Unauthorized commercial use, resale, or licensing of this repository or its contents is strictly forbidden and will be subject to applicable legal action.

👨‍💻 Developer

Steven Morales Fallas
Full Stack Developer

---

⭐ If you find this project interesting, please consider giving it a star!