Project README

This is a Next.js project bootstrapped with create-next-app.

Features

This project includes the following integrations:

• Tailwind CSS: For utility-first CSS styling.
• GraphQL: Fetching data via GraphQL queries, with GraphQL Code Generator for type-safe code generation.
• NextAuth.js: For authentication.
• MySQL Integration: Fetching and managing data with MySQL.
• WordPress GraphQL: Fetching data from a WordPress server using GraphQL.

---

Getting Started

Development Setup

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 in your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

Tailwind CSS

This project uses Tailwind CSS for styling. Refer to the Tailwind documentation for guidance on creating styles and components.

GraphQL Code Generation

To generate types and queries based on your GraphQL schema:

npx drizzle-kit generate --config=drizzle.config.ts

To apply migrations for Drizzle ORM:

npx drizzle-kit migrate --config=drizzle.config.ts

Useful resources for GraphQL Code Generator setup:

• GraphQL Codegen Config Reference
• GraphQL Codegen with WPGraphQL
• Apollo GraphQL Tutorials

Authentication

The app integrates NextAuth.js for authentication. For configuration:

Update the environment variables in your .env.local file. Check out the NextAuth.js documentation for detailed instructions.

Data Sources

MySQL

The app connects to a MySQL database. Ensure your database credentials are properly configured in the environment file.

WordPress GraphQL

Data is also fetched from a WordPress server using GraphQL. To use this feature:

• Configure the WordPress server's GraphQL endpoint.
• Define GraphQL queries in your project, leveraging type safety provided by GraphQL Code Generator.

Learn More To dive deeper into the technologies used in this project, explore the following resources:

• Next.js Documentation - learn about Next.js features and APIs.
• Learn Next.js - an interactive tutorial.
• Tailwind CSS Documentation - learn about utility-first styling.
• GraphQL Code Generator Docs - type-safe GraphQL development.
• NextAuth.js Documentation - setup and configuration for authentication.

Deployment

Will be deploying this project to OCI (Oracle Cloud Infrastructure)

Enjoy building! 🎉