There are two more advanced interactive frontend projects using Next.js and Tailwind CSS. The first project will be an interactive quiz app, and the second will be a simple drawing app.
Project 1: Interactive Quiz App
This project will create an interactive quiz application where users can answer questions and get immediate feedback.
Step 1: Set Up Next.js with Tailwind CSS
Follow the same steps as before to set up a new Next.js project with Tailwind CSS.
Step 2: Create the Quiz Component
-
Create the
Quiz.js
component:
// components/Quiz.js
import { useState } from 'react';
const questions = [
{
question: 'What is the capital of France?',
options: ['Paris', 'London', 'Berlin', 'Madrid'],
answer: 'Paris',
},
{
question: 'Which planet is known as the Red Planet?',
options: ['Earth', 'Mars', 'Jupiter', 'Venus'],
answer: 'Mars',
},
{
question: 'What is the largest ocean on Earth?',
options: ['Atlantic Ocean', 'Indian Ocean', 'Arctic Ocean', 'Pacific Ocean'],
answer: 'Pacific Ocean',
},
];
const Quiz = () => {
const [currentQuestion, setCurrentQuestion] = useState(0);
const [score, setScore] = useState(0);
const [showScore, setShowScore] = useState(false);
const handleAnswerOptionClick = (option) => {
if (option === questions[currentQuestion].answer) {
setScore(score + 1);
}
const nextQuestion = currentQuestion + 1;
if (nextQuestion < questions.length) {
setCurrentQuestion(nextQuestion);
} else {
setShowScore(true);
}
};
return (
<div className="flex flex-col items-center justify-center h-screen">
{showScore ? (
<div className="text-2xl">
You scored {score} out of {questions.length}
</div>
) : (
<>
<div className="text-xl mb-4">
{questions[currentQuestion].question}
</div>
<div className="grid grid-cols-2 gap-4">
{questions[currentQuestion].options.map((option) => (
<button
key={option}
className="px-4 py-2 font-bold text-white bg-blue-500 rounded hover:bg-blue-700"
onClick={() => handleAnswerOptionClick(option)}
>
{option}
</button>
))}
</div>
</>
)}
</div>
);
};
export default Quiz;
- Use the component in your main page:
Update ./pages/index.js
to include the Quiz
component:
// pages/index.js
import Head from 'next/head'
import Quiz from '../components/Quiz'
export default function Home() {
return (
<div className="container mx-auto">
<Head>
<title>Interactive Quiz App</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
<main className="flex flex-col items-center justify-center min-h-screen">
<h1 className="text-4xl font-bold mb-8">
Welcome to the Interactive Quiz App!
</h1>
<Quiz />
</main>
</div>
)
}
Project 2: Drawing App
This project will create a simple drawing application where users can draw on a canvas.
Step 1: Set Up Next.js with Tailwind CSS
Follow the same steps as before to set up a new Next.js project with Tailwind CSS.
Step 2: Create the Drawing Component
-
Create the
DrawingCanvas.js
component:
// components/DrawingCanvas.js
import { useRef, useState, useEffect } from 'react';
const DrawingCanvas = () => {
const canvasRef = useRef(null);
const [isDrawing, setIsDrawing] = useState(false);
const startDrawing = (event) => {
const { offsetX, offsetY } = event.nativeEvent;
const context = canvasRef.current.getContext('2d');
context.beginPath();
context.moveTo(offsetX, offsetY);
setIsDrawing(true);
};
const draw = (event) => {
if (!isDrawing) return;
const { offsetX, offsetY } = event.nativeEvent;
const context = canvasRef.current.getContext('2d');
context.lineTo(offsetX, offsetY);
context.stroke();
};
const stopDrawing = () => {
setIsDrawing(false);
};
return (
<div className="flex flex-col items-center justify-center h-screen">
<canvas
ref={canvasRef}
width={600}
height={400}
className="border"
onMouseDown={startDrawing}
onMouseMove={draw}
onMouseUp={stopDrawing}
onMouseLeave={stopDrawing}
/>
</div>
);
};
export default DrawingCanvas;
- Use the component in your main page:
Update ./pages/index.js
to include the DrawingCanvas
component:
// pages/index.js
import Head from 'next/head'
import DrawingCanvas from '../components/DrawingCanvas'
export default function Home() {
return (
<div className="container mx-auto">
<Head>
<title>Drawing App</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
<main className="flex flex-col items-center justify-center min-h-screen">
<h1 className="text-4xl font-bold mb-8">
Welcome to the Drawing App!
</h1>
<DrawingCanvas />
</main>
</div>
)
}
Running the Projects
For both projects, run your development server with:
npm run dev
Open http://localhost:3000 with your browser to see your interactive quiz app or drawing app in action.
These projects provide a starting point for building more complex interactive applications using Next.js and Tailwind CSS. You can expand on these ideas by adding more features, integrating external APIs, or enhancing the user interface and experience.
If you enjoy my content and would like to support my work, you can buy me a coffee. Your support is greatly appreciated!
Disclaimer: This Content is generated by AI.
Top comments (0)