🌐 Digital Revolution - E-Commerce Platform

A comprehensive e-commerce platform dedicated to bridging the digital divide through technology education and community empowerment. Built with modern web technologies and designed to support STEM education initiatives.

🎯 Mission Statement

Digital Revolution is a foundation committed to creating pathways from digital exclusion to STEM opportunities. We believe technology should serve democratic values and create opportunities for all communities. Our platform sells products where 50% of profits go directly to digital equity and STEM education initiatives, ensuring every purchase contributes to closing the digital divide.

Our Impact Areas:

Digital Literacy: Empowering communities with essential technology skills
STEM Education: Creating opportunities in Science, Technology, Engineering, and Mathematics
Community Building: Fostering inclusive technology ecosystems
Democratic Values: Ensuring technology serves the public good

🚀 Getting Started

Prerequisites

Node.js 18+
npm, yarn, pnpm, or bun
MySQL database
Stripe account for payments
Printful account for product fulfillment
Resend account for email services

Installation

Clone the repository

git clone https://github.com/yourusername/digital-revolution.git
cd digital-revolution

Install dependencies

npm install
# or
yarn install
# or
pnpm install

Set up environment variables

cp .env.example .env.local

Configure your environment variables

# Database
DATABASE_URL="mysql://username:password@localhost:3306/digital_revolution"

# NextAuth
NEXTAUTH_SECRET="your-secret-key"
NEXTAUTH_URL="http://localhost:3000"
GOOGLE_CLIENT_ID="your-google-client-id"
GOOGLE_CLIENT_SECRET="your-google-client-secret"

# Stripe
STRIPE_SECRET_KEY="sk_test_..."
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY="pk_test_..."

# Printful
DIGITAL_REVOLUTION_API_KEY="your-printful-api-key"

# Resend
RESEND_API_KEY="re_..."

# App URL
NEXT_PUBLIC_APP_URL="http://localhost:3000"

Set up the database

npx prisma generate
npx prisma db push

Run the development server

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 to see the application.

🏗️ Project Structure

digital-revolution/
├── src/
│   ├── app/                          # Next.js App Router
│   │   ├── (pages)/                 # Main pages
│   │   │   ├── about/               # About page
│   │   │   ├── shop/                # Shop pages
│   │   │   │   ├── product/         # Product detail pages
│   │   │   │   └── cart/            # Shopping cart
│   │   │   ├── donate/              # Donation pages
│   │   │   ├── partners/            # Partnership pages
│   │   │   ├── profile/             # User profile
│   │   │   ├── orders/              # Order history
│   │   │   ├── share/               # Social sharing
│   │   │   └── api/                 # API routes
│   │   │       ├── webhooks/        # Webhook handlers
│   │   │       │   ├── stripe/      # Stripe webhooks
│   │   │       │   └── printful/    # Printful webhooks
│   │   │       └── auth/            # Authentication
│   │   ├── globals.css              # Global styles
│   │   └── layout.tsx               # Root layout
│   ├── components/                  # React components
│   │   ├── ui/                      # Reusable UI components
│   │   ├── forms/                   # Form components
│   │   ├── pages/                   # Page-specific components
│   │   └── layout/                  # Layout components
│   ├── contexts/                    # React contexts
│   │   ├── ShopContext.tsx          # Shopping context
│   │   └── ProductContext.tsx       # Product context
│   ├── lib/                         # Utility libraries
│   │   ├── actions.ts               # Server actions
│   │   ├── prisma.ts                # Database client
│   │   ├── stripe.ts                # Stripe client
│   │   ├── resend.ts                # Email client
│   │   ├── utils.ts                 # Utility functions
│   │   └── rateLimiter.ts           # Rate limiting
│   ├── emails/                      # Email templates
│   │   ├── OrderEmails.ts           # Order notifications
│   │   ├── DonationEmails.ts        # Donation emails
│   │   └── PartnersTicketEmail.tsx  # Partnership emails
│   ├── constants/                   # Static data
│   │   └── index.tsx                # All constants
│   └── hooks/                       # Custom React hooks
│       └── useClickOutside.ts       # Click outside detection
├── prisma/                          # Database schema
│   ├── schema.prisma                # Prisma schema
│   └── generated/                   # Generated Prisma client
├── public/                          # Static assets
│   ├── Assets/                      # Images and logos
│   └── videos/                      # Video files
├── .env.example                     # Environment variables template
├── .gitignore                       # Git ignore rules
├── next.config.js                   # Next.js configuration
├── package.json                     # Dependencies
├── tailwind.config.js               # Tailwind CSS configuration
└── tsconfig.json                    # TypeScript configuration

🛠️ Tech Stack

Frontend

Next.js 15 - React framework with App Router
TypeScript - Type-safe JavaScript
Tailwind CSS - Utility-first CSS framework
Lucide React - Icon library
GSAP - Animation library with SplitText
React Email - Email template system

Backend

Next.js API Routes - Server-side API
Prisma - Database ORM
MySQL - Database
NextAuth.js v5 - Authentication
Server Actions - Form handling

External Services

Stripe - Payment processing
Printful - Product fulfillment
Resend - Email delivery
Google OAuth - Authentication

Development Tools

ESLint - Code linting
Prettier - Code formatting
TypeScript - Type checking
Prisma Studio - Database management

🎨 Key Features

E-Commerce

Product Catalog - Dynamic product listings with filtering
Shopping Cart - Persistent cart with guest/user support
Checkout Process - Secure Stripe integration
Order Management - Order tracking and history
Inventory Management - Real-time stock checking

User Experience

Responsive Design - Mobile-first approach
Dark Theme - Modern aesthetic with gradients
Animations - GSAP-powered smooth transitions
Accessibility - WCAG compliant design
Performance - Optimized loading and caching

Content Management

Dynamic Content - Data-driven page generation
Image Carousels - Interactive product galleries
Form Handling - Contact and partnership forms
Email Templates - Professional email communications

Business Features

Donation System - One-time and recurring donations
Partnership Program - Organization collaboration
Social Sharing - Community engagement tools
Analytics - User behavior tracking

🔧 Configuration

Database Schema

The application uses Prisma with MySQL. Key models include:

User - User accounts and authentication
Product - Product catalog and variants
Cart/CartItem - Shopping cart functionality
Order/OrderItem - Order management
Donation - Donation tracking
Subscription - Recurring donations
PartnerTicket - Partnership inquiries

Environment Variables

All sensitive configuration is managed through environment variables. See .env.example for required variables.

Rate Limiting

Built-in rate limiting prevents API abuse and ensures fair usage across all endpoints.

📧 Email System

Templates

Order Confirmation - Purchase confirmations
Shipping Notifications - Order tracking updates
Donation Receipts - Tax-deductible receipts
Partnership Responses - Collaboration confirmations

Delivery

Resend Integration - Reliable email delivery
Template Management - React-based email templates
Responsive Design - Mobile-friendly emails

🚀 Deployment

Vercel (Recommended)

Connect your GitHub repository to Vercel
Configure environment variables in Vercel dashboard
Deploy automatically on push to main branch

Other Platforms

Railway - Full-stack deployment
DigitalOcean - VPS deployment
AWS - Enterprise deployment

🔍 Code Quality & CI/CD

Pre-commit Workflow

Before committing your changes, run the following checks to ensure code quality:

# Run all checks (lint, format check, type check)
npm run check

# Or run individually:
npm run lint          # Check for linting errors
npm run format:check  # Check code formatting
npm run type-check    # Check TypeScript types

Available Scripts

npm run dev - Start development server with Turbopack
npm run build - Build for production
npm run start - Start production server
npm run lint - Run ESLint
npm run lint:fix - Fix auto-fixable ESLint issues
npm run format - Format code with Prettier
npm run format:check - Check code formatting
npm run type-check - Run TypeScript type checking
npm run check - Run all checks (lint + format + type-check)

Automated CI/CD

GitHub Actions automatically runs quality checks on every push and pull request:

ESLint - Checks for code quality and best practices
Prettier - Verifies code formatting consistency
TypeScript - Validates type safety

The CI pipeline runs on:

Push to main or develop branches
Pull requests targeting main or develop branches

Note: You don't need to manually configure GitHub Actions - the workflow file (.github/workflows/ci.yml) is already set up and will run automatically when you push to GitHub.

Fixing Issues

If CI fails, fix the issues locally:

# Fix linting issues
npm run lint:fix

# Fix formatting issues
npm run format

# Check types (fix any TypeScript errors in your code)
npm run type-check

🤝 Contributing

We welcome contributions to Digital Revolution! Please see our contributing guidelines:

Fork the repository
Create a feature branch (git checkout -b feature/amazing-feature)
Make your changes
Run quality checks before committing:
```
npm run check
```
Commit your changes (git commit -m 'Add amazing feature')
Push to your branch (git push origin feature/amazing-feature)
Open a pull request

Important: All pull requests must pass the CI checks (linting, formatting, and type checking) before they can be merged.

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

Printful - Product fulfillment services
Stripe - Payment processing
Vercel - Hosting and deployment
Next.js Team - Amazing React framework
Tailwind CSS - Beautiful utility-first CSS

📞 Contact

Email: clutchdev.apps@gmail.com
Website: Digital Revolution
Mission: Bridging the digital divide through technology education

Made with ❤️ for digital equity

Name		Name	Last commit message	Last commit date
Latest commit History 135 Commits
.cursor		.cursor
.github/workflows		.github/workflows
prisma		prisma
public		public
src		src
.gitignore		.gitignore
.prettierignore		.prettierignore
.prettierrc		.prettierrc
LICENSE		LICENSE
README.md		README.md
auth.ts		auth.ts
convert_fonts.sh		convert_fonts.sh
convert_videos.sh		convert_videos.sh
eslint.config.mjs		eslint.config.mjs
middleware.ts		middleware.ts
next.config.ts		next.config.ts
package-lock.json		package-lock.json
package.json		package.json
postcss.config.mjs		postcss.config.mjs
sentry.edge.config.ts		sentry.edge.config.ts
sentry.server.config.ts		sentry.server.config.ts
tsconfig.json		tsconfig.json

Folders and files

Latest commit

History

Repository files navigation

🌐 Digital Revolution - E-Commerce Platform

🎯 Mission Statement

Our Impact Areas:

🚀 Getting Started

Prerequisites

Installation

🏗️ Project Structure

🛠️ Tech Stack

Frontend

Backend

External Services

Development Tools

🎨 Key Features

E-Commerce

User Experience

Content Management

Business Features

🔧 Configuration

Database Schema

Environment Variables

Rate Limiting

📧 Email System

Templates

Delivery

🚀 Deployment

Vercel (Recommended)

Other Platforms

🔍 Code Quality & CI/CD

Pre-commit Workflow

Available Scripts

Automated CI/CD

Fixing Issues

🤝 Contributing

📄 License

🙏 Acknowledgments

📞 Contact

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages