Hands-on AI projects from beginner to expert. Pick a challenge and start building.
Take a deliberately slow web application and optimize it to achieve a perfect 100 Lighthouse score. Fix render-blocking resources, implement code splitting, optimize images, and more.
Build a micro-frontend system with module federation, independent deployments, shared state management, and a shell application that orchestrates multiple micro-apps.
Design and build a GraphQL API with queries, mutations, subscriptions, custom scalars, and an interactive playground with documentation and query history.
Build a video platform with upload, transcoding pipeline, adaptive bitrate streaming (HLS), video player with custom controls, and a recommendation feed.
Build a real-time collaborative whiteboard where multiple users can draw, add shapes and text, with undo/redo, layers, and export to image functionality.
Build a production-grade authentication system with OAuth providers, email/password with MFA, password reset flow, session management, and security best practices.
Build a headless CMS with a rich text editor (block-based like Notion), content types, media management, API generation, and role-based access control.
Build a complex multi-step form with conditional logic, real-time validation, progress indicator, review step, and the ability to navigate back and forth between steps.
Create a drag-and-drop file uploader with progress tracking, image/video preview, file type validation, chunked uploads for large files, and a gallery view of uploaded files.
Build a real-time chat application with WebSocket connections, chat rooms, typing indicators, read receipts, emoji reactions, and message search.
Build a Trello-like Kanban board with drag-and-drop cards between columns, card editing with rich text, labels, due dates, and board persistence.
Build a full-stack URL shortener with custom short links, click analytics (geographic, device, referrer), QR code generation, and a dashboard to manage all links.
Build an admin analytics dashboard with interactive charts, data tables with sorting/filtering, date range picker, export functionality, and responsive layout with sidebar navigation.
Create a social media feed with infinite scroll, post creation (text/images), like and comment functionality, share buttons, and user profile cards.
Build a complete e-commerce storefront with product listing, search and filters, shopping cart, checkout flow with form validation, and order confirmation. Use mock payment processing.
Build a platform where users can create quizzes with multiple question types (multiple choice, true/false, fill-in-the-blank), take quizzes with a timer, and see score analytics.
Create a masonry-grid image gallery with lightbox viewing, lazy loading, infinite scroll, category filtering, and smooth animations. Support image zoom and keyboard navigation.
Build a scientific calculator with standard and scientific modes, calculation history, multiple themes, keyboard support, and smooth button press animations.
Build a beautiful Pomodoro productivity timer with customizable work/break intervals, session tracking, stats dashboard, notification sounds, and a progress visualization.
Create a recipe search application where users can search by ingredients, filter by cuisine and dietary restrictions, save favorites, and view detailed cooking instructions.
Build an advanced todo application with categories, priority levels, drag-and-drop reordering, due dates, local storage persistence, and a beautiful UI with smooth animations.
Build a weather dashboard that fetches data from a weather API. Display current conditions, 5-day forecast with charts, location search with autocomplete, and animated weather icons.
Create a static blog that renders Markdown/MDX content with syntax highlighting, table of contents, and reading time estimates. Include category filtering and a search feature.
Recreate a famous SaaS landing page (like Linear, Vercel, or Stripe). Focus on pixel-perfect typography, spacing, subtle animations, and responsive behavior across all devices.
Build a responsive portfolio website with dark/light mode toggle, smooth scroll navigation, project showcase section, and contact form. Use modern CSS techniques like grid, flexbox, and animations.
测试翻译