Tailwind Resources Logo Tailwind Resources
Guestbook screenshot

Guestbook

Author Avatar Theme by Ayanavakarmakar
Updated: 17 Jan 2023
15 Stars

Guestbook built using the T3 Stack

Github Live Preview

Categories

Nextjs React Tanstack Prisma Daisyui Fullstack

Overview

GuestbookGitNFT is a web application built using the T3Framework and Next.js. It allows users to create and manage a guestbook where visitors can leave comments and messages. The application features authentication via NextAuth.js with options for logging in using GitHub, Reddit, or Email “Magic Links”. The UI is built using Tailwind CSS with some elements from daisyUI, and it includes animations powered by Framer Motion. The database is MySQL via PlanetScale, and schema validation is done using Zod. State management is handled by Zustand, and emails are sent using Twilio Sendgrid. The application is deployed on Vercel.

Features

  • Authentication with multiple options (GitHub, Reddit, and Email “Magic Links”)
  • Guestbook creation and management
  • Comment and message submission
  • Responsive UI design
  • Animations for enhanced user experience
  • MySQL database integration
  • Schema validation for data integrity and security
  • State management for efficient performance

Installation

To install GuestbookGitNFT, follow these steps:

  1. Clone the repository from GitHub:
git clone https://github.com/{username}/{repository}.git
  1. Install the necessary dependencies using npm or yarn:
npm install

or

yarn install

  1. Set up the environment variables by creating a .env file and filling in the required values. Refer to the .env.example file for the necessary variables.

  2. Start the development server:

npm run dev

or

yarn dev
  1. Open your browser and navigate to http://localhost:3000 to access the application.

Summary

GuestbookGitNFT is a feature-packed web application that allows users to create and manage guestbooks. With its seamless authentication options, responsive UI design, and various integrations like MySQL, schema validation, and state management, it provides a robust and user-friendly experience. The application is built using modern technologies like Next.js, NextAuth.js, Tailwind CSS, and Zustand, ensuring efficient performance and scalability. Contributions and feedback are welcome, and the project is hosted on Vercel for easy deployment.