https://github.com/kylemocode/next13-url-shortener
Fullstack URL shortener built with Next.js 13 ✂️
https://github.com/kylemocode/next13-url-shortener
Last synced: about 1 year ago
JSON representation
Fullstack URL shortener built with Next.js 13 ✂️
- Host: GitHub
- URL: https://github.com/kylemocode/next13-url-shortener
- Owner: kylemocode
- Created: 2023-02-10T15:20:26.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-02-14T04:59:04.000Z (over 3 years ago)
- Last Synced: 2025-02-05T19:33:51.668Z (over 1 year ago)
- Language: TypeScript
- Homepage: https://next13-url-shortener.vercel.app
- Size: 113 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Next13-URL-Shortener
[](https://sonarcloud.io/summary/new_code?id=kylemocode_next13-url-shortener)
A fullstack URL shortener app built with Next.js v13 server components (beta), Prisma, API Routes, and AWS RDS.
## Functionalities
- Verify if the URL user inputted is valid or not
- User can see the click count of the shorten URL
## Architecture
### Frontend
This application use some experimental features such as [App Directory](https://nextjs.org/blog/next-13#new-app-directory-beta) and [React Server Components](https://nextjs.org/blog/next-13#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.
#### Tech Stack
- `Next.js v13`
- `TypeScript`
- `TailwindCSS` (I used to use `styled-components` as CSS framework but I found that React Server Components doesn't support `CSS-in-JS` solutions now. Ref: https://beta.nextjs.org/docs/styling/css-in-js)
#### Lighthouse Score
This simple application get great Lighthouse scores in Performance and SEO.
### Backend
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](https://www.youtube.com/watch?v=quNLtK7hWYs), I found that [Prisma ORM](https://www.prisma.io/) 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.
#### Entity Schema
### CI/CD Pipeline
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.
### ID generator
use `nanoid` as ID generator, which may not occur collision easily (better than `uuid`)
But I may optimize this probrem in the future.
### Commit Message
All commit message is started with emoji from [gitmoji](https://gitmoji.dev/) so that we can easily identify the category of each task, and the message format also follow the Conventional Commits.
## TODO List & Roadmap
- [ ] 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