Complex projects idea for resume 2.0

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.