Marvel's Characters

This is a Next.js project bootstrapped with create-next-app. Live demo: https://nextjs-marvel-gamma.vercel.app/

Spent time: ~ 2 days
TODO: add tests, storybook stories and update backend.

Objective

This web application displays Marvel’s characters in the format of a college yearbook, using Marvel public API. Each card displayed shows a character’s picture and a pre-selected feature below the picture (name, stories list, comic list, series list). The user can only select ONE of the different features to display. The list of characters may be big, some pagination is also implemented.

Features

⚡ Next.js for Static Site Generator
🔥 Type checking TypeScript
💎 Integrate with Tailwind CSS
📏 Linter with ESLint (default NextJS, NextJS Core Web Vitals, and Tailwind CSS configuration)
💖 Code Formatter with Prettier
🦊 Husky for Git Hooks
📓 Write standard compliant commit messages with Commitlint
🦺 Unit Testing with Vitest
🧪 E2E Testing with Cypress
🎉 Storybook for UI development
💡 Absolute Imports using @/ prefix
🖱️ Docker deployment (or PaaS deployment to any hosting services like Vercel or Netlify)
🌈 Minimalist theme & accessible components from shadcn
🌐 Caching and prefetching with React-Query

Built-in feature from Next.js:

☕ Minify HTML & CSS
💨 Live reload
✅ Cache busting

Requirements

Node.js 16+ and yarn

Getting started

In the project directory, run the following command on your local environment to install all dependencies:

yarn

Copy .env.example to .env.local and update the variables.

cp .env.example .env.local

Then, you can run locally in development mode with live reload:

yarn dev

Open http://localhost:3000 with your favorite browser to see your project. You have access to the whole code source if you need further customization. The provided code is only example for you to start your project. The sky is the limit 🚀.

Commits convention

The project enforces Conventional Commits specification. This means that all commit messages are formatted according to the specification. One of the benefits of using Conventional Commits is that it allows to automatically generate a CHANGELOG file. It also allows us to automatically determine the next version number based on the types of commits that are included in a release.

The pattern mostly looks like this:

type(scope?): subject  #scope is optional; multiple scopes are supported (current delimiter options: "/", "\" and ",")

Real world examples can look like this:

chore: update Prisma dependencies

fix(server): send cors headers

feat(blog): add comment section

Common types according to commitlint-config-conventional (based on the Angular convention) can be:

build: Changes that affect the build system or external dependencies
chore: Changes to the build process or auxiliary tools and libraries
ci: Changes to our CI configuration files and scripts
docs: Documentation only changes
feat: A new feature
fix: A bug fix
perf: A code change that improves performance
refactor: A code change that neither fixes a bug nor adds a feature
revert: If the commit reverts a previous commit, it should begin with revert:, followed by the header of the reverted commit. In the body it should say: This reverts commit ., where the hash is the SHA of the commit being reverted.
style: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
test: Adding missing tests

Deploy to production

You can see the results locally in production mode with:

$ yarn build
$ yarn start

The generated HTML and CSS files are minified (built-in feature from Next js). It will also remove unused CSS from Tailwind CSS.

You can create an optimized production build with:

yarn build-prod

Now, your app is ready to be deployed. All generated files are located at out folder, which you can deploy with any hosting service.

Docker Image

Next.js can be deployed to any hosting provider that supports Docker containers. You can use this approach when deploying to container orchestrators such as Kubernetes or HashiCorp Nomad, or when running inside a single node in any cloud provider.

Install Docker on your machine
Clone this repository
Update next.config.js: output: "standalone"
Build your container: docker build -t nextjs-marvel .
Run your container: docker run -p 3000:3000 nextjs-marvel

Learn More

To learn more about Next.js, take a look at the following resources:

Next.js Documentation - learn about Next.js features and API.
Deploying - learn about Next.js self-hosting and deployment.

Ngopimas / nextjs-marvel