Here are a couple of more advanced and interactive project ideas using Next.js and Tailwind CSS. We'll cover the setup for both:
- Quiz App with Real-Time Feedback
- Chat Application
1. Quiz App with Real-Time Feedback
This project will create a quiz app where users can answer questions and receive real-time feedback.
Step 1: Set Up the Project
- Create a new Next.js project:
npx create-next-app@latest quiz-app
cd quiz-app
- Install Tailwind CSS:
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
- Configure Tailwind CSS:
Update the tailwind.config.js
file to include the ./pages
and ./components
directories:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./pages/**/*.{js,ts,jsx,tsx}',
'./components/**/*.{js,ts,jsx,tsx}',
],
theme: {
extend: {},
},
plugins: [],
}
- Add Tailwind CSS to your CSS file:
Update ./styles/globals.css
with the following content:
@tailwind base;
@tailwind components;
@tailwind utilities;
Step 2: Create the Quiz Component
- Create a new component:
Create a new file ./components/Quiz.js
with the following content:
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", "Saturn"],
answer: "Mars",
},
// Add more questions as needed
];
const Quiz = () => {
const [currentQuestion, setCurrentQuestion] = useState(0);
const [score, setScore] = useState(0);
const [showScore, setShowScore] = useState(false);
const [selectedOption, setSelectedOption] = useState(null);
const handleAnswerOptionClick = (option) => {
setSelectedOption(option);
if (option === questions[currentQuestion].answer) {
setScore(score + 1);
}
};
const handleNextQuestion = () => {
const nextQuestion = currentQuestion + 1;
if (nextQuestion < questions.length) {
setCurrentQuestion(nextQuestion);
setSelectedOption(null);
} else {
setShowScore(true);
}
};
return (
<div className="flex flex-col items-center justify-center h-screen">
{showScore ? (
<div className="text-xl font-bold">
You scored {score} out of {questions.length}
</div>
) : (
<>
<div className="mb-4 text-xl">
{questions[currentQuestion].question}
</div>
<div className="flex flex-col mb-4">
{questions[currentQuestion].options.map((option) => (
<button
key={option}
onClick={() => handleAnswerOptionClick(option)}
className={`px-4 py-2 mb-2 border rounded ${selectedOption === option ? 'bg-blue-500 text-white' : 'bg-white text-black'}`}
>
{option}
</button>
))}
</div>
<button
onClick={handleNextQuestion}
className="px-4 py-2 font-bold text-white bg-blue-500 rounded hover:bg-blue-700"
>
Next Question
</button>
</>
)}
</div>
);
};
export default Quiz;
- Use the component in your main page:
Update ./pages/index.js
to include the Quiz
component:
import Head from 'next/head'
import Quiz from '../components/Quiz'
export default function Home() {
return (
<div className="container mx-auto">
<Head>
<title>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 Quiz App!
</h1>
<Quiz />
</main>
</div>
)
}
- Run Your Project:
npm run dev
Open http://localhost:3000 with your browser to see your quiz app in action.
2. Chat Application
This project will create a simple chat application where users can send and receive messages.
Step 1: Set Up the Project
Follow the same steps as the Quiz App for setting up the project and installing Tailwind CSS.
Step 2: Create the Chat Component
- Install Socket.io:
npm install socket.io socket.io-client
- Set Up Socket.io:
Create a new file ./pages/api/socket.js
with the following content to set up a basic Socket.io server:
import { Server } from "socket.io";
export default function handler(req, res) {
if (!res.socket.server.io) {
const io = new Server(res.socket.server);
res.socket.server.io = io;
io.on("connection", (socket) => {
socket.on("message", (msg) => {
io.emit("message", msg);
});
});
}
res.end();
}
- Create the Chat Component:
Create a new file ./components/Chat.js
with the following content:
import { useState, useEffect } from 'react';
import io from 'socket.io-client';
let socket;
const Chat = () => {
const [message, setMessage] = useState('');
const [messages, setMessages] = useState([]);
useEffect(() => {
fetch('/api/socket');
socket = io();
socket.on('message', (msg) => {
setMessages((prevMessages) => [...prevMessages, msg]);
});
return () => {
socket.off('message');
};
}, []);
const sendMessage = (e) => {
e.preventDefault();
if (message.trim()) {
socket.emit('message', message);
setMessage('');
}
};
return (
<div className="flex flex-col items-center justify-center h-screen">
<div className="w-full max-w-md p-4 border rounded">
<div className="mb-4 text-xl font-bold">Chat Room</div>
<div className="h-64 mb-4 overflow-y-auto border rounded">
{messages.map((msg, index) => (
<div key={index} className="p-2">{msg}</div>
))}
</div>
<form onSubmit={sendMessage} className="flex">
<input
type="text"
value={message}
onChange={(e) => setMessage(e.target.value)}
className="flex-1 p-2 border rounded"
/>
<button type="submit" className="p-2 ml-2 font-bold text-white bg-blue-500 rounded hover:bg-blue-700">
Send
</button>
</form>
</div>
</div>
);
};
export default Chat;
- Use the component in your main page:
Update ./pages/index.js
to include the Chat
component:
import Head from 'next/head'
import Chat from '../components/Chat'
export default function Home() {
return (
<div className="container mx-auto">
<Head>
<title>Chat 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 Chat App!
</h1>
<Chat />
</main>
</div>
)
}
- Run Your Project:
npm run dev
Open http://localhost:3000 with your browser to see your chat app in action.
Customization and Further Development
These examples provide a starting point for more advanced projects. You can extend these projects by adding more features, such as user authentication, more complex state management, or integrating external APIs. Experiment with different components and libraries to create even more interactive and engaging applications.
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)