DevShowcase 🚀

DevShowcase is a modern developer project showcase platform built with Next.js App Router, TypeScript, Tailwind CSS, and shadcn/ui. It allows developers to explore projects, view detailed showcases, and manage project submissions through a clean and responsive interface.

🌐 Live Demo

Add your deployed link here: https://dev-show-case-phi.vercel.app/

📂 GitHub Repository

Add your repository link here: https://github.com/noboKumar/DevShowcase-Client

---

📌 Project Overview

Developers build amazing projects, but often struggle to present them professionally in one place. DevShowcase solves that problem by creating a platform where projects can be displayed, discovered, and managed easily.

This project was created as a frontend assessment using Next.js App Router with focus on:

• Clean UI/UX
• Responsive design
• Reusable components
• Dynamic routing
• Protected route-ready structure
• Modern frontend architecture

---

✨ Key Features

🏠 Landing Page

• Sticky responsive navbar
• Hero section with CTA buttons
• Featured projects section
• Categories section
• How it works section
• Community stats / tech stack section
• Testimonials section
• CTA banner
• Footer with links and social icons

📦 Projects Page (/items)

• Search projects by title
• Filter by category
• Filter by tech stack
• Responsive project card grid

🔍 Project Details (/items/[id])

• Dynamic route using App Router
• Full project information
• Tech stack badges
• GitHub and live demo links
• Related projects section

➕ Add Project (/items/add)

• Clean project submission form
• Input validation
• Toast success feedback
• Local state / localStorage support

🛠 Manage Projects (/items/manage)

• View submitted projects
• Delete projects instantly
• Clean table/grid layout

📘 About Page (/about)

• Platform mission and project purpose
• Clean informational layout

🎨 UI / UX

• Fully responsive (mobile, tablet, desktop)
• Light / Dark mode support
• Hover states and transitions
• Consistent spacing and typography

---

🛠 Tech Stack

Frontend

• Next.js 16+ (App Router)
• React
• TypeScript
• Tailwind CSS
• shadcn/ui
• Lucide React Icons

Backend

• Node.js
• Express.js
• Prisma ORM
• PostgreSQL
• Better Auth

---

📁 Route Summary

Route	Description
/	Landing page
/items	All projects page
/items/[id]	Project details page
/items/add	Add new project
/items/manage	Manage projects
/about	About page

---

⚙️ Installation & Setup

Clone the repository:

git clone https://github.com/your-username/devshowcase.git

Move into project folder:

cd devshowcase

Install dependencies:

npm install

Run development server:

npm run dev

Open browser:

http://localhost:3000

---

📦 Build for Production

npm run build
npm start

---

📌 Future Improvements

• Firebase Authentication
• User dashboard
• Edit projects feature
• Like / Save projects
• Backend API integration
• Real database support
• Comments / Reviews

---

👨‍💻 Author

Built by @noboKumar

---

📄 License

This project is for educational / assessment purposes.