Introduction
In a digital landscape where visual storytelling reigns supreme, photographers demand more than just a showcase – they crave a captivating platform that effortlessly amplifies their online presence.
Enter this project, a tailor-made solution designed exclusively for photographers. By harnessing the power of Next.js and Firebase, this project delivers a streamlined website building experience, perfectly suited for the photography community. Through the seamless integration of Next.js's performance and flexibility with Firebase's real-time data capabilities, photographers are equipped with an intuitive toolset to transform their visions into reality.
In-Site Editing
Upon logging in to the site, users are greeted with an admin top bar featuring an "Edit" button. Upon activation, all editable areas of the site are highlighted, indicating their accessibility for modification.
By clicking on any highlighted area, users summon a modal specific to that section, presenting a range of editing options tailored to the content. This allows users to seamlessly customise various aspects of the site without navigating through complex interfaces.
File Manager
The file manager streamlines image management by enabling users to handle images stored in Firebase Storage directly from the site, eliminating the need to navigate to the Firebase dashboard.
With the file manager, users can upload images from their local file manager, delete files in Firebase, and create new folders for easy organization—all within the familiar environment of the site.
Performance Excellence
The site consistently achieves perfect Lighthouse scores, due to its robust performance optimisations:
Image Optimisation: Images uploaded through the in-site file manager are automatically scaled to 2000px wide, ensuring they remain crisp while avoiding excessive file sizes. Additionally, aspect ratios are calculated and stored upon upload, preventing layout shifts during loading. Images are also converted to WebP format, maximising performance.
Incremental Static Regeneration: Rather than relying on server-side rendering, the site utilises incremental static regeneration. This approach ensures faster loading times, as HTML is always ready on request, without waiting for the server to first render it. Thanks to funcationality within Next.js, cached pages are revalidated whenever the user makes a change, keeping content up-to-date without compromising speed.
Development Reflection
For authentication, file storage, and database management, I utilised Firebase. Its JavaScript SDK is incredibly developer-friendly, and it offers a generous usage allowance on the free tier. However, during early development, I encountered issues with the bandwidth usage limit for storage (1GB per day). In the future, I plan to explore solutions like using a CDN or switching to another file storage service such as Amazon S3 to accommodate users storing images in full quality without restrictions.
Next.js/React formed the backbone of the site and its components. Next.js 13, alongside the app router with it's newly introducted server actions, proved highly effective for interacting with firebase. The page revalidation control was also instrumental, allowing the site to function as a static site until changes were necessary. Occasionally, users had to refresh the page a few times after making changes to see the updates while the site was rebuilding.
React-Bootstrap and Bootstrap icons were used to build most of the admin components. While they were great for quickly building a UI, they offered limited customisation options.
A special mention goes to the React-Hot-Toast library, which made the process of displaying notifications painless.
