Portora

A curated showcase platform for code and no-code freelancers to display their work and get discovered.

Portora is a portfolio platform built for freelancers who build things, whether that's React apps, Webflow sites, Bubble workflows, or all of the above. It gives every type of builder one place to showcase their work professionally, without compromising on how they like to work.

The Problem

Talented freelancers either no portfolio, or three scattered across the internet. Existing platforms skew too heavily toward developers or too heavily toward designers. No-coders are treated as an afterthought on dev platforms. Coders feel boxed in on visual builders. Portora is built for both.

Core Features

• Portfolio Builder: the heart of the platform. Freelancers choose a Layout DNA (Grid, Scroll, Terminal, Magazine, or Bento), assemble their portfolio from a block library, and style it with a theme panel.

• Explore Page: a filterable, searchable gallery of all published portfolios. Filter by type (Coded, No-Code, Design, Automation, Full-Stack), sort by Latest or Trending, and browse featured work in a curated layout.

• Blog: an integrated writing space. External blogs (Hashnode, Dev.to, Medium, Substack, Ghost) can be connected and surfaced alongside internal posts in a unified feed.

• Dashboard: a private control center for managing portfolio content, tracking views, writing posts, connecting external sources, and seeing exactly how a profile appears to visitors.

Who It's For

Freelance developers (frontend, full-stack, backend) No-code builders (Webflow, Framer, Bubble, automation) Freelancers who work across both worlds

Tech Stack

• Framework — Next.js
• Styling — Tailwind CSS
• Database — MongoDB via Mongoose
• Drag and Drop — dnd-kit

---

Project Structure

src/
src
 ┣ app
 ┃ ┣ (auth)
 ┃ ┃ ┣ login
 ┃ ┃ ┗ signup
 ┃ ┣ (dashboard)
 ┃ ┃ ┗ dashboard
 ┃ ┃ ┃ ┣ blog
 ┃ ┃ ┃ ┣ portfolio
 ┃ ┃ ┃ ┣ projects
 ┃ ┃ ┃ ┣ settings
 ┃ ┣ api
 ┃ ┃ ┣ auth
 ┃ ┃ ┃ ┣ register
 ┃ ┃ ┃ ┗ [...nextauth]
 ┃ ┃ ┣ blog
 ┃ ┃ ┃ ┣ posts
 ┃ ┃ ┃ ┃ ┗ [id]
 ┃ ┃ ┃ ┣ sources
 ┃ ┃ ┃ ┣ [username]
 ┃ ┃ ┃ ┃ ┗ [slug]
 ┃ ┃ ┣ github
 ┃ ┃ ┣ portfolio
 ┃ ┃ ┃ ┣ [username]
 ┃ ┃ ┣ profile
 ┃ ┃ ┣ projects
 ┃ ┃ ┃ ┣ [id]
 ┃ ┃ ┣ upload
 ┃ ┃ ┗ users
 ┃ ┃ ┃ ┗ [userId]
 ┃ ┃ ┃ ┃ ┗ projects
 ┃ ┣ blog
 ┃ ┃ ┗ editor
 ┃ ┃ ┃ ┣ new
 ┃ ┃ ┃ ┗ [id]
 ┃ ┣ builder
 ┃ ┣ explore
 ┃ ┣ profile
 ┃ ┃ ┗ [username]
 ┃ ┃ ┃ ┗ blog
 ┃ ┃ ┃ ┃ ┣ portfolio
 ┃ ┃ ┃ ┃ ┣ [slug]
 ┃ ┣ globals.css
 ┃ ┣ layout.tsx
 ┃ ┣ not-found.tsx
 ┃ ┗ page.tsx
 ┣ components
 ┃ ┣ animation
 ┃ ┣ blog
 ┃ ┣ builder
 ┃ ┣ dashboard
 ┃ ┣ landing
 ┃ ┣ portfolio
 ┃ ┣ projects
 ┃ ┗ ui
 ┣ consts
 ┣ errors
 ┣ hooks
 ┣ interface
 ┣ libs
 ┣ models
 ┣ providers
 ┣ services
 ┣ store
 ┣ types
 ┣ utils
 ┣ validations
 ┗ proxy.ts

---

📦 Getting Started

Installation

1. Clone the repository

   git clone <repository-url>
   cd portora

2. Install dependencies

   npm install

3. Configure environment variables Create a .env file in the root directory:

   # Database
   MONGODB_URI=your_mongodb_connection_string
   
   # Authentication
   NEXTAUTH_SECRET=your_secret_key
   NEXTAUTH_URL=http://localhost:3000
   
   # OAuth Providers
   GITHUB_ID=your_github_app_id
   GITHUB_SECRET=your_github_app_secret
   GOOGLE_ID=your_google_app_id
   GOOGLE_SECRET=your_google_app_secret
   
   # Media
   CLOUDINARY_CLOUD_NAME=your_cloudinary_name
   CLOUDINARY_API_KEY=your_cloudinary_api_key
   CLOUDINARY_API_SECRET=your_cloudinary_api_secret

4. Run development server

   npm run dev

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

---

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Also make an issue for a problem

---