This is a gallery application built as a part of learning jounrey, following Theo Browne's modern react tutorial on his YouTube channel. The purpose of this project is to enhance my react skills by building the gallery application.
- Make it deploy (vercel)
- Scaffold basic UI with mock data (uploadThings)
- Check the build process and tidy it up
- Set up a database (vercel postgres)
- Attach a database to the UI
- Add authentication (clerk)
- Add image upload
- Associate images with users
- "taint" server only
- Using next/Image component
- Adding parallel routes
- Added a modal to display the image when it is triggered via a soft navigation with Link tag.
- Created a standalone page for the image when the page is refreshed.
Parallel routes
Parallel routes are a feature of Next.js that allows simultaneous rendering of multiple pages within the same layout. This is useful when you have dynamic sections in your page.
- This parallel routing is to render a modal/page when a user clicks on an image within the application.
- When the page is refreshed, it is rendered as a standalone page.
- Advantages of parallel routes:
- Independent routes so that we can manage its state, error and other features separately and at a granular level.
- Sub navigation within the same layout. But we need to include default.tsx in the other slots to prevent the 404 error.
This project is heavily inspired by Theo Browne's React tutorial on his YouTube channel. Many thanks to Theo for his educational content and guidance.