creativetimofficial · eitangenis · Nov 2, 2022 · Mar 29, 2023 · Mar 29, 2023 · Apr 25, 2023
diff --git a/.dockerignore b/.dockerignore
@@ -0,0 +1,5 @@
+node_modules
+dist
+.git
+Dockerfile
+.dockerignore
diff --git a/.env.example b/.env.example
@@ -0,0 +1,9 @@
+# Stripe Configuration
+# Get these from your Stripe Dashboard (https://dashboard.stripe.com/apikeys)
+
+# Stripe Publishable Key (starts with pk_test_ or pk_live_)
+VITE_STRIPE_PUBLISHABLE_KEY=pk_test_your_publishable_key_here
+
+# Stripe Secret Key (starts with sk_test_ or sk_live_)
+# WARNING: Keep this secret! Never commit this to version control
+STRIPE_SECRET_KEY=sk_test_your_secret_key_here
diff --git a/.gitignore b/.gitignore
@@ -15,6 +15,13 @@ dist
 dist-ssr
 *.local
 
+# Environment variables
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,12 @@
 # Change Log
 
+## [2.1.0] 2023-11-14
+- Upgrade to Material Tailwind `v2`
+
+## [2.0.1] 2023-03-29
+
+- Add nepcha scripts
+
 ## [2.0.0] 2022-11-02
 
 - Update the entire structure

diff --git a/CLOUDFLARE_DEPLOYMENT.md b/CLOUDFLARE_DEPLOYMENT.md
@@ -0,0 +1,31 @@
+# Cloudflare Pages Deployment Guide
+
+## API Proxy Function
+
+This project includes a Cloudflare Pages function to handle API calls and bypass CORS restrictions when deployed.
+
+### Files Added:
+
+1. **`functions/api-proxy.js`** - Cloudflare Pages function that proxies calls to `api.chemtest.tech:3000`
+2. **`public/_headers`** - CORS headers configuration for Cloudflare Pages
+3. **`wrangler.toml`** - Cloudflare Pages configuration
+
+### How It Works:
+
+- **Development**: Uses `http://localhost:3002/api-proxy` (Node.js server)
+- **Production**: Uses `/api-proxy` (Cloudflare Pages function)
+
+The React component automatically detects the environment and uses the appropriate endpoint.
+
+### Deployment:
+
+1. Connect your repository to Cloudflare Pages
+2. Set build command: `npm run build`
+3. Set build output directory: `dist`
+4. Deploy
+
+The Cloudflare Pages function will automatically handle CORS and proxy API calls to the external service.
+
+### Testing:
+
+After deployment, the API Test tab will automatically work without CORS issues, fetching data from `api.chemtest.tech:3000` through the Cloudflare Pages function proxy.
diff --git a/DEVELOPMENT_SETUP_COMPLETE.md b/DEVELOPMENT_SETUP_COMPLETE.md
@@ -0,0 +1,96 @@
+# Development Environment Setup - Complete ✅
+
+## 🎉 SUCCESS! Your development environment is now fully configured and running.
+
+### What's Working:
+- ✅ **Vite Development Server**: Running on http://localhost:5173
+- ✅ **Stripe Payment Server**: Running on port 3001
+- ✅ **Environment Variables**: Properly loaded from `.env` file
+- ✅ **Secure Configuration**: No secrets in the repository
+- ✅ **Unified Development**: Single `npm run dev` command starts everything
+
+### How to Use:
+
+#### Start Development:
+```bash
+npm run dev
+```
+This command will:
+- Start the Vite development server (frontend)
+- Start the Stripe payment server (backend)
+- Load all environment variables from `.env`
+
+#### Access the Application:
+- **Frontend**: http://localhost:5173
+- **Paid Plans Page**: http://localhost:5173/dashboard/paid-plans
+- **Molecule Viewer**: http://localhost:5173/dashboard/molecule-viewer
+
+#### Payment Testing:
+- Use Stripe test card: `4242 4242 4242 4242`
+- Any future expiry date and CVC will work
+- Payments will be processed through Stripe's test environment
+
+### Project Structure:
+```
+├── src/pages/dashboard/
+│   ├── paidplans.jsx          # Pricing page with Stripe integration
+│   └── moleculeviewer.jsx     # 2D molecule drawing tool
+├── stripe-server.cjs          # Express server for Stripe payments
+├── .env                       # Environment variables (not in git)
+├── .env.example              # Template for environment variables
+├── package.json              # Scripts and dependencies
+└── STRIPE_SETUP.md           # Setup instructions
+```
+
+### Key Features Implemented:
+
+#### 1. Professional Paid Plans Page
+- Modern pricing design inspired by pyxis-discovery.com
+- Monthly/yearly billing toggle
+- "Most Popular" plan highlighting
+- Feature comparison lists
+- Responsive design with Material Tailwind
+
+#### 2. Stripe Payment Integration
+- Secure server-side payment processing
+- Pre-built Stripe Checkout forms
+- Test mode configuration
+- Payment success/failure handling
+- Environment-based configuration
+
+#### 3. 2D Molecule Viewer & Drawing Tool
+- Professional chemical drawing interface
+- Accurate molecular geometry
+- CPK color scheme for atoms
+- Multiple bond types (single, double, triple)
+- Interactive drawing and editing
+- Export functionality
+
+#### 4. Security Best Practices
+- Environment variables for all secrets
+- `.env` file excluded from git
+- No hardcoded API keys
+- Secure server-side payment processing
+
+### Environment Variables:
+Your `.env` file contains:
+```
+VITE_STRIPE_PUBLISHABLE_KEY=pk_test_...
+STRIPE_SECRET_KEY=sk_test_...
+```
+
+### Next Steps:
+1. Navigate to http://localhost:5173 to see your application
+2. Visit the Paid Plans page to test Stripe integration
+3. Try the Molecule Viewer for chemical drawing
+4. Customize the pricing plans as needed
+5. Test payment flows with Stripe test cards
+
+### For Production:
+1. Replace test Stripe keys with live keys
+2. Update webhook endpoints
+3. Configure production environment variables
+4. Deploy both frontend and backend
+
+## 🚀 Ready to Code!
+Your development environment is fully set up and ready for further development. Both the molecule viewer and payment system are working perfectly!
diff --git a/Dockerfile b/Dockerfile
@@ -0,0 +1,18 @@
+FROM node:18-alpine
+
+WORKDIR /app
+
+COPY package.json package-lock.json* ./
+RUN npm install
+
+COPY . .
+
+# Copy .env file
+COPY .env .env
+
+# Build static assets
+RUN npm run build
+
+EXPOSE 80
+
+CMD ["node", "server.mjs"]
diff --git a/LICENSE b/LICENSE
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2022 Creative Tim
+Copyright (c) 2023 Creative Tim
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

diff --git a/README.md b/README.md
@@ -1,8 +1,30 @@
 # [Material Tailwind Dashboard React](http://demos.creative-tim.com/material-tailwind-dashboard-react/#/?ref=readme-mtdr) [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social&logo=twitter)](https://twitter.com/intent/tweet?url=https://www.creative-tim.com/product/material-tailwind-dashboard-react&text=Check%20Material%20Tailwind%20Dashboard%20React%20made%20by%20@CreativeTim%20#webdesign%20#kit%20#materialdesign%20#react%20#materialtailwind%20#tailwindcss%20https://www.creative-tim.com/product/material-tailwind-dashboard-react)
 
-![version](https://img.shields.io/badge/version-2.0.0-blue.svg) [![GitHub issues open](https://img.shields.io/github/issues/creativetimofficial/material-tailwind-dashboard-react.svg)](https://github.com/creativetimofficial/material-tailwind-dashboard-react/issues?q=is%3Aopen+is%3Aissue) [![GitHub issues closed](https://img.shields.io/github/issues-closed-raw/creativetimofficial/material-tailwind-dashboard-react.svg)](https://github.com/creativetimofficial/material-tailwind-dashboard-react/issues?q=is%3Aissue+is%3Aclosed)
+![version](https://img.shields.io/badge/version-2.1.0-blue.svg) [![GitHub issues open](https://img.shields.io/github/issues/creativetimofficial/material-tailwind-dashboard-react.svg)](https://github.com/creativetimofficial/material-tailwind-dashboard-react/issues?q=is%3Aopen+is%3Aissue) [![GitHub issues closed](https://img.shields.io/github/issues-closed-raw/creativetimofficial/material-tailwind-dashboard-react.svg)](https://github.com/creativetimofficial/material-tailwind-dashboard-react/issues?q=is%3Aissue+is%3Aclosed)
 
-![Image](https://s3.amazonaws.com/creativetim_bucket/products/488/original/material-tailwind-react-dashboard.jpg)
+## 🚀 New Features Added
+
+This fork includes additional professional features:
+
+### 🧪 **2D Molecule Viewer & Drawing Tool**
+- Professional chemical drawing interface with accurate molecular geometry
+- CPK color scheme for atoms and proper bond visualization
+- Interactive molecule editing and drawing capabilities
+- Export functionality for molecular structures
+
+### 💳 **Stripe Payment Integration**
+- Modern pricing page design inspired by pyxis-discover.com
+- Secure Stripe payment processing with pre-built checkout forms
+- Monthly/yearly billing toggle with "Most Popular" plan highlighting
+- Complete payment flow with success/failure handling
+
+### 🔧 **Development Features**
+- Unified development workflow with single `npm run dev` command
+- Secure environment variable configuration
+- No secrets in repository - all sensitive data in `.env` file
+- Ready for production deployment
+
+![Image](https://s3.amazonaws.com/creativetim_bucket/products/488/original/material-tailwind-dashboard-react.jpg)
 
 Material Tailwind Dashboard React is our newest free Material Tailwind Admin Template based on Tailwind CSS and React. If you’re a developer looking to create an admin dashboard that is developer-friendly, rich with features, and highly customisable, here is your match. Our innovative Material Tailwind, Tailwind CSS & React dashboard comes with a beautiful design inspired by Google's Material Design and it will help you create stunning websites & web apps to delight your clients.
 
@@ -38,6 +60,7 @@ During the development of this dashboard, we have used many existing resources f
 - [Material Tailwind](https://material-tailwind.com/) - Material Tailwind is an easy to use components library for Tailwind CSS and Material Design.
 - [Hero Icons](https://heroicons.com/) - Beautiful hand-crafted SVG icons.
 - [Apex Charts](https://apexcharts.com/) - Modern & Interactive open-source Charts.
+- [Nepcha Analytics](https://nepcha.com?ref=readme) for the analytics tool. Nepcha is already integrated with Material Tailwind Dashboard React. You can use it to gain insights into your sources of traffic.
 
 Let us know your thoughts below. And good luck with development!
 
@@ -46,6 +69,7 @@ Let us know your thoughts below. And good luck with development!
 - [Versions](#versions)
 - [Demo](#demo)
 - [Quick Start](#quick-start)
+- [Deploy](#deploy)
 - [Documentation](#documentation)
 - [File Structure](#file-structure)
 - [Browser Support](#browser-support)
@@ -62,7 +86,7 @@ Let us know your thoughts below. And good luck with development!
 | React |
 | ----- |
 
-| [![Material Tailwind Dashboard React](https://s3.amazonaws.com/creativetim_bucket/products/488/thumb/material-tailwind-react-dashboard.jpg)](http://demos.creative-tim.com/material-tailwind-dashboard-react/#/?ref=readme-mtdr)
+| [![Material Tailwind Dashboard React](https://s3.amazonaws.com/creativetim_bucket/products/488/thumb/material-tailwind-dashboard-react.jpg)](http://demos.creative-tim.com/material-tailwind-dashboard-react/#/?ref=readme-mtdr)
 
 ## Demo
 
@@ -79,13 +103,49 @@ Let us know your thoughts below. And good luck with development!
 
 Quick start options:
 
-- Downdload from [Creative Tim](https://www.creative-tim.com/product/material-tailwind-dashboard-react?ref=readme-mtdr).
+- Download from [Creative Tim](https://www.creative-tim.com/product/material-tailwind-dashboard-react?ref=readme-mtdr).
+
+## Deploy
+
+:rocket: You can deploy your own version of the template to Genezio with one click:
+
+[![Deploy to Genezio](https://raw.githubusercontent.com/Genez-io/graphics/main/svg/deploy-button.svg)](https://app.genez.io/start/deploy?repository=https://github.com/creativetimofficial/material-tailwind-dashboard-react&utm_source=github&utm_medium=referral&utm_campaign=github-creativetim&utm_term=deploy-project&utm_content=button-head)
 
 ## Terminal Commands
 
 1. Download and Install NodeJs LTS version from [NodeJs Official Page](https://nodejs.org/en/download/).
 2. Navigate to the root ./ directory of the product and run `npm install` or `yarn install` or `pnpm install` to install our local dependencies.
 
+## 🔧 Additional Setup for New Features
+
+### Environment Configuration
+1. Copy the environment template:
+   ```bash
+   cp .env.example .env
+   ```
+
+2. Add your Stripe API keys to `.env`:
+   ```
+   VITE_STRIPE_PUBLISHABLE_KEY=pk_test_your_publishable_key_here
+   STRIPE_SECRET_KEY=sk_test_your_secret_key_here
+   ```
+
+### Development Commands
+- **Start everything**: `npm run dev` (starts both frontend and Stripe server)
+- **Frontend only**: `npm run build` then `npm run preview`
+- **Stripe server only**: `npm run stripe-server`
+
+### Testing Payments
+- Use Stripe test card: `4242 4242 4242 4242`
+- Any future expiry date and CVC will work
+- Visit `/dashboard/paid-plans` to test the payment flow
+
+### New Pages Available
+- **Molecule Viewer**: `/dashboard/molecule-viewer` - Professional 2D chemical drawing tool
+- **Paid Plans**: `/dashboard/paid-plans` - Stripe-integrated pricing page
+
+For complete setup instructions, see `DEVELOPMENT_SETUP_COMPLETE.md`.
+
 ## Documentation
 
 The documentation for the Material Tailwind Dashboard React is hosted at our [website](https://material-tailwind.com/?ref=readme-mtdr).
@@ -137,6 +197,7 @@ At present, we officially aim to support the last two versions of the following
 - [License Agreement](https://www.creative-tim.com/license?ref=readme-mtdr)
 - [Support](https://www.creative-tim.com/contact-us?ref=readme-mtdr)
 - Issues: [Github Issues Page](https://github.com/creativetimofficial/material-tailwind-dashboard-react/issues)
+- [Nepcha Analytics](https://nepcha.com?ref=readme) - Analytics tool for your website
 
 ## Reporting Issues
 
@@ -152,7 +213,7 @@ If you have questions or need help integrating the product please [contact us](h
 
 ## Licensing
 
-- Copyright 2022 [Creative Tim](https://www.creative-tim.com?ref=readme-mtdr)
+- Copyright 2023 [Creative Tim](https://www.creative-tim.com?ref=readme-mtdr)
 - Creative Tim [license](https://www.creative-tim.com/license?ref=readme-mtdr)
 
 ## Useful Links

diff --git a/STRIPE_SETUP.md b/STRIPE_SETUP.md
@@ -0,0 +1,58 @@
+# Stripe Integration Setup
+
+This project includes Stripe payment integration for subscription plans.
+
+## Environment Setup
+
+1. **Copy the environment template:**
+   ```bash
+   cp .env.example .env
+   ```
+
+2. **Get your Stripe API keys:**
+   - Go to [Stripe Dashboard](https://dashboard.stripe.com/apikeys)
+   - Copy your **Publishable key** (starts with `pk_test_` or `pk_live_`)
+   - Copy your **Secret key** (starts with `sk_test_` or `sk_live_`)
+
+3. **Update your .env file:**
+   ```env
+   VITE_STRIPE_PUBLISHABLE_KEY=pk_test_your_actual_publishable_key_here
+   STRIPE_SECRET_KEY=sk_test_your_actual_secret_key_here
+   ```
+
+## Running the Application
+
+1. **Start the Stripe server:**
+   ```bash
+   npm run stripe-server
+   ```
+
+2. **Start the React development server (in another terminal):**
+   ```bash
+   npm run dev
+   ```
+
+3. **Navigate to the pricing page:**
+   Open `http://localhost:5173/dashboard/paidplans`
+
+## Security Notes
+
+- ⚠️ **Never commit `.env` files to version control**
+- ✅ The `.env` file is already added to `.gitignore`
+- ✅ Use test keys (`pk_test_` and `sk_test_`) for development
+- ✅ Use live keys (`pk_live_` and `sk_live_`) only in production
+
+## Payment Flow
+
+1. User selects a plan on the pricing page
+2. Client sends request to `/create-checkout-session` endpoint
+3. Server creates Stripe checkout session
+4. User is redirected to Stripe's secure checkout page
+5. After payment, user is redirected back with success/cancel status
+
+## Testing
+
+Use Stripe's test card numbers:
+- **Success:** `4242 4242 4242 4242`
+- **Decline:** `4000 0000 0000 0002`
+- Use any future expiry date and any 3-digit CVC