Portfolio-Website (FULL STACK)

Better design for your digital products. Turning your idea into reality — bringing together teams from the global tech industry.

---

🌐 Live Demo

habibmangoranda.vercel.app

---

📋 Table of Contents

• Overview
• Features
• Tech Stack
• Getting Started
• Project Structure
• Environment Variables
• Deployment
• Contributing
• License

---

📖 Overview

Habibi Studio is a personal portfolio and studio website built with Next.js 13, featuring a modern design, authentication, a blog, and a project portfolio. It showcases digital design and development work with a clean, responsive UI and a protected dashboard.

---

✨ Features

• 🏠 Home — Hero section with studio tagline and call-to-action
• 💼 Portfolio — Showcase of design and development projects
• 📝 Blog — Articles and posts with dynamic routing
• 👤 About — Studio and team information
• 📬 Contact — Get in touch form
• 🔐 Dashboard — Protected admin area with authentication
• 🌙 Dark / Light Mode — Theme toggle for user preference
• 📱 Responsive Design — Fully mobile-friendly layout

---

🛠 Tech Stack

Layer	Technology
Framework	Next.js 13 (App Router)
UI Library	React 18
Database	MongoDB via Mongoose
Authentication	NextAuth.js v4
Password Hashing	bcryptjs
Data Fetching	SWR
Styling	CSS Modules
Linting	ESLint (Next.js config)
Deployment	Vercel

---

🚀 Getting Started

Prerequisites

Make sure you have the following installed:

• Node.js v16 or higher
• npm, yarn, pnpm, or bun
• A MongoDB instance (local or Atlas)

Installation

1. Clone the repository

   git clone https://github.com/mr-mangoranda/habibistudio.git
   cd habibistudio

2. Install dependencies

   npm install
   # or
   yarn install
   # or
   pnpm install

3. Set up environment variables

   Create a .env.local file in the root directory. See Environment Variables below.

4. Run the development server

   npm run dev
   # or
   yarn dev
   # or
   pnpm dev

5. Open in your browser

   Navigate to http://localhost:3000

---

📁 Project Structure

habibistudio/
├── public/               # Static assets (images, icons)
├── src/
│   ├── app/              # Next.js 13 App Router pages
│   │   ├── about/
│   │   ├── blog/
│   │   ├── contact/
│   │   ├── dashboard/
│   │   ├── portfolio/
│   │   └── page.js       # Home page
│   ├── components/       # Reusable UI components
│   ├── models/           # Mongoose data models
│   ├── utils/            # Utility/helper functions
│   └── styles/           # Global and module CSS
├── .gitignore
├── eslint.config.mjs
├── jsconfig.json
├── next.config.mjs
├── package.json
└── README.md

---

🔑 Environment Variables

Create a .env.local file in the project root and add the following variables:

# MongoDB Connection
MONGODB_URI=your_mongodb_connection_string

# NextAuth Configuration
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=your_nextauth_secret_key

⚠️ Never commit your .env.local file to version control. It is already included in .gitignore.

---

📦 Available Scripts

Command	Description
npm run dev	Start the development server at localhost:3000
npm run build	Build the app for production
npm run start	Start the production server
npm run lint	Run ESLint for code quality checks

---

☁️ Deployment

This project is deployed on Vercel — the recommended platform for Next.js applications.

Deploy Your Own

1. Push your code to a GitHub repository
2. Go to vercel.com/new and import the repository
3. Add the required environment variables in the Vercel dashboard
4. Click Deploy

---

🤝 Contributing

Contributions are welcome! If you'd like to improve this project:

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

---

📄 License

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

---

👤 Author

Habib Mangoranda

• 🌐 Website: habibmangoranda.vercel.app
• 🐙 GitHub: @mr-mangoranda

---

Made with ❤️ by Habib Mangoranda