A cutting-edge image gallery application built with the latest tools and technologies from the modern React ecosystem. 📸🎞️
This project is inspired by a YouTube tutorial of Theo. Check out this link to watch the full video.
This project leverages the power of the T3 Stack and was bootstrapped using create-t3-app. It demonstrates a modern, high-performance approach to application development, showcasing a seamless integration of state-of-the-art tools and technologies. The primary technologies utilized in this project include Next.js, Drizzle and Tailwind CSS.
Tutorial Topics
- Make it Deploy (to Vercel)
- Scaffold Basic UI with Mock Data
- Tidy Up Build Process
- Set Up a Database (Vercel Postgres)
- Attach Database to UI
- Add Authentication (w/ clerk)
- Add image upload (w/ UploadThing)
- "taint" (server-only)
- Use Next Image Component
- Error Management (w/ Sentry)
- Routing/ Image Page (parallel route)
- Custom Upload Button (w/ UploadThing Input)
- ChadUIify (specifically toasts)
- Add Toast Message (w/ chadcn)
- Delete Button (w/ Server Actions)
- Analytics (w/ posthog)
- Ratelimiting (w/ upstash)
For those unfamiliar with the technologies used in this project, referring to their respective documentation is recommended. For further assistance, consider joining the t3 Discord and ask for help. Here are some ideas to add to the project:
- Fix the page layout for images of different resolutions
- "Selecting" images on the gallery page
- "infinite scroll"
- Folders/albums
Learn More
To learn more about the T3 Stack, take a look at the following resources:
- Documentation
- Learn the T3 Stack — Check out these awesome tutorials
You can check out the create-t3-app GitHub repository — your feedback and contributions are welcome!