https://github.com/thomascode92/tcgallery
A cutting-edge image gallery application crafted using the latest tools and technologies from the modern React ecosystem. 📸🎞️
https://github.com/thomascode92/tcgallery
chadcn-ui clerk drizzle-orm nextjs postgres posthog react-server-components typescript uploadthing vercel
Last synced: 21 days ago
JSON representation
A cutting-edge image gallery application crafted using the latest tools and technologies from the modern React ecosystem. 📸🎞️
- Host: GitHub
- URL: https://github.com/thomascode92/tcgallery
- Owner: ThomasCode92
- Created: 2024-12-12T19:46:18.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2025-01-07T19:44:59.000Z (4 months ago)
- Last Synced: 2025-02-13T15:17:43.193Z (2 months ago)
- Topics: chadcn-ui, clerk, drizzle-orm, nextjs, postgres, posthog, react-server-components, typescript, uploadthing, vercel
- Language: TypeScript
- Homepage: https://tcgallery.vercel.app
- Size: 566 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# tcGallery - The Modern React Tutorial
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](https://x.com/theo). Check out [this link](https://www.youtube.com/watch?v=d5x0JCZbAJs) to watch the full video.
## About this Project
This project leverages the power of the [T3 Stack](https://create.t3.gg/) 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](https://nextjs.org), [Drizzle](https://orm.drizzle.team) and [Tailwind CSS](https://tailwindcss.com).
Tutorial Topics
- [x] Make it Deploy (to Vercel)
- [x] Scaffold Basic UI with Mock Data
- [x] Tidy Up Build Process
- [x] Set Up a Database (Vercel Postgres)
- [x] Attach Database to UI
- [x] Add Authentication (w/ clerk)
- [x] Add image upload (w/ UploadThing)
- [x] "taint" (server-only)
- [x] Use Next Image Component
- [x] Error Management (w/ Sentry)
- [x] Routing/ Image Page (parallel route)
- [x] Custom Upload Button (w/ UploadThing Input)
- [x] ChadUIify (specifically toasts)
- [x] Add Toast Message (w/ chadcn)
- [x] Delete Button (w/ Server Actions)
- [x] Analytics (w/ posthog)
- [x] Ratelimiting (w/ upstash)
### What's next?
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](https://t3.gg/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](https://create.t3.gg/), take a look at the following resources:
- [Documentation](https://create.t3.gg/)
- [Learn the T3 Stack](https://create.t3.gg/en/faq#what-learning-resources-are-currently-available) — Check out these awesome tutorials
You can check out the [create-t3-app GitHub repository](https://github.com/t3-oss/create-t3-app) — your feedback and contributions are welcome!