Devisyn - Modern Web Development Agency Theme

A modern, responsive Next.js theme for web development agencies. Built with TypeScript, Tailwind CSS, and MongoDB.

Table of Contents

• Installation
• Configuration
• Customization
• Features
• File Structure
• Editing Guide

Installation

1. Clone the repository
2. Install dependencies:

   npm install

3. Set up environment variables:

   cp .env.example .env.local

4. Start the development server:

   npm run dev

Configuration

Environment Variables

Create a .env.local file with the following variables:

MONGODB_URI=your_mongodb_connection_string
NEXTAUTH_SECRET=your_nextauth_secret
NEXTAUTH_URL=http://localhost:3000

MongoDB Setup

1. Create a MongoDB database
2. Update the connection string in .env.local
3. The theme will automatically create necessary collections

Customization

Colors and Theme

Edit tailwind.config.js to customize colors and theme:

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#your-color',
        secondary: '#your-color',
      },
    },
  },
}

Fonts

1. Add your fonts to public/fonts/
2. Update src/app/globals.css with your font imports
3. Update font families in tailwind.config.js

Images

1. Replace logo: public/images/logo.svg
2. Replace favicon: public/favicon.ico
3. Add your images to public/images/

Features

Blog System

• Create, edit, and delete blog posts
• Rich text editor with image support
• SEO-friendly URLs
• Featured images
• Draft and published states

Admin Dashboard

• Secure authentication
• Blog management
• User-friendly interface
• Responsive design

SEO Optimization

• Meta tags
• Open Graph tags
• Schema markup
• Sitemap generation

File Structure

src/
├── app/                    # Next.js app directory
│   ├── admin/             # Admin routes
│   ├── api/               # API routes
│   ├── blog/              # Blog routes
│   └── page.tsx           # Home page
├── components/            # Reusable components
├── lib/                   # Utility functions
└── styles/               # Global styles

Editing Guide

Home Page

Edit src/app/page.tsx to customize:

• Hero section
• Services
• Portfolio
• Testimonials
• Contact form

Blog Posts

1. Access admin dashboard at /admin
2. Create new posts at /admin/dashboard/create
3. Edit existing posts at /admin/dashboard/edit/[slug]

Styling

1. Global styles: src/app/globals.css
2. Component styles: src/components/*.tsx
3. Tailwind configuration: tailwind.config.js

API Endpoints

• Blog posts: /api/blogs
• Authentication: /api/auth
• Contact form: /api/contact

Database Schema

interface Blog {
  _id: string;
  title: string;
  slug: string;
  content: string;
  excerpt: string;
  featuredImage: string;
  status: 'draft' | 'published';
  createdAt: string;
  updatedAt: string;
}

EmailJS Configuration

To set up the contact form functionality, you'll need to configure EmailJS:

1. Sign up for a free account at EmailJS

2. Create a new email service (Gmail, Outlook, etc.)

3. Create an email template with the following variables:

   • from_name: Sender's name
   • from_email: Sender's email
   • message: Message content
   • subject: Email subject

4. Create a .env.local file in the root directory and add your EmailJS credentials:

NEXT_PUBLIC_EMAILJS_SERVICE_ID=your_service_id
NEXT_PUBLIC_EMAILJS_TEMPLATE_ID=your_template_id
NEXT_PUBLIC_EMAILJS_PUBLIC_KEY=your_public_key

5. Install the EmailJS package:

npm install @emailjs/browser

The contact form will now send emails using your configured EmailJS service.

Support

For support, please contact the theme author through Envato.

License

This theme is licensed under the Envato Regular License.