A simple full-stack movie list application which built with NextJS v13 & Prisma ORM (PostgresSQL) 🤖
use docker image uploaded to Docker Hub
make sure you have docker installed locally
$ docker run -p 3000:3000 --name movier oldmo860617/movier-finalthen go to http://localhost:3000 in your browser, you will see the application interface (feel free to change the exposed port while running docker run command)
This application use some experimental features such as app directory and React Server Component in NextJS v13, which might be changed in the future stable version, but I think it is a great opportunity to try these new things.
(I also try many new features in Next13 in this project, like build-in layout, head, loading...etc)
NextJS v13TypeScriptTailwindCSS(I triedstyled-componentsfirst but found that React Server Component doesn't supportCSS-in-JSsolutions now. And this is also my first time to useTailwind)
The components architecture of this application is like the image below:
In conclusion, the application fetch data from API endpoints in server components and then pass data to client components that need state to handle interaction.
In MoviesList client component, I think the data set is not too big, so I choose to filter in client side when search by keyword (only fetch one time in server component).
In CommentsList client component, I found that we lack a mechanism to make parent server component re-render to get new data when we add a new comment, so I choose to copy the comments list passed down from parent using React state.
This simple application get wonderful Lighthouse scores in Performance and SEO.
Because this is a simple application, I think serverless solution like NextJS's build in API routes is a good choice to build API endpoints.
As for database, I choose to use a hosted PostgreSQL database instance from supabase, which will not cost and money in this simple application.
Inspired by this talk session, I found that Prisma ORM fits with NextJS very well. It not only support query builder but also support databse migration and TypeScript type definition based on our schema.
We have only two entity - Movie and Comment, and their relation is 1:n, one movie can have multiple comments.
Prisma will help us to tramsform prisma schema to DB table schema.
PostgreSQL automatically creates indexes on primary keys and unique constraints, but not on the referencing side of foreign key relationships. Because the comments will frequently get CREATE and maybe DELETE and UPDATE in the future, we may pay a performance cost for changes of comments in order to update index. Therefore, I decide to not add additional index by myself.
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.
All commit message is started with emoji from gitmoji so that we can easily identify the category of each task.
- Responsive Design
- Redis Cache to cache DB data if necessary
- Optimistic Updates using some Stale-While-Revalidate fetching libary and cooperate with in memory cache mechanism
- DELETE & UPDATE comments functionalities