Svelte Gallery App

A Pinterest-like image gallery application built with SvelteKit, TypeScript, and Tailwind CSS. This application allows users to browse, view, and interact with a collection of images in a responsive grid layout.

✨ Features

• 🖼️ Responsive masonry grid layout for images
• 🌓 Dark/Light mode toggle
• 🔍 Image lightbox with navigation
• ♥️ Like/save functionality
• 📱 Mobile-first responsive design
• ♿ Built with accessibility in mind
• ⚡ Optimized performance with lazy loading
• 🎨 Customizable theme system

📋 Project Plan

For a detailed overview of the project's architecture, progress, and roadmap, see the Project Plan.

🚀 Getting Started

Prerequisites

• Node.js 16.x or later
• npm 7.x or later

Installation

1. Clone the repository:

   git clone https://github.com/Gamaroff/svelte-gallery.git
   cd svelte-gallery
   

2. Install dependencies:

   npm install
   

3. Start the development server:

   npm run dev -- --open
   

   This will start the development server and open the app in your default browser at http://localhost:5173.

🛠 Development

Available Scripts

• npm run dev - Start the development server
• npm run build - Build for production
• npm run preview - Preview the production build locally
• npm run test - Run tests
• npm run lint - Run ESLint
• npm run format - Format code with Prettier

Project Structure

src/
├── lib/
│   ├── components/     # Reusable UI components
│   │   ├── gallery/    # Gallery-specific components
│   │   └── layout/     # Layout components
│   ├── styles/         # Global styles and Tailwind
│   └── mockData.ts     # Sample data
├── routes/             # Application routes
└── app.html            # Main HTML template

📦 Dependencies

• SvelteKit - Web framework
• TypeScript - Type checking
• Tailwind CSS - Utility-first CSS framework
• PostCSS - CSS processing
• ESLint - JavaScript/TypeScript linting
• Prettier - Code formatting
• Vitest - Testing framework

🚧 Project Status

✅ Completed Features

• Responsive grid layout
• Dark/light theme toggle
• Image lightbox with navigation
• Basic pin interaction (like/save)
• Mobile-first responsive design
• Accessibility improvements
• TypeScript integration

🚧 In Progress / Todo

• User authentication
• Image upload functionality
• User profiles
• Collections/Boards
• Search functionality
• Advanced filtering and sorting
• More comprehensive testing

🤝 Contributing

Contributions are welcome! Please read our Contributing Guidelines and Code of Conduct for details on how to contribute to this project.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Svelte - The magical disappearing UI framework
• Tailwind CSS - For making styling a breeze
• Pexels - For the beautiful sample images
• SvelteKit - For the amazing framework