CryptoPulse 🚀

A modern, real-time cryptocurrency tracking and analytics application built with React, TypeScript, and Express. Track live crypto prices, create watchlists, set price alerts, and view interactive charts for your favorite digital assets.

✨ Features

• Real-time Price Tracking: Live cryptocurrency price updates via WebSocket
• Interactive Charts: Visualize price history with Chart.js
• Watchlists: Create custom watchlists to track your favorite cryptocurrencies
• Price Alerts: Set up notifications when prices hit your target values
• Dark Mode: Beautiful dark theme powered by Tailwind CSS
• Responsive Design: Optimized for desktop, tablet, and mobile devices
• Market Analytics: View market cap, volume, 24h changes, and more

🛠 Tech Stack

Frontend

• React 18 with TypeScript
• Vite for fast development and optimized builds
• TailwindCSS for styling
• shadcn/ui components (Radix UI primitives)
• TanStack Query for server state management
• Chart.js for data visualization
• Wouter for routing

Backend

• Express.js with TypeScript (ESM)
• PostgreSQL with Drizzle ORM
• WebSocket (ws) for real-time updates
• Passport.js for authentication
• CoinGecko API for cryptocurrency data

📋 Prerequisites

• Node.js 18+ and npm
• PostgreSQL database (recommended: Neon Database free tier)

🚀 Quick Start

1. Clone the Repository

git clone https://github.com/yourusername/CryptoPulse.git
cd CryptoPulse

2. Install Dependencies

npm install

3. Set Up Environment Variables

Create a .env file in the root directory:

DATABASE_URL=postgresql://user:password@host:5432/cryptopulse
PORT=5000
NODE_ENV=development
SESSION_SECRET=your-secret-key-here

See .env.example for detailed configuration options.

4. Initialize Database

Push the database schema:

npm run db:push

5. Run Development Server

npm run dev

Open http://localhost:5000 in your browser.

🌐 Environment Variables

Variable	Description	Required	Default
DATABASE_URL	PostgreSQL connection string	✅ Yes	-
PORT	Server port	❌ No	5000
NODE_ENV	Environment (development or production)	❌ No	development
SESSION_SECRET	Secret key for session encryption	✅ Yes	-

Database Setup (Neon)

1. Sign up at neon.tech
2. Create a new project
3. Copy the connection string
4. Add to your .env file as DATABASE_URL

📦 Build & Deployment

Build for Production

npm run build

This creates:

• dist/public/ - Frontend static assets
• dist/index.js - Backend server bundle

Run Production Build

npm start

🚀 Deploy to Vercel

One-Click Deploy

Manual Deployment

1. Push to GitHub

   git init
   git add .
   git commit -m "Initial commit"
   git remote add origin https://github.com/yourusername/CryptoPulse.git
   git push -u origin main

2. Import to Vercel

   • Go to vercel.com
   • Click "New Project"
   • Import your GitHub repository
   • Vercel will auto-detect the build settings

3. Configure Environment Variables

   In Vercel dashboard → Settings → Environment Variables, add:

   • DATABASE_URL - Your Neon database connection string
   • SESSION_SECRET - A random secret key (generate one)

4. Deploy

   Click "Deploy" and wait for the build to complete!

🗂 Project Structure

CryptoPulse/
├── client/              # React frontend
│   ├── src/
│   │   ├── components/  # React components
│   │   ├── hooks/       # Custom React hooks
│   │   ├── lib/         # Utilities & helpers
│   │   └── pages/       # Page components
│   └── index.html
├── server/              # Express backend
│   ├── index.ts         # Server entry point
│   ├── routes.ts        # API routes
│   ├── storage.ts       # Database abstraction
│   └── vite.ts          # Vite integration
├── shared/              # Shared types & schemas
│   └── schema.ts        # Database schema (Drizzle)
├── package.json
├── vite.config.ts
├── drizzle.config.ts
└── tsconfig.json

🔧 Development Scripts

Command	Description
npm run dev	Start development server
npm run build	Build for production
npm start	Run production server
npm run check	TypeScript type checking
npm run db:push	Push database schema changes

🐛 Troubleshooting

Database Connection Issues

• Verify DATABASE_URL is correct in .env
• Ensure database is running and accessible
• Check firewall/network settings

Build Errors

• Clear node_modules and reinstall: rm -rf node_modules package-lock.json && npm install
• Ensure Node.js version is 18+
• Run npm run check to identify TypeScript errors

Port Already in Use

• Change PORT in .env file
• Kill process using port 5000: npx kill-port 5000

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

This project is licensed under the MIT License.

🙏 Acknowledgments

• CoinGecko API for cryptocurrency data
• shadcn/ui for beautiful UI components
• Neon Database for serverless PostgreSQL

---

Built with ❤️ using React & Express