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.
After accepting this assignment, follow these steps:
git clone <your-repository-url>npm installnpm run devThe app will be available at http://localhost:5173
- 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
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
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
- React Documentation
- React Router Documentation
- Tailwind CSS Documentation
- Vite Documentation
- Heroicons - Free SVG icons
- reacticons - Free SVG icons
You must deploy your completed project on Netlify.