'The Frame' is an art marketplace platform where artists can showcase their work and art lovers can browse, favourite, and purchase artwork. Built with React, Vite, and TailwindCSS, featuring Firebase integration for authentication and storage.
This project was created as my final React SPA module project and is my first fully responsive and tested application! 🎉 It therefore represents a significant personal growth in my development journey!
- Key Features
- Tech Stack
- Technical Challenges and Solutions
- Project Structure
- Acknowledgments
- Preview
- Upload artwork with detailed information
- Set prices and track engagement
- Artist dashboard
- Save favourites for later
- Shopping cart functionality
- Detailed artwork views
- Art lover dashboard
- Responsive design for all devices
- Intuitive navigation
- Real-time notifications using React Hot Toast
- Smooth animations
- Firebase Authentication for user management
- Firestore database for storing artwork data
- Base64 image storage solution
- Real-time data updates across components
- Guest browsing with limited features
- Hybrid data source (Firebase + Unsplash API)
- React 18 with Vite
- TailwindCSS for styling
- React Router v7 for navigation
- React Context API for state management
- React Hot Toast for notifications
- Firebase Authentication
- Firebase Firestore Database
- Unsplash API for artwork gallery
- Base64 image storage solution
- Vercel for deployment
- Vitest for unit and integration testing
- Cypress for E2E testing
- React Testing Library
One of the biggest challenges was working within Firebase's free tier limitations while allowing artists to upload their artwork. Firebase Storage free tier has strict limitations and I needed to maintain image quality while reducing storage usage.
💡 The Solution: Implemented a Base64 conversion strategy (converted uploaded JPGs to Base64 strings before storage). The downside is that this requires users to upload smaller images - not ideal but it works and will do for now.
Another significant challenge was maintaining data consistency across different pages when artists updated their artwork details and their personal profiles. Changes needed to reflect immediately in favourites, cart, checkout, and artwork pages.
💡 The Solution: Used React Context to keep track of all data in one central place. This way, when an artist makes a change, every page can see and display the updated information right away. Still, managing data updates was very tricky because different components needed different pieces of the same artwork data, and updates had to sync with Firebase in real-time.
src/
├── components/
│ ├── auth/
│ ├── common/
│ └── layout/
│
├── contexts/
│ └── AuthContext
│
├── pages/
│ ├── ArtistDashboard
│ ├── ArtworkPage
│ ├── BecomeArtist
│ ├── CartPage
│ ├── CheckoutPage
│ ├── CheckoutSuccessPage
│ ├── FavoritesPage
│ ├── ForArtistsPage
│ ├── ForArtLoversPage
│ ├── HomePage
│ └── UserDashboard
│
├── config/
│ └── firebase.js
│
├── tests/
│ ├── cypress/
│ └── vitest/
A big thanks to Virtual Art Gallery for inspiring the design of this application. Their outstanding platform provided valuable insights that shaped my approach to building my art marketplace.
Created with ❤️ and React by Mr Sumo.
Thanks for reading!