Skip to content

README.md

Latest commit

 

History

History
100 lines (72 loc) · 3.04 KB

README.md

File metadata and controls

100 lines (72 loc) · 3.04 KB
Raw

Review Assignment Due Date

Coinbase Clone - React & Tailwind CSS Assignment

📋 Overview

In this assignment, you will build a full clone of the Coinbase website using React.js and Tailwind CSS. This project will help you practice component-based architecture, client-side routing, responsive design, and modern CSS utilities.

🚀 Getting Started

After accepting this assignment, follow these steps:

1. Clone Your Repository

git clone <your-repository-url>

2. Install Dependencies

npm install

3. Start the Development Server

npm run dev

The app will be available at http://localhost:5173

Technical Requirements

  • Use React Router for client-side navigation
  • Use functional components with React hooks
  • Create reusable components (Button, Card, CryptoRow, etc.)
  • Use Tailwind CSS for all styling (no external CSS frameworks)
  • Implement responsive design (mobile, tablet, desktop)
  • Use React state management (useState, useContext, or similar)
  • Follow proper file structure and naming conventions
  • Write clean, readable code with appropriate comments

📁 Project Structure

src/
├── assets/          # Images, icons, and other static files
├── components/      # Reusable React components
│   ├── common/      # Shared components (Button, Card, Input, etc.)
│   ├── layout/      # Layout components (Navbar, Footer, Sidebar)
│   └── crypto/      # Crypto-specific components (CryptoCard, PriceChart)
├── pages/           # Page components
│   ├── Home.jsx
│   ├── Explore.jsx
│   ├── AssetDetail.jsx
│   ├── Learn.jsx
│   ├── SignIn.jsx
│   └── SignUp.jsx
├── data/            # Mock data and constants
├── hooks/           # Custom React hooks (optional)
├── App.jsx          # Main application with routing
├── App.css          # Global styles (if needed)
├── main.jsx         # Application entry point
└── index.css        # Tailwind CSS imports

🎨 Design Reference

Visit coinbase.com

  • Overall layout and structure across all pages
  • Consistent color scheme and typography
  • Navigation flow between pages
  • Responsive behavior on all screen sizes
  • User interface patterns and interactions

💡 Helpful Resources

🌐 Deployment on Netlify

You must deploy your completed project on Netlify.