Complex projects idea for resume 2.0
Published: 2024-06-24 13:09:53

Sure! Here 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

1. **Create the `Quiz.js` component:**

```jsx
// 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;
```

2. **Use the component in your main page:**

Update `./pages/index.js` to include the `Quiz` component:

```jsx
// 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

1. **Create the `DrawingCanvas.js` component:**

```jsx
// 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;
```

2. **Use the component in your main page:**

Update `./pages/index.js` to include the `DrawingCanvas` component:

```jsx
// 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:

```bash
npm run dev
```

Open [http://localhost:3000](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.

Disclaimer: This Content is generated by AI.