Skip to content

DOCUMENTATION.md

Latest commit

 

History

History
261 lines (196 loc) · 7.52 KB

DOCUMENTATION.md

File metadata and controls

261 lines (196 loc) · 7.52 KB
Raw

Coinbase Clone - React & Tailwind CSS

A full-featured clone of the Coinbase website built with React.js, React Router, and Tailwind CSS. This project demonstrates modern web development practices including component-based architecture, client-side routing, responsive design, and state management.

✨ Features

  • 🏠 Home Page - Hero section with trending cryptocurrencies and feature highlights
  • 🔍 Explore Page - Searchable and sortable cryptocurrency table with real-time data
  • 💰 Asset Details - Individual crypto pages with price charts and statistics
  • 📚 Learn Section - Educational articles and FAQ about cryptocurrencies
  • 🔐 Authentication - Sign In and Sign Up pages with form validation
  • 📱 Responsive Design - Mobile-first design that works on all screen sizes
  • 🎨 Modern UI - Built with Tailwind CSS for a clean, professional interface
  • ⚡ Fast & Performant - Built with Vite for optimal development and production performance

🛠️ Tech Stack

  • Frontend Framework: React 19
  • Routing: React Router 7
  • Styling: Tailwind CSS 4
  • Build Tool: Vite 7
  • Code Quality: ESLint

📋 Project Structure

src/
├── assets/              # Images, icons, and static files
├── components/
│   ├── common/         # Reusable components (Button, Card, Input, Badge)
│   ├── crypto/         # Crypto-specific components (CryptoCard, CryptoRow, PriceChart)
│   └── layout/         # Layout components (Navbar, Footer)
├── pages/              # Page components (Home, Explore, AssetDetail, Learn, SignIn, SignUp)
├── data/               # Mock data and constants (cryptoData.js)
├── hooks/              # Custom React hooks (if needed)
├── App.jsx             # Main app component with routing
├── App.css             # Global styles and Tailwind imports
├── main.jsx            # Entry point
└── index.css           # Base styles

🚀 Getting Started

Prerequisites

  • Node.js (v16 or higher)
  • npm or yarn

Installation

  1. Clone the repository

    git clone <repository-url>
cd coinbase-clone-herbertcode

  2. Install dependencies

    npm install

  3. Start the development server

    npm run dev

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

Available Scripts

  • npm run dev - Start development server
  • npm run build - Build for production
  • npm run preview - Preview production build
  • npm run lint - Run ESLint to check code quality

📖 Pages & Features

Home Page (/)

  • Hero section with call-to-action buttons
  • Display of trending cryptocurrencies
  • Feature highlights section
  • CTA section for account creation

Explore Page (/explore)

  • Searchable cryptocurrency list
  • Sortable table (by price, market cap, volume, change)
  • Real-time pricing information
  • Responsive table design

Asset Detail Page (/asset/:id)

  • Detailed cryptocurrency information
  • Price chart with sparkline visualization
  • Market statistics and analytics
  • Buy/Sell action buttons

Learn Page (/learn)

  • Educational articles with categories
  • Reading time indicators
  • Frequently Asked Questions (FAQ)
  • Helpful crypto guidance

Sign In Page (/signin)

  • Email and password form
  • Form validation
  • Remember me option
  • Link to Sign Up page

Sign Up Page (/signup)

  • Full registration form
  • Password confirmation
  • Terms acceptance checkbox
  • Form validation with error messages

🎨 Components

Common Components

  • Button - Variants: primary, secondary, outline, danger
  • Card - Reusable card container
  • Input - Form input with label and error support
  • Badge - Status badges with variants
  • Container - Max-width container for responsive layout

Crypto Components

  • CryptoCard - Card view of cryptocurrency with mini chart
  • CryptoRow - Table row for cryptocurrency list
  • PriceChart - Price visualization with statistics

Layout Components

  • Navbar - Navigation bar with mobile menu
  • Footer - Footer with links and information

🔄 Routing

The app uses React Router for client-side navigation:

/              → Home page
/explore       → Browse cryptocurrencies
/asset/:id     → Cryptocurrency details
/learn         → Educational content
/signin        → Sign in page
/signup        → Create account

💾 Mock Data

The project includes mock cryptocurrency data for demonstration purposes. Data is stored in src/data/cryptoData.js and includes:

  • Bitcoin, Ethereum, Cardano, Solana, Polkadot
  • Ripple, Litecoin, Dogecoin
  • Realistic price data, market caps, and sparkline charts

To integrate real data, replace the mock data with API calls to a cryptocurrency API (e.g., CoinGecko, CoinMarketCap).

🎯 Styling with Tailwind CSS

The project uses Tailwind CSS utility classes for styling. All components are styled using Tailwind's responsive prefixes:

  • sm: - Small screens (640px+)
  • md: - Medium screens (768px+)
  • lg: - Large screens (1024px+)

Example:

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
  {/* Content */}
</div>

📱 Responsive Design

The application is fully responsive with:

  • Mobile-first approach
  • Responsive navigation with mobile menu
  • Responsive grid layouts
  • Touch-friendly interface
  • Optimized for all screen sizes

🚀 Deployment

Deploy to Netlify

  1. Build the project

    npm run build

  2. Create a Netlify account at https://netlify.com

  3. Deploy using Netlify CLI

    npm install -g netlify-cli
netlify deploy --prod

  4. Or drag and drop the dist folder to Netlify's deployment area

Environment Variables

Create a .env file if you need to add environment variables:

VITE_API_BASE_URL=https://api.coingecko.com/api/v3

🔐 Best Practices Implemented

  • ✅ Component-based architecture for reusability
  • ✅ Proper file structure and organization
  • ✅ React hooks for state management (useState, useEffect)
  • ✅ React Router for navigation
  • ✅ Responsive design principles
  • ✅ Accessibility considerations
  • ✅ Clean, readable code with comments
  • ✅ Error handling and validation

💡 Future Enhancements

  • Integration with real cryptocurrency API
  • User authentication with backend
  • Wallet functionality
  • Trading simulation
  • Price alerts
  • Watchlist feature
  • Dark mode toggle
  • Advanced charting library (Chart.js, Recharts)
  • User profiles and settings
  • Push notifications

🐛 Troubleshooting

Port already in use

If port 5173 is already in use, Vite will use the next available port. Check the terminal output.

Module not found errors

Run npm install again to ensure all dependencies are installed.

Build errors

  • Clear node_modules and dist folders
  • Run npm install again
  • Check for import path typos

📚 Resources

📄 License

This project is for educational purposes as part of a DCIT 323 assignment.

✏️ Author

Herbert (22059074)

Note: This is a demonstration project. Data is mocked and not real cryptocurrency information. Always do your own research before investing in cryptocurrencies.