DEV Community

Nadim Chowdhury
Nadim Chowdhury

Posted on • Updated on

Complex projects idea for resume 3.0

Here are a couple of more advanced and interactive project ideas using Next.js and Tailwind CSS. We'll cover the setup for both:

  1. Quiz App with Real-Time Feedback
  2. 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

  1. Create a new Next.js project:
npx create-next-app@latest quiz-app
cd quiz-app
Enter fullscreen mode Exit fullscreen mode
  1. Install Tailwind CSS:
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
Enter fullscreen mode Exit fullscreen mode
  1. 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: [],
}
Enter fullscreen mode Exit fullscreen mode
  1. Add Tailwind CSS to your CSS file:

Update ./styles/globals.css with the following content:

@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

Step 2: Create the Quiz Component

  1. 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;
Enter fullscreen mode Exit fullscreen mode
  1. 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>
  )
}
Enter fullscreen mode Exit fullscreen mode
  1. Run Your Project:
npm run dev
Enter fullscreen mode Exit fullscreen mode

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

  1. Install Socket.io:
npm install socket.io socket.io-client
Enter fullscreen mode Exit fullscreen mode
  1. 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();
}
Enter fullscreen mode Exit fullscreen mode
  1. 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;
Enter fullscreen mode Exit fullscreen mode
  1. 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>
  )
}
Enter fullscreen mode Exit fullscreen mode
  1. Run Your Project:
npm run dev
Enter fullscreen mode Exit fullscreen mode

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)