Snackify is a frontend project built by Emmanuel Martínez for a dessert-focused e-commerce platform that connects customers with local sweet shops. Developed with Astro as the static site framework, TypeScript for end-to-end type safety, and Tailwind CSS for rapid utility-first styling, Snackify delivers a polished, performant shopping interface that ships near-zero JavaScript to the browser by default — while remaining fully open for future backend integration when order management and payment processing are needed.Documentation Index
Fetch the complete documentation index at: https://mintlify.com/Emmanuel-Mtz-777/My-Personal-Portfolio/llms.txt
Use this file to discover all available pages before exploring further.
Project Metadata
| Field | Details |
|---|---|
| GitHub Repository | Emmanuel-Mtz-777/Snackify |
| Primary Language / Framework | TypeScript / Astro |
| Status | Open Source |
Tech Stack
| Technology | Purpose |
|---|---|
| Astro | Static site framework powering fast, component-driven page generation |
| JavaScript | Application logic and dynamic interactions across components |
| TypeScript | Compile-time type safety across all components and utilities |
| Tailwind CSS | Utility-first CSS framework for consistent, responsive styling |
Overview
Snackify presents a complete storefront experience for a fictional dessert brand: product listings, category browsing, and promotional content are all rendered as static HTML at build time, ensuring sub-second page loads even on modest connections. The project is structured around Astro’s component model, where each UI section — hero banner, product grid, cart preview — lives in its own.astro or .tsx file, keeping the codebase modular and easy to extend.
TypeScript is used throughout the component layer, catching mismatched props and missing data fields before the code ever ships. Tailwind CSS drives every visual decision, from grid layouts to hover states, without a single custom CSS class — all styling tokens live directly in the markup, making design changes fast and predictable.
The architecture is deliberately backend-agnostic: product data is currently sourced from local JSON or Markdown files, but the same component interfaces can be wired to any REST or GraphQL API without restructuring the frontend. This makes Snackify a solid foundation for a full production e-commerce build.
Key Features
Fast Static Pages
Astro’s static site generation outputs pre-rendered HTML for every route, resulting in instant page loads and excellent Lighthouse scores out of the box.
Tailwind UI
Every component is styled exclusively with Tailwind utility classes, delivering a responsive, mobile-first layout without any custom CSS overhead.
TypeScript Type Safety
All component props, data models, and utility functions are fully typed with TypeScript, eliminating an entire class of runtime errors at compile time.
Ready for Backend Integration
The data-fetching layer is intentionally abstracted so any REST API, headless CMS, or database can be connected without rewriting existing components.
Technical Details
Snackify is built on Astro’s Islands Architecture, where interactivity is opt-in rather than the default. Each page is rendered to static HTML at build time; only explicitly hydrated components ship JavaScript to the client. This means product listing pages, banners, and navigation are pure HTML and CSS — zero runtime overhead — while any interactive widget (such as a cart drawer or filter panel) can be independently hydrated withclient:load or client:visible directives.
The output target is SSG (Static Site Generation), producing a flat directory of HTML, CSS, and assets that can be deployed to any CDN or static host with no server-side runtime. TypeScript compilation is handled by Astro’s built-in Vite pipeline, so no separate tsc step is needed. Tailwind CSS is processed via PostCSS and purged at build time, keeping the final stylesheet minimal regardless of how many utility classes are referenced in source.