🚀 Full-stack engineer | ⚛️ React Expert | ☁️ Cloud Enthusiast | 🧠 System Design Thinker
Currently building scalable systems & world-class UIs — with experience across Big Tech and startups.
I'm a passionate software engineer with a track record of delivering high-performance, scalable web apps and backend systems at:
- 🏢 Microsoft – Modernized legacy systems with Kafka, Databricks, and Fluent UI
- 🛒 Amazon – Contributed to the CVAT open-source project and improved UX across internal tools
- 📱 ShareChat – Transformed traditional websites into seamless Progressive Web Apps
- 🌱 Startups – Architected demo platforms, created design systems, and built common NPM libraries for speed and scale
I love working on developer experience, performance optimizations, and bringing product thinking to engineering teams.
✨ Built a reusable design system and network layer using Axios + OpenAPI, accelerating team velocity
📦 Optimized bundle size and app performance across multiple products
🔄 Established CI/CD pipelines and improved DX with automation
📊 Owned feature delivery end-to-end — from PRD to production
🧪 Advocated Agile testing in UI architecture to drive early feedback and faster releases
Frontend: React, Next.js, Tailwind CSS, Redux, Material UI, Fluent UI
Backend: Node.js, Express, Kafka, Databricks, REST APIs
Cloud/Infra: AWS, Docker, CI/CD, OpenAPI, Axios
Tools: GitHub Actions, Postman, Figma, Webpack, Vite
"Good engineers solve problems. Great engineers anticipate them and build for scale."
Let's build something amazing together 🚀
A modern web application that connects developers based on their skills, interests, and project goals. DevTinder Web provides a Tinder-like interface for developers to find and collaborate with other developers on exciting projects.
- 🔄 Tinder-like swiping interface for developers
- 🔍 Advanced filtering based on skills, interests, and location
- 💬 Real-time chat using Socket.IO
- 📊 User profiles with skills and project history
- 🔐 Secure authentication and data protection
- 🎨 Modern, responsive UI with DaisyUI components
- Frontend Framework: React 18
- Build Tool: Vite
- State Management: Redux Toolkit
- Routing: React Router v7
- Styling: Tailwind CSS + DaisyUI
- Real-time Communication: Socket.IO
- API Client: Axios
- Development Tools: ESLint, PostCSS
graph TD
A[devTinder-web] --> B[src]
A --> C[public]
A --> D[my-react-router-app]
subgraph "Source Code (src)"
B --> E[App.jsx]
B --> F[main.jsx]
B --> G[components]
B --> H[utils]
end
subgraph "Components"
G --> I[Profile]
G --> J[Chat]
G --> K[Match]
G --> L[Swiping]
end
subgraph "Utils"
H --> M[auth]
H --> N[api]
H --> O[utils]
end
Here's a detailed breakdown of the project structure:
devTinder-web/
├── src/ # Source code directory
│ ├── components/ # Reusable React components
│ │ ├── Profile/ # User profile components
│ │ ├── Chat/ # Chat interface components
│ │ ├── Match/ # Matching system components
│ │ ├── Swiping/ # Tinder-like swiping interface
│ │ └── Layout/ # Layout components
│ ├── utils/ # Utility functions and helpers
│ │ ├── api/ # API client and services
│ │ ├── auth/ # Authentication utilities
│ │ ├── socket/ # Socket.IO client configuration
│ │ └── constants/ # Application constants
│ ├── App.jsx # Main application component
│ └── main.jsx # Entry point of the application
├── public/ # Static assets
├── my-react-router-app/ # React Router configuration
├── package.json # Project dependencies and scripts
├── vite.config.js # Vite configuration
├── tailwind.config.js # Tailwind CSS configuration
├── postcss.config.js # PostCSS configuration
└── eslint.config.js # ESLint configuration
Each directory serves a specific purpose:
src/: Contains all the source code of the applicationcomponents/: Reusable React components organized by featureutils/: Utility functions and helper modules
public/: Static assets like images, fonts, and faviconmy-react-router-app/: Contains React Router configuration and related files- Configuration files: Various configuration files for build tools and development environment
- Node.js (v18 or higher)
- npm or yarn
- Clone the repository:
git clone https://github.com/yashpreetbathla/devTinder-web.git
cd devTinder-web- Install dependencies:
npm install- Start the development server:
npm run dev- Open your browser and navigate to
http://localhost:5173
To build the application for production:
npm run buildThe production build will be available in the dist directory.
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Thanks to the React and Vite communities for their amazing tools
- Special thanks to all contributors who have helped improve this project
For support, please open an issue in the GitHub repository or contact the maintainers directly.
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- @vitejs/plugin-react uses Babel for Fast Refresh
- @vitejs/plugin-react-swc uses SWC for Fast Refresh