Complex projects idea for resume

There are three advanced project ideas using Next.js and Tailwind CSS, along with some code snippets to get you started:

Interactive Quiz App
Real-time Chat Application
Recipe Finder with API Integration

1. Interactive Quiz App

An interactive quiz app that allows users to answer questions and get feedback on their answers.

Setup:

Set up a new Next.js project and install Tailwind CSS as described in the previous section.

Create a Quiz Component:

Create a new file ./components/Quiz.js with the following content:

import { useState } from 'react';

const Quiz = () => {
  const questions = [
    {
      question: 'What is the capital of France?',
      options: ['Paris', 'Berlin', 'Madrid', 'Rome'],
      answer: 'Paris',
    },
    {
      question: 'Who wrote "To Kill a Mockingbird"?',
      options: ['Harper Lee', 'J.K. Rowling', 'Ernest Hemingway', 'Mark Twain'],
      answer: 'Harper Lee',
    },
    // Add more questions here
  ];

  const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
  const [selectedOption, setSelectedOption] = useState(null);
  const [score, setScore] = useState(0);
  const [showScore, setShowScore] = useState(false);

  const handleOptionClick = (option) => {
    setSelectedOption(option);
    if (option === questions[currentQuestionIndex].answer) {
      setScore(score + 1);
    }
  };

  const handleNextQuestion = () => {
    setSelectedOption(null);
    if (currentQuestionIndex < questions.length - 1) {
      setCurrentQuestionIndex(currentQuestionIndex + 1);
    } else {
      setShowScore(true);
    }
  };

  return (
    <div className="flex flex-col items-center justify-center h-screen">
      {showScore ? (
        <div>
          <h2 className="text-2xl font-bold">Your Score: {score}</h2>
        </div>
      ) : (
        <div>
          <h2 className="text-2xl font-bold mb-4">{questions[currentQuestionIndex].question}</h2>
          <div className="flex flex-col">
            {questions[currentQuestionIndex].options.map((option, index) => (
              <button
                key={index}
                onClick={() => handleOptionClick(option)}
                className={`px-4 py-2 m-2 border rounded ${
                  selectedOption === option
                    ? option === questions[currentQuestionIndex].answer
                      ? 'bg-green-500'
                      : 'bg-red-500'
                    : 'bg-gray-200'
                }`}
              >
                {option}
              </button>
            ))}
          </div>
          <button
            onClick={handleNextQuestion}
            className="mt-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-700"
          >
            Next Question
          </button>
        </div>
      )}
    </div>
  );
};

export default Quiz;

Use the Quiz 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>Interactive Quiz App</title>
        <meta name="description" content="Interactive Quiz Application" />
        <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>
  );
}

2. Real-time Chat Application

A real-time chat application using Next.js, Tailwind CSS, and WebSockets.

Setup:

Set up a new Next.js project and install Tailwind CSS as described in the previous section.
Install socket.io and socket.io-client for WebSocket communication:

npm install socket.io socket.io-client

Create a Chat Server:

Create a file ./server.js:

const express = require('express');
const http = require('http');
const socketIo = require('socket.io');

const app = express();
const server = http.createServer(app);
const io = socketIo(server);

io.on('connection', (socket) => {
  console.log('New client connected');
  socket.on('message', (message) => {
    io.emit('message', message);
  });
  socket.on('disconnect', () => {
    console.log('Client disconnected');
  });
});

server.listen(4000, () => {
  console.log('Listening on port 4000');
});

Create a Chat Component:

Create a new file ./components/Chat.js with the following content:

import { useState, useEffect } from 'react';
import io from 'socket.io-client';

const socket = io('http://localhost:4000');

const Chat = () => {
  const [messages, setMessages] = useState([]);
  const [message, setMessage] = useState('');

  useEffect(() => {
    socket.on('message', (message) => {
      setMessages((prevMessages) => [...prevMessages, message]);
    });

    return () => {
      socket.off('message');
    };
  }, []);

  const handleSubmit = (e) => {
    e.preventDefault();
    socket.emit('message', message);
    setMessage('');
  };

  return (
    <div className="flex flex-col items-center justify-center h-screen">
      <div className="w-1/2 border rounded p-4 mb-4">
        <h2 className="text-2xl font-bold mb-4">Chat Room</h2>
        <div className="mb-4 h-64 overflow-y-scroll border rounded p-2">
          {messages.map((msg, index) => (
            <div key={index} className="mb-2">
              {msg}
            </div>
          ))}
        </div>
        <form onSubmit={handleSubmit} className="flex">
          <input
            type="text"
            value={message}
            onChange={(e) => setMessage(e.target.value)}
            className="flex-grow p-2 border rounded mr-2"
          />
          <button type="submit" className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-700">
            Send
          </button>
        </form>
      </div>
    </div>
  );
};

export default Chat;

Use the Chat 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>Real-time Chat App</title>
        <meta name="description" content="Real-time Chat Application" />
        <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 Real-time Chat App!
        </h1>
        <Chat />
      </main>
    </div>
  );
}

3. Recipe Finder with API Integration

A recipe finder app that fetches recipes from an external API and displays them.

Setup:

Set up a new Next.js project and install Tailwind CSS as described in the previous section.

Fetch Recipes from an API:

Create a new file ./components/RecipeFinder.js with the following content:

import { useState } from 'react';

const RecipeFinder = () => {
  const [recipes, setRecipes] = useState([]);
  const [query, setQuery] = useState('');

  const fetchRecipes = async () => {
    const response = await fetch(`https://api.edamam.com/search?q=${query}&app_id=YOUR_APP_ID&app_key=YOUR_APP_KEY`);
    const data = await response.json();
    setRecipes(data.hits);
  };

  const handleSearch = (e) => {
    e.preventDefault();
    fetchRecipes();
  };

  return (
    <div className="flex flex-col items-center justify-center h-screen">
      <form onSubmit={handleSearch} className="mb-4">
        <input
          type="text"
          value={query}
          onChange={(e) => setQuery(e.target.value)}
          className="p-2 border rounded mr-2"
          placeholder="Search for recipes..."
        />
        <button type="submit" className="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-700">
          Search
        </button>
      </form>
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        {recipes.map((recipe, index) => (
          <div key={index} className="border rounded p-4">
            <h3 className="text-xl font-bold mb-2">{recipe.recipe.label}</h3>
            <

img src={recipe.recipe.image} alt={recipe.recipe.label} className="mb-2" />
            <p>{recipe.recipe.source}</p>
          </div>
        ))}
      </div>
    </div>
  );
};

export default RecipeFinder;

Use the RecipeFinder Component in Your Main Page:

Update ./pages/index.js to include the RecipeFinder component:

import Head from 'next/head';
import RecipeFinder from '../components/RecipeFinder';

export default function Home() {
  return (
    <div className="container mx-auto">
      <Head>
        <title>Recipe Finder App</title>
        <meta name="description" content="Recipe Finder Application" />
        <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 Recipe Finder App!
        </h1>
        <RecipeFinder />
      </main>
    </div>
  );
}

Running Your Project

Run your development server:

npm run dev

Open http://localhost:3000 with your browser to see your advanced interactive app in action. You can further customize and enhance these projects by adding more features and improving the UI with Tailwind CSS.

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.