A fullstack URL shortener app built with Next.js v13 server components (beta), Prisma, API Routes, and AWS RDS.
- Verify if the URL user inputted is valid or not
- User can see the click count of the shorten URL
This application use some experimental features such as App Directory and React Server Components in Next.js v13, which might be changed in the future stable version, but I think it is a great opportunity to try these new things.
Next.js v13TypeScriptTailwindCSS(I used to usestyled-componentsas CSS framework but I found that React Server Components doesn't supportCSS-in-JSsolutions now. Ref: https://beta.nextjs.org/docs/styling/css-in-js)
This simple application get great Lighthouse scores in Performance and SEO.
Because this is a simple application, I think serverless solution like Next.js's build in API routes is a good choice to build API endpoints.
As for database, I choose to use a hosted MySQL database instance from AWS RDS, which will not cost and money in this simple application, and we can scaling it easily in the future if necessary.
Inspired by this talk session, I found that Prisma ORM fits with Next.js very well. It not only support query builder but also support database migration and TypeScript type definition based on our schema.
For our use case, we have to update many entities simultaneously in specific API endpoint, and transaction provided by Prisma come in handy.
I use Github Actions to build the CI pipeline, which run build and lint for now in order to make this application more stable. I also enable the cache mechanism of actions so that it doesn't need to install yarn & dependencies every time, improving the pipeline performance.
I also integrated SonarCloud to scan the code quality of the repo. It will trigger scan automatically when new code merge in master branch, and the Quality Gate Status badge will update based on the scan result.
As for CD, the application will deploy to vercel platform when the new code merged into master branch.
use nanoid as ID generator, which may not occur collision easily (better than uuid)
But I may optimize this probrem in the future.
All commit message is started with emoji from gitmoji so that we can easily identify the category of each task, and the message format also follow the Conventional Commits.
- Redis Cache to cache DB data (because we have to record analytic click count, we may need to add message queue to process analytic relative DB query asynchronously even when cache hit)
- More smooth user experience
- User login system
- User can create, update and delete multiple short URL
- Integrate testing in CI Pipeline
- Integrate SonarCloud in GitHub Status check