Dogstagram is a high-performance, responsive web application designed for dog enthusiasts. Built with Svelte and Vite, it offers a seamless social media-style experience, allowing users to browse and discover various dog breeds with lightning-fast interactions.
- Reactive Gallery: A fluid feed of dog images that updates instantly using Svelte's built-in reactivity.
- Breed Discovery: Integration with The Dog API to fetch real-time breed data and high-quality imagery.
- Performance First: Compiled with Vite for a near-instant development experience and a tiny production footprint.
- Responsive UI: Mobile-first design ensures a great browsing experience on any device.
- Modular Styling: Clean and maintainable SCSS architecture using modern CSS patterns.
- Framework: Svelte (Zero-runtime overhead)
- Build Tool: Vite (Fast HMR and bundling)
- State Management: Svelte Stores (Native, lightweight state)
- Styling: SCSS / SASS
- API Integration: Fetch API
To get a local copy up and running, follow these simple steps:
- Clone the repo:
git clone [https://github.com/leoreyes07/dogstagram.git](https://github.com/leoreyes07/dogstagram.git)
- Install dependencies:
npm install
- Launch development server:
npm run dev
- Build for production:
npm run build
This project emphasizes clean code and modularity:
- Component-Driven: Each UI element is a self-contained Svelte component.
- Scoped Styles: SCSS is scoped to components to prevent style leakage and ensure maintainability.
- Efficient Data Flow: Leveraging Svelte's reactive declarations (
$:) to handle API data transformations without extra boilerplate.
Developed by Leo Reyes