🌐 Cobalt Clone

A faithful UI/UX recreation of the Cobalt platform built as a frontend exercise with Next.js and TypeScript. This project demonstrates component-based architecture, responsive design, and modern frontend best practices.

---

Table of Contents

• About
• Features
• Tech Stack
• Demo / Screenshot
• Getting Started
  • Prerequisites
  • Install
  • Development
  • Build & Production
• Project Structure
• Contributing
• Credits & License
• Contact

---

About

Cobalt Clone is a frontend implementation intended for educational and portfolio purposes. It focuses on accurately reproducing the look-and-feel and interactions of the original Cobalt platform while using modern tools and TypeScript for improved developer experience and maintainability.

---

Features

• Responsive layout (desktop, tablet, mobile)
• Component-driven design using Next.js
• TypeScript for type safety
• Performance optimizations leveraging Next.js features
• Configured linting & formatting (ESLint, Prettier)

---

Tech Stack

• Framework: Next.js
• Language: TypeScript
• Styling: CSS / Tailwind (where used)
• Linting: ESLint
• Formatting: Prettier
• Recommended deployment: Vercel

---

Demo / Screenshot

See the image at the top for the current UI progress. Run the project locally to explore interactive elements and layout.

---

Getting Started

Prerequisites

• Node.js (LTS recommended)
• A package manager: npm, yarn, pnpm, or bun

Install

Clone the repository and install dependencies:

git clone https://github.com/VedantPatil-99/Cobalt-clone.git
cd Cobalt-clone
# npm
npm install
# or yarn
yarn
# or pnpm
pnpm install
# or bun
bun install

Development

Start the development server:

# npm
npm run dev
# or yarn
yarn dev
# or pnpm
pnpm dev
# or bun
bun dev

Open http://localhost:3000 in your browser. The app will hot-reload as you edit files.

Build & Production

Build and start the production server:

# build
npm run build
# start (or use a hosting platform like Vercel)
npm start

(Adjust commands for yarn/pnpm/bun as needed.)

---

Project Structure (high level)

• public/ — static assets
• src/ — application source (pages, components, styles)
• next.config.ts — Next.js configuration
• tsconfig.json — TypeScript configuration
• package.json — scripts & dependencies

---

Contributing

Contributions, issues, and feature requests are welcome. If you plan to contribute:

1. Fork the repo
2. Create a branch: git checkout -b feature/name
3. Commit changes and push
4. Open a PR with a clear description of your changes

Please ensure code style matches the repo configuration (ESLint + Prettier).

---

Contact

Project: https://github.com/VedantPatil-99/Cobalt-clone
Created by Vedant Patil — reach out via GitHub.