Skip to content

web-apps

Directory actions

More options

Directory actions

More options

Latest commit

 

History

History

web-apps

README.md

Web Applications

A comprehensive collection of modern web applications demonstrating best practices in full-stack development, built with AI-assisted development tools.

Overview

This directory contains production-ready web application examples spanning various categories including e-commerce, social platforms, dashboards, portfolios, productivity tools, and landing pages. Each project showcases modern web development patterns, responsive design, and scalable architectures.

Projects

1. E-Commerce (e-commerce/)

Full-featured e-commerce applications with shopping cart, checkout, and payment integration.

Projects:

  • next-shop - Next.js-based online store with Stripe integration
  • nuxt-store - Nuxt.js e-commerce platform with Vuex state management
  • product-showcase - Product catalog with advanced filtering and search
  • react-marketplace - Multi-vendor marketplace platform

Key Features:

  • Shopping cart and checkout flows
  • Payment gateway integration (Stripe, PayPal)
  • Product search and filtering
  • User authentication and profiles
  • Order management and tracking
  • Admin dashboards

2. Social Media (social-media/)

Real-time social networking and communication platforms.

Projects:

  • firebase-chat-app - Real-time chat with Firebase backend
  • nextjs-social-platform - Full-featured social network with posts, likes, comments
  • real-time-messenger - WebSocket-based messaging application
  • t3-forum - Discussion forum built with T3 stack

Key Features:

  • Real-time messaging with WebSockets
  • User authentication and profiles
  • Post creation, likes, and comments
  • Friend/follower systems
  • Notifications
  • Media uploads

3. Dashboard & Analytics (dashboard-analytics/)

Data visualization and admin panel applications.

Projects:

  • admin-panel - Comprehensive admin dashboard template
  • analytics-dashboard - Data visualization with charts and graphs
  • nextjs-dashboard - Modern dashboard built with Next.js
  • sales-metrics-dashboard - Sales analytics and reporting

Key Features:

  • Interactive charts and graphs (Chart.js, D3.js, Recharts)
  • Real-time data updates
  • Responsive table views
  • Export to CSV/PDF
  • User role management
  • API integrations

4. Portfolio & Blog (portfolio-blog/)

Personal branding and content publishing platforms.

Projects:

  • astro-blog - Fast, SEO-optimized blog with Astro
  • developer-blog - Technical blog with MDX support
  • nextjs-portfolio - Portfolio site with Next.js
  • nuxt-portfolio - Vue-based portfolio with animations

Key Features:

  • MDX/Markdown content support
  • SEO optimization
  • Dark/light theme toggle
  • Blog post management
  • Project showcases
  • Contact forms
  • RSS feeds

5. Productivity Tools (productivity-tools/)

Task management and productivity applications.

Projects:

  • simple-todo - Todo list with local storage
  • habit-tracker - Daily habit tracking application
  • markdown-notes - Note-taking app with Markdown
  • pomodoro-timer - Focus timer with task tracking
  • time-tracker - Time tracking and reporting tool

Key Features:

  • Task creation and management
  • Progress tracking
  • Data persistence (localStorage, IndexedDB)
  • Export/import functionality
  • Statistics and analytics
  • Responsive design

6. Landing Pages (landing-pages/)

Marketing and promotional page templates.

Projects:

  • saas-landing - SaaS product landing page
  • startup-landing - Startup landing page template
  • app-download - Mobile app download page
  • coming-soon - Coming soon/launch page

Key Features:

  • Responsive design
  • Call-to-action sections
  • Email signup forms
  • Pricing tables
  • Feature showcases
  • Testimonials
  • SEO optimization

Technology Stack

Frontend Frameworks

  • React - Component-based UI library
  • Next.js - React framework with SSR/SSG
  • Vue.js - Progressive JavaScript framework
  • Nuxt.js - Vue framework with SSR
  • Svelte - Compiled JavaScript framework
  • Astro - Static site generator
  • Angular - Full-featured framework

Styling & UI

  • Tailwind CSS - Utility-first CSS framework
  • Material-UI (MUI) - React component library
  • Chakra UI - Accessible component library
  • Styled Components - CSS-in-JS
  • Radix UI - Unstyled, accessible components
  • shadcn/ui - Re-usable components built with Radix UI and Tailwind

State Management

  • Redux Toolkit - Predictable state container
  • Zustand - Lightweight state management
  • Jotai - Atomic state management
  • Vuex - Vue state management
  • Pinia - Vue store
  • Context API - Built-in React state

Data Fetching

  • React Query - Async state management
  • SWR - Stale-while-revalidate
  • Apollo Client - GraphQL client
  • tRPC - End-to-end typesafe APIs
  • Axios - HTTP client

Backend & APIs

  • Node.js - JavaScript runtime
  • Express - Web framework
  • Next.js API Routes - Serverless functions
  • tRPC - Type-safe APIs
  • GraphQL - Query language for APIs
  • REST APIs - Traditional HTTP APIs

Databases

  • PostgreSQL - Relational database
  • MongoDB - NoSQL document database
  • Firebase - BaaS platform
  • Supabase - Open source Firebase alternative
  • Prisma - Next-generation ORM
  • Drizzle - TypeScript ORM

Authentication

  • NextAuth.js - Authentication for Next.js
  • Clerk - User management platform
  • Auth0 - Authentication platform
  • Firebase Auth - Firebase authentication
  • Supabase Auth - Supabase authentication

Hosting & Deployment

  • Vercel - Next.js hosting platform
  • Netlify - JAMstack hosting
  • Railway - Infrastructure platform
  • AWS - Amazon Web Services
  • Google Cloud - Google Cloud Platform
  • DigitalOcean - Cloud infrastructure

Getting Started

Prerequisites

# Node.js (v18 or higher recommended)
node --version

# Package manager (choose one)
npm --version
pnpm --version
yarn --version

Installation

  1. Navigate to a specific project directory:
cd web-apps/<category>/<project-name>
  1. Install dependencies:
# Using pnpm (recommended)
pnpm install

# Using npm
npm install

# Using yarn
yarn install
  1. Set up environment variables:
# Copy example env file
cp .env.example .env.local

# Edit with your API keys and configuration
  1. Run the development server:
pnpm dev
# or
npm run dev
# or
yarn dev
  1. Open your browser to http://localhost:3000 (or specified port)

Build for Production

# Build the application
pnpm build

# Start production server
pnpm start

Common Patterns

1. Project Structure

project-name/
├── src/
│   ├── app/              # Next.js app directory
│   ├── components/       # React components
│   ├── lib/              # Utility functions
│   ├── hooks/            # Custom React hooks
│   ├── types/            # TypeScript types
│   └── styles/           # Global styles
├── public/               # Static assets
├── prisma/               # Database schema
├── tests/                # Test files
└── package.json

2. Component Organization

// Atomic design pattern
components/
├── atoms/        # Basic building blocks (buttons, inputs)
├── molecules/    # Simple combinations (search bar, card)
├── organisms/    # Complex components (header, sidebar)
├── templates/    # Page layouts
└── pages/        # Full pages

3. API Integration

// Using React Query
import { useQuery } from '@tanstack/react-query';

function Users() {
  const { data, isLoading, error } = useQuery({
    queryKey: ['users'],
    queryFn: () => fetch('/api/users').then(res => res.json())
  });
}

4. State Management

// Using Zustand
import create from 'zustand';

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 }))
}));

5. Form Handling

// Using React Hook Form + Zod
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';

const schema = z.object({
  email: z.string().email(),
  password: z.string().min(8)
});

function LoginForm() {
  const { register, handleSubmit } = useForm({
    resolver: zodResolver(schema)
  });
}

6. Authentication Pattern

// Using NextAuth.js
import { signIn, signOut, useSession } from 'next-auth/react';

function AuthButton() {
  const { data: session } = useSession();

  if (session) {
    return <button onClick={() => signOut()}>Sign out</button>;
  }
  return <button onClick={() => signIn()}>Sign in</button>;
}

7. SEO Optimization

// Using Next.js metadata
export const metadata = {
  title: 'Page Title',
  description: 'Page description',
  openGraph: {
    title: 'OG Title',
    description: 'OG Description',
    images: ['/og-image.jpg']
  }
};

AI-Assisted Development

Recommended AI Tools

  1. GitHub Copilot - AI pair programmer

    • Component generation
    • Boilerplate code
    • API integration code

  2. Claude Code - AI coding assistant

    • Architecture design
    • Code refactoring
    • Bug fixing

  3. Cursor - AI-powered IDE

    • Full-stack development
    • Multi-file editing
    • Documentation generation

  4. v0.dev - UI component generator

    • Generate shadcn/ui components
    • Rapid prototyping

AI Development Workflow

  1. Planning Phase

    • Use AI to design system architecture
    • Generate user stories and requirements
    • Create database schema

  2. Development Phase

    • AI-assisted component creation
    • Auto-complete for repetitive code
    • API integration scaffolding

  3. Testing Phase

    • Generate unit tests
    • Create E2E test scenarios
    • Performance optimization suggestions

  4. Documentation Phase

    • Auto-generate JSDoc comments
    • Create README files
    • API documentation

Best Practices

Code Quality

  • Use TypeScript for type safety
  • Follow ESLint and Prettier configurations
  • Write comprehensive tests (unit, integration, E2E)
  • Maintain code coverage above 80%

Performance

  • Implement code splitting and lazy loading
  • Optimize images (next/image, WebP format)
  • Use server-side rendering where appropriate
  • Implement caching strategies
  • Monitor Core Web Vitals

Security

  • Validate all user inputs
  • Sanitize data before database operations
  • Use environment variables for secrets
  • Implement CORS properly
  • Keep dependencies updated

Accessibility

  • Use semantic HTML
  • Implement keyboard navigation
  • Add ARIA labels where needed
  • Ensure color contrast ratios
  • Test with screen readers

SEO

  • Use proper meta tags
  • Implement structured data
  • Create sitemap.xml
  • Optimize page load times
  • Use semantic HTML

Testing

Unit Testing

# Run unit tests
pnpm test

# With coverage
pnpm test:coverage

E2E Testing

# Run Playwright tests
pnpm test:e2e

# Run in UI mode
pnpm test:e2e:ui

Visual Regression Testing

# Run visual tests
pnpm test:visual

Contributing

Contributions are welcome! Please see the main CONTRIBUTING.md for guidelines.

Adding a New Project

  1. Create project directory in appropriate category
  2. Include comprehensive README.md
  3. Add example environment variables (.env.example)
  4. Write tests
  5. Update this README with project description

Resources

Documentation

Learning Resources

Tools

License

All projects in this directory are licensed under the MIT License - see the LICENSE file for details.

Related Directories

Note: All projects are for educational and demonstration purposes. Review and customize security configurations before deploying to production.

Last updated: 2025-12-31