Sphere - Next.js + Tailwind CSS + MariaDB

A modern, responsive website built with Next.js 14, Tailwind CSS, TypeScript, and MariaDB. This project demonstrates a full-stack web application with a beautiful UI and robust backend functionality.

🚀 Features

• Modern UI/UX: Beautiful, responsive design with Tailwind CSS
• Full-Stack: Next.js App Router with API routes
• Database: MariaDB with Prisma ORM
• Type Safety: TypeScript for better development experience
• Contact Form: Functional contact form with database storage
• Blog System: Blog posts with author information
• Responsive Design: Mobile-first approach
• SEO Optimized: Meta tags and proper structure

🛠️ Tech Stack

• Frontend: Next.js 14, React 18, TypeScript
• Styling: Tailwind CSS
• Database: MariaDB
• ORM: Prisma
• Deployment: Ready for Vercel, Netlify, or any hosting platform

📋 Prerequisites

Before running this project, make sure you have:

• Node.js 18+ installed
• MariaDB server running
• npm or yarn package manager

🚀 Getting Started

1. Clone the repository

git clone <your-repo-url>
cd sphere

2. Install dependencies

npm install

3. Set up the database

1. Create a MariaDB database:

CREATE DATABASE website_db;

2. Update the .env file with your database credentials:

DATABASE_URL="mysql://username:password@localhost:3306/website_db"

4. Set up Prisma

# Generate Prisma client
npx prisma generate

# Run database migrations
npx prisma migrate dev --name init

# (Optional) Seed the database with sample data
npx prisma db seed

5. Run the development server

npm run dev

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

📁 Project Structure

sphere/
├── src/
│   ├── app/                 # Next.js App Router
│   │   ├── api/            # API routes
│   │   ├── blog/           # Blog page
│   │   ├── about/          # About page
│   │   ├── contact/        # Contact page
│   │   ├── layout.tsx      # Root layout
│   │   └── page.tsx        # Home page
│   ├── components/         # React components
│   │   ├── Header.tsx      # Navigation header
│   │   ├── Footer.tsx      # Site footer
│   │   └── ContactForm.tsx # Contact form component
│   └── lib/               # Utility functions
│       └── db.ts          # Database connection
├── prisma/                # Database schema and migrations
│   └── schema.prisma      # Prisma schema
├── public/                # Static assets
└── package.json           # Dependencies and scripts

🗄️ Database Schema

The application includes the following database models:

• User: User accounts with authentication
• Post: Blog posts with author relationships
• Contact: Contact form submissions

🔧 Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run start - Start production server
• npm run lint - Run ESLint
• npx prisma studio - Open Prisma Studio for database management

🌐 Pages

• Home (/) - Landing page with hero section and features
• Blog (/blog) - Display all blog posts
• About (/about) - Company information and team
• Contact (/contact) - Contact form and information

🔌 API Endpoints

• GET /api/posts - Fetch all blog posts
• POST /api/posts - Create a new blog post
• POST /api/contact - Submit contact form

🎨 Customization

Styling

The project uses Tailwind CSS for styling. You can customize the design by:

• Modifying the Tailwind configuration in tailwind.config.ts
• Updating component styles in the respective files
• Adding custom CSS in src/app/globals.css

Content

• Update the content in each page component
• Modify the database schema in prisma/schema.prisma
• Add new API routes in src/app/api/

🚀 Deployment

Vercel (Recommended)

1. Push your code to GitHub
2. Connect your repository to Vercel
3. Add environment variables in Vercel dashboard
4. Deploy!

Other Platforms

The project can be deployed to any platform that supports Node.js:

• Netlify
• Railway
• DigitalOcean App Platform
• AWS Amplify

📝 Environment Variables

Create a .env file in the root directory:

# Database
DATABASE_URL="mysql://username:password@localhost:3306/website_db"

# Next.js
NEXTAUTH_SECRET="your-secret-key-here"
NEXTAUTH_URL="http://localhost:3000"

🤝 Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🆘 Support

If you encounter any issues or have questions:

1. Check the Issues page
2. Create a new issue with detailed information
3. Contact the development team

---

Built with ❤️ using Next.js, Tailwind CSS, and MariaDB