Skip to content

Commit 2ffebc3

Browse files
Add 'WESMUN_Gallery_UNUSED/' from commit '894157f370230cba9904c144ee589881776817aa'
git-subtree-dir: WESMUN_Gallery_UNUSED git-subtree-mainline: 566a880 git-subtree-split: 894157f
2 parents 566a880 + 894157f commit 2ffebc3

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

55 files changed

+6632
-0
lines changed

WESMUN_Gallery_UNUSED/.gitignore

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
logs
2+
*.log
3+
npm-debug.log*
4+
yarn-debug.log*
5+
yarn-error.log*
6+
lerna-debug.log*
7+
.pnpm-debug.log*
8+
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
9+
pids
10+
*.pid
11+
*.seed
12+
*.pid.lock
13+
lib-cov
14+
coverage
15+
*.lcov
16+
.nyc_output
17+
.grunt
18+
bower_components
19+
.lock-wscript
20+
build/Release
21+
node_modules/
22+
jspm_packages/
23+
web_modules/
24+
*.tsbuildinfo
25+
.npm
26+
.eslintcache
27+
.stylelintcache
28+
.rpt2_cache/
29+
.rts2_cache_cjs/
30+
.rts2_cache_es/
31+
.rts2_cache_umd/
32+
.node_repl_history
33+
*.tgz
34+
.yarn-integrity
35+
.env
36+
.env.development.local
37+
.env.test.local
38+
.env.production.local
39+
.env.local
40+
.cache
41+
.parcel-cache
42+
.next
43+
out
44+
.nuxt
45+
dist
46+
.cache/
47+
.vuepress/dist
48+
.temp
49+
.docusaurus
50+
.serverless/
51+
.fusebox/
52+
.dynamodb/
53+
.tern-port
54+
.vscode-test
55+
.yarn/cache
56+
.yarn/unplugged
57+
.yarn/build-state.yml
58+
.yarn/install-state.gz
59+
.pnp.*
60+
.DS_*
61+
**/*.backup.*
62+
**/*.back.*
63+
node_modules
64+
*.sublime*
65+
psd
66+
thumb
67+
sketch
68+
/node_modules
69+
/.pnp
70+
.pnp.js
71+
/coverage
72+
/.next/
73+
/out/
74+
/build
75+
.DS_Store
76+
*.pem
77+
.env*.local
78+
.vercel
79+
next-env.d.ts
80+
/.idea/

WESMUN_Gallery_UNUSED/LICENSE

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2026 Shahm Najeeb
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

WESMUN_Gallery_UNUSED/README.md

Lines changed: 174 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,174 @@
1+
# WESMUN Photo Gallery
2+
3+
A modern, elegant photo gallery web application built for WESMUN (Wesgreen Model United Nations) to showcase event
4+
photos. Built with Next.js 16, React 19, TypeScript, and Tailwind CSS.
5+
6+
## Features
7+
8+
- **Organized Gallery**: Browse photos organized by different committees and categories
9+
- **Smart Filtering**: Filter images by committee/category with an intuitive filter bar
10+
- **Multi-Select**: Select multiple images at once for batch operations
11+
- **Bulk Download**: Download selected images as a ZIP file
12+
- **Elegant UI**: Clean, modern interface with gold accent theme (#D4AF37)
13+
- **Responsive Design**: Fully responsive layout that works on all devices
14+
- **Optimized Performance**: Server-side rendering with Next.js for fast loading
15+
- **Image Metadata**: Automatic image dimension detection and optimization
16+
17+
## Getting Started
18+
19+
### Prerequisites
20+
21+
- Node.js 18+ installed
22+
- npm or yarn package manager
23+
24+
### Installation
25+
26+
1. Clone the repository:
27+
```bash
28+
git clone <repository-url>
29+
cd "WESMUN Gallery"
30+
```
31+
32+
2. Install dependencies:
33+
```bash
34+
npm install
35+
```
36+
37+
3. Generate the gallery manifest:
38+
```bash
39+
npm run build-manifest
40+
```
41+
42+
4. Run the development server:
43+
```bash
44+
npm run dev
45+
```
46+
47+
5. Open [http://localhost:3000](http://localhost:3000) in your browser
48+
49+
## Project Structure
50+
51+
```
52+
WESMUN Gallery/
53+
├── app/ # Next.js app directory
54+
│ ├── api/ # API routes
55+
│ │ └── download/ # Image download endpoint
56+
│ ├── layout.tsx # Root layout
57+
│ ├── page.tsx # Main gallery page
58+
│ └── globals.css # Global styles
59+
├── components/ # React components
60+
│ ├── gallery/ # Gallery-specific components
61+
│ │ ├── gallery-client-wrapper.tsx
62+
│ │ ├── gallery-client.tsx
63+
│ │ ├── gallery-grid.tsx
64+
│ │ ├── gallery-item.tsx
65+
│ │ ├── filter-bar.tsx
66+
│ │ └── download-toolbar.tsx
67+
│ ├── ui/ # Reusable UI components
68+
│ ├── footer.tsx
69+
│ └── deployement-info.tsx
70+
├── lib/ # Utility functions
71+
│ ├── gallery.ts # Gallery data management
72+
│ └── ui.ts # UI utilities
73+
├── public/ # Static assets
74+
│ ├── images/ # Gallery images (organized by folder)
75+
│ ├── gallery-manifest.json # Auto-generated image metadata
76+
│ └── wesmun.svg # WESMUN logo
77+
├── scripts/ # Build scripts
78+
│ └── generate-gallery-manifest.js
79+
└── package.json
80+
```
81+
82+
## Scripts
83+
84+
- `npm run dev` - Start development server
85+
- `npm run build` - Build for production
86+
- `npm run start` - Start production server
87+
- `npm run lint` - Run ESLint
88+
- `npm run build-manifest` - Generate gallery manifest from images
89+
90+
## Adding Images
91+
92+
1. Add your images to the `public/images/` directory, organized by category:
93+
```
94+
public/images/
95+
├── eco/
96+
├── fsc/
97+
├── hcc/
98+
├── sochum/
99+
└── unsc/
100+
```
101+
102+
2. Run the manifest generation script:
103+
```bash
104+
npm run build-manifest
105+
```
106+
107+
3. The gallery will automatically detect and display new images
108+
109+
## Tech Stack
110+
111+
- **Framework**: [Next.js 16](https://nextjs.org/) - React framework with App Router
112+
- **UI Library**: [React 19](https://react.dev/) - Latest React version
113+
- **Language**: [TypeScript](https://www.typescriptlang.org/) - Type-safe JavaScript
114+
- **Styling**: [Tailwind CSS 4](https://tailwindcss.com/) - Utility-first CSS
115+
- **Components**:
116+
- [Radix UI](https://www.radix-ui.com/) - Headless UI components
117+
- [Lucide React](https://lucide.dev/) - Icon library
118+
- **Image Processing**: [image-size](https://www.npmjs.com/package/image-size) - Get image dimensions
119+
- **Archive**: [yazl](https://www.npmjs.com/package/yazl) - ZIP file creation
120+
121+
## Key Features Explained
122+
123+
### Gallery Manifest
124+
125+
The `gallery-manifest.json` file is automatically generated from your images' folder.
126+
It contains metadata about all images including:
127+
128+
- File paths and URLs
129+
- Folder organization
130+
- Image dimensions
131+
- Optimized loading structure
132+
133+
### Download System
134+
135+
Users can:
136+
137+
1. Select multiple images using checkboxes
138+
2. Filter selection by category
139+
3. Download selected images as a ZIP file via the `/api/download` endpoint
140+
141+
### Responsive Design
142+
143+
The gallery adapts to different screen sizes:
144+
145+
- Mobile: Single column layout
146+
- Tablet: 2-3 column grid
147+
- Desktop: 4+ column masonry-style grid
148+
149+
## Configuration
150+
151+
### Tailwind Configuration
152+
153+
Tailwind is configured in `tailwind.config.cjs` with custom plugins and animations.
154+
155+
### Next.js Configuration
156+
157+
Next.js settings can be modified in `next.config.mjs`.
158+
159+
## Contributing
160+
161+
This is a project for WESMUN. If you need to contribute:
162+
163+
1. Create a feature branch
164+
2. Make your changes
165+
3. Test thoroughly
166+
4. Submit a pull request
167+
168+
## Support
169+
170+
For issues or questions, please contact the WESMUN technical team.
171+
172+
---
173+
174+
**Built with ❤️ for WESMUN**

0 commit comments

Comments
 (0)