Introduction
In this post, we will look at how to create a character selection screen with Next.js, a popular React-based framework for creating server-side rendered apps. We'll quickly review the fundamentals of Next.js and then walk through the process of creating a character select screen with interactive features utilising Tailwind CSS and JavaScript.
For this project, we'll also look at the benefits of using Livecycle, a review and collaboration tool that dramatically simplifies the pull request (PR) review process for everyone involved. We'll see how to set it up for a Next.js project and we'll point out how Livecycle increases the efficiency and quality of code reviews.
Ultimately, this post gives a detailed method on creating a character choice screen with Next.js and leveraging Livecycle for PR reviews in order to improve the development process and user experience.
Building a character select screen with Next.js
The importance of building a character select screen
The creation of a character select screen is essential in applications that need user involvement. This is most common in games or simulations. The choose character screen is the user's initial point of interaction with the programme, giving a visual and interactive interface for the user to select and customise their character.
Having a well-designed and functional character select screen can enhance the user experience, as it allows the user to personalise their experience and feel more invested in the application. A good character select screen can also make the application more accessible, as it provides clear instructions and options for the user.
A character select screen that is well-designed and effective may improve the user experience by allowing the user to personalise their experience and feel more involved in the programme. A decent choose character screen may also make the programme more accessible to a wider audience by providing users with clear instructions and alternatives.
Since the character select screen is essential for producing a user-friendly and engaging application, it's a good context for our project to try and gain insights for the application development process in general.
From a programming standpoint we'll utilise Tailwind CSS to construct our beautiful UX. This will also allow us to learn about state and how to pass an object of data around in order to display the character's profile and other associated information.
The benefits of Next.js - a quick refresher
Next.js is an open-source React-based framework that provides several advantages to developers. It supports server-side rendering for quicker loading times and better SEO. It simplifies routing, supports automated code splitting, has built-in CSS and Sass support, provides API routes, and allows static site development.
These characteristics simplify the creation and management of complicated applications, enhance application speed, and lessen the requirement for server-side rendering, making it a popular option among React developers.
It is also the number one React build tool so its perfect for creating React applications.
With our introductions out of the way, let's jump into our project.
Setting up the character select screen project in Next.js
Creating the project
Navigate to a directory on your computer like the desktop and then run the commands below to scaffold a Next.js project. Go through and select the options you prefer (I just left everything as default in this example). We will also install uuid for generating random ids. This will become useful later on when we start to work with our data.
npx create-next-app@latest character-select-screen
cd character-select-screen
npm i uuid
Installing Tailwind CSS
Now you'll need to install tailwindcss and its peer dependencies via npm, and then run the init command to generate a tailwind.config.js and postcss.config.js file. Run the commands below in your terminal.
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
Next, open the project in your code editor. We need to update some files to complete the setup for Tailwind CSS. Open the tailwind.config.js file and replace all of the code with this one.
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./app/**/*.{js,ts,jsx,tsx}',
'./pages/**/*.{js,ts,jsx,tsx}',
'./components/**/*.{js,ts,jsx,tsx}',
// Or if using `src` directory:
'./src/**/*.{js,ts,jsx,tsx}',
],
theme: {
extend: {},
},
plugins: [],
};
Lastly, replace all of the code inside of the globals.css file with this code which has a CSS reset and the Tailwind directives for the CSS.
@tailwind base;
@tailwind components;
@tailwind utilities;
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--main-font-size: 16px;
}
html {
font-size: var(--main-font-size);
}
Finally, run your build process with npm run dev and your Next.js project should be fully working with Tailwind CSS.
With the basic setup complete we can now move onto the design phase.
Creating a character select screen
You're now ready to design the UI with CSS, create the components for the screen and add interactivity with JavaScript. All you have to do is copy and paste the code into the correct files.
Update the globals.css file with this CSS here.
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@400;700&family=Roboto&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--main-font-size: 16px;
}
html {
font-size: var(--main-font-size);
}
body {
font-family: 'Kanit', sans-serif;
background-color: rgb(30 41 59);
}
.header {
background-color: white;
padding: 2rem;
}
.header p {
font-size: 1.5rem;
}
h1 {
font-size: 2rem;
}
h2 {
font-size: 2.5rem;
}
.character-profile:hover {
border: 0.2rem solid rgb(252 211 77);
cursor: pointer;
}
And lastly replace all of the code in the index.js file with all of the logic here and this will complete the design.
import { useState, useEffect } from 'react';
import { v4 as uuidv4 } from 'uuid';
export default function Home() {
useEffect(() => {
console.log(data);
}, []);
const [data, setData] = useState([
{
id: uuidv4(),
name: 'Xandorath',
img: 'https://res.cloudinary.com/d74fh3kw/image/upload/v1677434472/game-character-assault-01_yzbzk1.jpg',
type: 'Assault',
ability: 'Offensive combatant',
bio: 'Assault class combat abilities are unmatched on the battlefield. They have a keen eye for spotting enemy positions and are skilled in using a variety of weapons, including rifles, shotguns, and pistols. Their favourite weapon is a fully automatic assault rifle that they can use to suppress enemy fire and gain an advantage in a firefight. They are also adept at using grenades and other explosive devices to clear out enemy positions.',
},
{
id: uuidv4(),
name: 'Valtorien',
img: 'https://res.cloudinary.com/d74fh3kw/image/upload/v1677434473/game-character-assault-02_ynlshz.jpg',
type: 'Assault',
ability: 'Destructive challenger',
bio: 'Assault class combat abilities are unmatched on the battlefield. They have a keen eye for spotting enemy positions and are skilled in using a variety of weapons, including rifles, shotguns, and pistols. Their favourite weapon is a fully automatic assault rifle that they can use to suppress enemy fire and gain an advantage in a firefight. They are also adept at using grenades and other explosive devices to clear out enemy positions.',
},
{
id: uuidv4(),
name: 'Zephyrion',
img: 'https://res.cloudinary.com/d74fh3kw/image/upload/v1677434472/game-character-medic-01_rlv9hz.jpg',
type: 'Medic',
ability: 'Support powerhouse',
bio: 'Medics skills and abilities make them an invaluable asset to any team. They are an expert in first aid and can quickly assess and stabilise wounded soldiers on the battlefield. They are also skilled in using medical equipment, including defibrillators, IVs, and other life-saving devices. Their quick thinking and calm demeanour under pressure have saved countless lives on the battlefield.',
},
{
id: uuidv4(),
name: 'Eryndor',
img: 'https://res.cloudinary.com/d74fh3kw/image/upload/v1677434473/game-character-medic-02_l8t2ar.jpg',
type: 'Medic',
ability: 'Rapid healer',
bio: 'Medics skills and abilities make them an invaluable asset to any team. They are an expert in first aid and can quickly assess and stabilise wounded soldiers on the battlefield. They are also skilled in using medical equipment, including defibrillators, IVs, and other life-saving devices. Their quick thinking and calm demeanour under pressure have saved countless lives on the battlefield.',
},
{
id: uuidv4(),
name: 'Lythirius',
img: 'https://res.cloudinary.com/d74fh3kw/image/upload/v1677434473/game-character-scout-01_faaogs.jpg',
type: 'Scout',
ability: 'Frontline spy',
bio: 'Scouts skills and abilities make them a valuable asset on the battlefield. They are an expert in reconnaissance and can quickly assess enemy positions and movements. They are also skilled in using a variety of weapons, including long-range rifles and pistols, to eliminate enemy targets from a distance.',
},
{
id: uuidv4(),
name: 'Aerineth',
img: 'https://res.cloudinary.com/d74fh3kw/image/upload/v1677434474/game-character-scout-02_o6pvwt.jpg',
type: 'Scout',
ability: 'Recon agent',
bio: 'Scouts skills and abilities make them a valuable asset on the battlefield. They are an expert in reconnaissance and can quickly assess enemy positions and movements. They are also skilled in using a variety of weapons, including long-range rifles and pistols, to eliminate enemy targets from a distance.',
},
{
id: uuidv4(),
name: 'Kaeloria',
img: 'https://res.cloudinary.com/d74fh3kw/image/upload/v1677434473/game-character-tech-01_idvkjv.jpg',
type: 'Tech',
ability: 'Strategic intellect',
bio: 'Tech skills and abilities make them an important part of any team. They are an expert in the use of technology and can quickly assess a situation and come up with a plan to deploy the right devices to gain an advantage. They are skilled in using a variety of gadgets, including drones, hacking tools, and remote-controlled vehicles, to gather intelligence, disrupt enemy communications, and take out enemy targets.',
},
{
id: uuidv4(),
name: 'Dravenath',
img: 'https://res.cloudinary.com/d74fh3kw/image/upload/v1677434474/game-character-tech-02_qidcju.jpg',
type: 'Tech',
ability: 'Skilled Hacker',
bio: 'Tech skills and abilities make them an important part of any team. They are an expert in the use of technology and can quickly assess a situation and come up with a plan to deploy the right devices to gain an advantage. They are skilled in using a variety of gadgets, including drones, hacking tools, and remote-controlled vehicles, to gather intelligence, disrupt enemy communications, and take out enemy targets.',
},
{
id: uuidv4(),
name: 'Sylphiria',
img: 'https://res.cloudinary.com/d74fh3kw/image/upload/v1677434473/game-character-magic-01_pq2dav.jpg',
type: 'Magic',
ability: 'Cardinal hero',
bio: 'The Magic class has skills and abilities which make them an invaluable asset on the battlefield. They are skilled in a variety of magic types, including elemental magic, divination, and enchantment. They can use their magic to manipulate the environment, summon magical creatures, and even read the thoughts of their enemies.',
},
{
id: uuidv4(),
name: 'Torvaxus',
img: 'https://res.cloudinary.com/d74fh3kw/image/upload/v1677434473/game-character-magic-02_sfcq3e.jpg',
type: 'Magic',
ability: 'Dynamic Conjurer',
bio: 'The Magic class has skills and abilities which make them an invaluable asset on the battlefield. They are skilled in a variety of magic types, including elemental magic, divination, and enchantment. They can use their magic to manipulate the environment, summon magical creatures, and even read the thoughts of their enemies.',
},
]);
const [selectedCharacter, setSelectedCharacter] = useState(data[0]);
const getCharacter = (character) => {
console.log('Character Data', character);
setSelectedCharacter(character);
};
const calcCharTypeColor = (type) => {
if (type === 'Assault') {
return 'bg-rose-500';
} else if (type === 'Medic') {
return 'bg-cyan-500';
} else if (type === 'Scout') {
return 'bg-lime-500';
} else if (type === 'Tech') {
return 'bg-indigo-500';
} else if (type === 'Magic') {
return 'bg-fuchsia-500';
}
};
return (
<>
<div className="container mx-auto">
<div className="header">
<div>
{(selectedCharacter === data.length) === 0 ? (
<div>
<p>Loading...</p>
</div>
) : (
<div key={selectedCharacter.id}>
<h1>{selectedCharacter.name}</h1>
<h2>{selectedCharacter.ability}</h2>
<p>{selectedCharacter.type}</p>
<p>{selectedCharacter.bio}</p>
</div>
)}
</div>
</div>
<main>
<section className="grid grid-cols-6">
{data.map((character) => (
<div
key={character.id}
className="character-profile border-solid border-2 border-black"
onClick={() => getCharacter(character)}
>
<img src={character.img} />
<div className={calcCharTypeColor(character.type)}>
<p className="text-white text-center font-bold uppercase">
{character.type}
</p>
</div>
</div>
))}
</section>
</main>
</div>
</>
);
}
And there you have it! Your beautiful charachter select screen is ready to show off to friends and potential users.
Because of how prominent and important this screen is to the success of your application, you'll almost certainly want to get feedback from testers and beta users before you go live. And Livecycle is a great tool for doing so.
Using Livecycle for PR reviews
Getting feedback on code changes and new features has always been a problem for developers. Code reviews from other developers are important but also insufficient. they take time and they often doesn't account for UI-level issues that might be manifest themselved in the latest commits. Getting feedback from other people is also challenging because there simply is no easy way to show off your work and collect feedback in a coherent, organized way. So how can you get the critical feedback you need in a clear, efficient way, before pushing changes or new features to production?
This is the challenge that Livecycle solves for developers everywhere.
Put simply, Livecycle is the best way to review product changes and get feedback from other people.
Livecycle builds dev-like preview environments for every branch (or, if you prefer, you can bring your own environments hosted on another platform). Each preview environment "playground" get a unique, shareable link for every branch, which automatically updates for every commit pushed to that branch.
The "secret sauce" on each Livecycle playground is the built-in commenting and collaboration tools. So anyone who opens the link can leave clear feedback for you on top of the product UI.
By allowing people to see instant live previews of the latest code changes and enabling them to leave comments in context, Livecycle saves developers time and effort, and ensures that the highest-quality code gets pushed to production.
In my experience using the product (from the perspective of a FE developer), Livecycle does the heavy lifting during the review process so I can concentrate on other activities.
A collaborative, customer-facing screen such as our charachter select screen is a natural place to use Livecycle to facilitate outside reviews before trhe product goes live to the general public.
Setting up Livecycle for a Next.js project
In order to install Livecycle, your project needs to be hosted on an SCM platform like GitHub or GitLab (this is a standard expectation that most of you will be doing on your own, anyway).
To get started with the installation, go to Livecycle and create an account.
Now you're ready to connect your GitHub repo.
The last two steps are where you'll set up a preview environment (this is the path I chose for this example. If you have a preview environment from another provider, you can use that too and simply install the Livecycle SDK to it).
You can choose from the list of project templates provided, depending on the build tool you used. In our case that is going to be Next.js SSG because ours is a static website.
This is the setting up environment screen
This is the choosing a template screen
Once the setup is complete, you can create your first playground environment. The playgrounds are all accessible from the Liveycycle dashboard where you can invite other people to review the playground and see status.
A quick Livecycle demo
Livecycle brings value to different team members in various use cases. For example, copywriters can use it for submitting text changes, designers can use it for showing developers a design element that should be changed, testers can use it for reporting issues, and developers are able to review feedback and report status. These are just a few relevant use cases.
Copywriter collaboration example
Let's take the example of a copywriter who is reviewing the site and wants to make an edit to the application.
Without Livecycle, this process would be cumbersome at best. The reviewer would need to take a screenshot, or copy the text in question, then write the new text, and use another platform (like email or a shared document) to report everything to the developer. From there, the feedback loop usually gets longer and longer to resolve this issue - the developer might need some clarifications as to where to make the change, or the new text might need to be shortened. This turns into a lot of time and effort spent by everyone to resolve a simple issue.
But using Livecycle, this communication happens instantly. The reviewer can use the internal tools to take a screenshot or video capture to show clear context. Or, they can even use the HTML editing tool to make the change to the copy, see how it looks, and submit it to the developer as a requested change that appears as a comment in GitHub.
In this example, our copywriter edited the HTML and changed the copy in the playground. You can see what that looks like in the pictures here.
This is just one small example of the many ways that Livecycle can help front end teams communciate better, get clearer feedback, and move faster.
Check out their website or watch this quick overview video
So... where do I go from here and how can I learn more?
By using these resources below, you can enhance your knowledge and skills in building applications with Next.js and using Livecycle for PR reviews.
- Next.js Documentation - The official Next.js documentation offers a thorough how-to for developing apps using the framework. Everything is covered, from using the framework for the first time to more complicated subjects like data fetching and server-side rendering.
- Livecycle Documentation - Use of the tool for code reviews is covered in great length in the official Livecycle documentation. From creating a project to approving and integrating pull requests, it covers it all.
- React Documentation - Building apps using Next.js requires a solid grasp of React because it is built on top of that framework. The React library is fully described in the official React documentation.
- Next.js Examples - On their website, Next.js offers a number of examples, one of which is a character choice screen. Building your own Next.js apps might be inspired and aided by these examples.
- Livecycle Integrations - Livecycle has integrations with several other applications, such as GitHub, Bitbucket, and Slack. You may further streamline your development process by investigating these integrations.
Conclusion
To recap, this article provided a detailed guide on how to build a character select screen using Next.js and how to use Livecycle for PR reviews. We explained the benefits of using Next.js for server-side rendered applications and walked through the steps to create a character select screen with interactive elements.
Additionally, we explored how Livecycle can automate and streamline the code review process for a Next.js project. We discussed the benefits of using Livecycle and demonstrated how to create, request reviews, approve, and merge a pull request using this tool.
By following the steps outlined in this article, developers can improve the development process and ensure high-quality code for their Next.js projects. Building a user-friendly character select screen and automating the code review process can lead to a better overall developer experience AND user experience, ultimately resulting in a more successful project.
Thanks for reading!
Top comments (3)
Great write-up @andrewbaisden !
Thanks!
I found this post really engaging! Your writing style is both informative and enjoyable. And it really help me at Chick Fil A Menu With Prices