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:

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.