This is a modern full-stack portfolio web application built with React and Node.js. The frontend features a responsive, single-page portfolio showcasing projects, skills, about information, and contact details with smooth scrolling navigation. The backend provides a REST API foundation with user management capabilities and uses PostgreSQL for data persistence through Drizzle ORM.
Our latest showcase includes high-impact projects with sophisticated architectures:
- PrimeBot: A multi-sharded microservices Discord bot with a centralized command handler and persistent MySQL storage.
- PrimeBot Dashboard: A React-based management interface utilizing a micro-frontend approach for modular dashboard features.
- Database Dashboard: A client-server architecture utilizing direct PostgreSQL connection protocols for real-time visualization.
- Sky Bot & Hosting Platform: Advanced automation and infrastructure tools for the Discord ecosystem.
- Yuboraj Roy: Lead Developer and Architect.
- Framework: React 18 with TypeScript using Vite as the build tool
- Styling: Tailwind CSS with custom CSS variables for theming
- UI Components: Radix UI primitives with shadcn/ui component library for consistent design
- State Management: TanStack Query (React Query) for server state management
- Routing: Wouter for lightweight client-side routing
- Theme System: Custom theme provider supporting light/dark modes with system preference detection
- Runtime: Node.js with Express.js framework
- Language: TypeScript with ES modules
- API Design: RESTful API structure with route registration system
- Development: Hot reload with Vite middleware integration in development mode
- Error Handling: Centralized error handling middleware with proper HTTP status codes
- Database: PostgreSQL with connection pooling
- ORM: Drizzle ORM for type-safe database operations
- Migration: Drizzle Kit for schema migrations
- Session Storage: PostgreSQL-backed session storage with connect-pg-simple
- Development Storage: In-memory storage implementation for development/testing
- Session Management: Express sessions with PostgreSQL storage
- User Schema: Basic user model with username/password authentication
- Validation: Zod schemas for runtime type validation and form validation
- Development: Separate client and server processes with hot reload
- Production Build: Client assets built with Vite, server bundled with esbuild
- Asset Serving: Static file serving with development/production mode handling
- Environment: Environment-based configuration with proper NODE_ENV handling
- @neondatabase/serverless: Neon PostgreSQL serverless driver for database connectivity
- drizzle-orm & drizzle-zod: Type-safe ORM with Zod integration for schema validation
- @tanstack/react-query: Server state management and caching
- wouter: Lightweight routing library for React
- @radix-ui/*: Comprehensive set of unstyled, accessible UI primitives
- tailwindcss: Utility-first CSS framework with custom configuration
- class-variance-authority: Utility for creating variant-based component APIs
- lucide-react: Icon library for consistent iconography
- vite: Fast build tool with hot module replacement
- tsx: TypeScript execution environment for development
- esbuild: Fast JavaScript bundler for production builds
- @replit/vite-plugin-runtime-error-modal: Replit-specific development error handling
- react-hook-form: Performant forms with minimal re-renders
- @hookform/resolvers: Validation resolver for various schema libraries
- zod: TypeScript-first schema validation library
- date-fns: Modern JavaScript date utility library
- clsx & tailwind-merge: Utility functions for conditional CSS classes
- nanoid: URL-safe unique string ID generator
To run this project, you need to set up the following environment variables and secrets in your Replit environment.
These are sensitive credentials that should be added through the Secrets tab (the padlock icon) in the Replit sidebar.
| Secret Name | Description |
|---|---|
DATABASE_URL |
Your PostgreSQL connection string (e.g., postgresql://user:password@host:port/dbname). |
SESSION_SECRET |
A long, random string used to sign session cookies for authentication. |
These are usually provided automatically by the Replit environment, but ensure they are present if you are moving the project elsewhere.
| Variable Name | Description |
|---|---|
NODE_ENV |
Set to development for local testing or production for live deployment. |
PORT |
The port the server listens on (defaults to 5000 in our setup). |
- Open the Secrets Tool: Click on the "Secrets" icon (padlock) in the left-hand sidebar of your Replit workspace.
- Add DATABASE_URL:
- Key:
DATABASE_URL - Value: Paste your PostgreSQL connection string.
- Key:
- Add SESSION_SECRET:
- Key:
SESSION_SECRET - Value: Enter a secure random string (e.g.,
3f8a9c2b7d...).
- Key:
- Click "Add new secret" for each one.
- Restart the Application: Once added, Replit will automatically make these available to your app. You may need to click the "Run" button again to ensure the new values are loaded.
- Security Enhancements: Integrated Cloudflare Turnstile with manual verification to prevent bot submissions while maintaining a smooth user experience.
- Improved Feedback System: Implemented a new emerald green notification system for successful user actions (message sent, login, project request), optimized for both mobile and desktop visibility.
- Mobile Optimization: Fixed notification positioning for mobile devices, ensuring critical feedback is always visible at the top-center of the screen.
- Local Development Guide: Added a dedicated guide (
vs.md) for setting up the project locally in VS Code.