Welcome to Portrait Gallery, a full-stack web application showcasing Timothy Barnaby's pastel portraits on pumice board. This gallery allows users to explore, filter, and shop new artworks.
Fun Fact: This app was built while vibing to Ari Lennox's Shea Butter Baby and Selena’s La Leyenda — a mix of R&B and Tejano royalty that kept me coding thorugh the struggles.
Smooth, soulful, and powerful — the perfect soundtrack for creating elegant UI and seamless user experience.
Channeling the Queen of Tejano music for that vibrant backend structure and smooth API interactions.
- Auto-scrolling Carousel: Showcases images dynamically with a central enlarged piece, creating a fluid and elegant visual experience.
- Static Gallery: Browse all available artworks in a grid, with the ability to filter by title and size.
- Upload Functionality: Upload new pieces directly into the gallery, with visual confirmation on success.
- Filter by Size: Easily view artworks by medium (8x10 inches) or large (11x14 inches) size.
This project makes use of a robust set of technologies to ensure a smooth experience for both users and administrators.
- React: For creating a responsive, component-based user interface.
- Bulma: A modern CSS framework that simplifies responsive design.
- React-Slick: For the beautiful carousel gallery.
- Node.js: Backend server using Express for smooth API handling.
- MongoDB Atlas: Hosted database for storing artwork details, including size, title, and image links.
- Cloudinary: Image hosting and delivery for the uploaded artwork files.
- Fly.io: Application hosting with Docker integration.
- Docker: For containerization, ensuring consistent environments during development and production.
- Git & GitHub: Version control and repository hosting.
- Multer: For handling file uploads.
- Axios: For making HTTP requests to the backend.
- dotenv: Managing environment variables securely.
- ChatGPT (powered by GPT-4): My trusted AI partner, providing coding tips, debugging assistance, and continuous support throughout the project build.
- Clone the repository:
git clone [email protected]:yourusername/gallery.git