Aperture — Image Gallery

Project structure

aperture-react/
├── index.html               
├── package.json
├── package-lock.json
├── postcss.config.js          
├── tsconfig.json           
├── tsconfig.app.json
├── tsconfig.node.json
├── vite.config.ts
├── README.md
├── .gitignore
├── public/
│   └── favicon.svg          
└── src/
    ├── main.tsx                
    ├── App.tsx                 
    ├── index.css               
    ├── types/
    │   └── photo.ts           
    ├── data/
    │   └── photos.ts           
    ├── hooks/
    │   └── useTheme.ts        
    └── components/
        ├── ApertureMark.tsx    
        ├── ThemeToggle.tsx
        ├── Hero.tsx
        ├── FilterNav.tsx    
        ├── GalleryGrid.tsx
        ├── PhotoCard.tsx
        ├── Lightbox.tsx         
        └── Footer.tsx

Getting started

npm install
npm run dev       # start the dev server
npm run build     # type-check and build for production
npm run preview   # preview the production build locally