A modern, real‑time developer networking frontend. LinkSpark helps engineers discover peers, exchange connection requests, and chat with instant notifications. This repository contains the React frontend; the backend API is expected at VITE_API_URL.
- Backend Repo: https://github.com/ayushhh101/linksparkBE
- Stack: React 18, Vite, Redux Toolkit, Tailwind CSS, Socket.IO client, Axios
- Project Overview
- Features
- Screenshots
- Tech Stack
- Architecture
- Project Structure
- UI/UX Highlights
- Getting Started
- Pages & Routes
- Design System
- Security (Frontend)
- Performance
- Error Handling
- Developer
LinkSpark is a full‑stack developer networking platform focused on real‑time interactions: discover developers, connect via requests, and chat with instant, in‑app notifications. Target users are students and early‑career engineers who want a faster, intent‑driven alternative to traditional professional networks.
Key value proposition:
- Real‑time, lightweight interactions (requests, messages, notifications)
- Clean, responsive UI optimized for quick discovery and connection
- Direct, focused communication for collaboration
-
Authentication
- Signup/Login with client-side validation
- Protected routes with redirect to intended page
- Cookie-based session support
-
User Profiles
- Profile view/edit with comprehensive fields
- Full profile page with tabs (About, Skills, Projects, Experience)
- Profile completion progress tracking
-
Discovery Feed
- Swipe-based discovery interface with card animations
- Like/pass actions with smooth transitions
- Smart feed algorithm integration
-
Connections & Requests
- View connections with online/offline presence
- Real-time presence indicators
- Manage incoming requests (accept/reject)
-
Real-time Chat
- One-on-one messaging with Socket.IO
- WebRTC video calling with peer-to-peer connections
- Typing indicators with auto-timeout
- Message delivery notifications via Socket.IO
- Online/offline status and last seen timestamps
-
Real-time Notifications
- Socket connection management with cleanup
- Toast notifications for instant alerts
- Notification Center with unread badges
- Connection requests, acceptances, and new message notifications
-
Search
- Advanced profile search with filters
- Real-time search results
-
Responsive UI
- Mobile-friendly navbar, layout, and forms
- Glassmorphism effects with gradient backgrounds
Future Enhancements :
- Advanced search filters and ranking
- CI/CD, tests, and production backend integration
| Login | Feed | Full Profile | Edit Profile |
|---|---|---|---|
 |
 |
 |
 |
| Connections | Requests | Chat | Search |
|---|---|---|---|
 |
 |
 |
 |
- React 18 with React Router
- Redux Toolkit (state management)
- Tailwind CSS + DaisyUI
- Axios (API)
- Socket.IO client (real-time notifications)
- React Toastify (toasts)
- Lucide/React Icons (icons)
- Vite 6 (build/dev)
- react, react-dom, react-router-dom
- @reduxjs/toolkit, react-redux
- axios
- socket.io-client
- react-toastify
- tailwindcss, daisyui, postcss, autoprefixer
- @heroicons/react, heroicons, lucide-react, react-icons
- gsap
- eslint (+ react, react-hooks plugins)
- vite, @vitejs/plugin-react
- Component-based UI (src/components)
- Redux slices for domains:
- user (utils/userSlice.js)
- feed (utils/feedSlice.js)
- connections (utils/connectionSlice.js)
- requests (utils/requestSlice.js)
- notifications (utils/addNotification.js slice)
- Utilities:
- constants (utils/constants.js) for API base URL via Vite env
- error handling (utils/errorHandler.js)
- socket creator (utils/socket.js) for Socket.IO connection
- Socket lifecycle:
- Auth-gated connect/disconnect in NotificationListener.jsx
- Event subscriptions for message/connection events
- Routing:
- App.jsx defines routes with ProtectedRoute guard
src/
├── components/ # React components
│ ├── Navbar.jsx # Navigation, unread badge, logout
│ ├── Feed.jsx # Discovery feed
│ ├── UserCard.jsx # Profile cards + connect actions
│ ├── Chat.jsx # Messaging UI
│ ├── Connections.jsx # Network management
│ ├── Requests.jsx # Incoming connection requests
│ ├── Profile.jsx # Profile editor wrapper
│ ├── EditProfile.jsx # Edit form
│ ├── FullProfilePage.jsx # Detailed profile view
│ ├── NotificationCenter.jsx # In-app notifications list
│ ├── NotificationListener.jsx# Socket listener and dispatch
│ ├── ProfileSearch.jsx # Search UI
│ ├── Body.jsx # Layout (Navbar/Outlet/Footer)
│ └── Footer.jsx
├── utils/ # Utilities and Redux slices
│ ├── userSlice.js # User auth state
│ ├── feedSlice.js # Feed state
│ ├── connectionSlice.js # Connections state
│ ├── requestSlice.js # Requests state
│ ├── addNotification.js # Notifications slice + actions
│ ├── socket.js # Socket.io client setup
│ ├── errorHandler.js # Central error messaging
│ └── constants.js # BASE_URL from env
├── App.jsx # Routes with ProtectedRoute
├── main.jsx # App bootstrap
└── index.css / App.css # Global styles
- Modern gradient backgrounds (cyan → teal)
- Glassmorphism via translucent panels and backdrop blur
- Smooth transitions and hover states
- Responsive, mobile-first layouts
- Consistent primary color (#26CAE4)
- Accessible form labels and ARIA on interactive items
- Loading spinners and error toasts
- Node.js 18+ (Vite 6)
- npm (or pnpm/yarn)
git clone https://github.com/yourname/linkspark-frontend.git
cd linkspark-frontend
npm install
Create a .env file at the project root:
VITE_API_URL=https://your-backend-url
The app reads the API base URL via import.meta.env.VITE_API_URL (see utils/constants.js). Cookies are sent with requests via Axios withCredentials: true.
npm run dev
npm run build
npm run preview
- Socket.IO client connection management with proper cleanup (NotificationListener.jsx)
- In-app toasts for message and connection events
- Typing indicator state scaffolding in Chat.jsx
- Presence display on Connections (onlineUserIds state)
- Redux Toolkit slices for auth, requests, connections, feed, notifications
- Protected routes reading from a single, standardized selector:
state.user.user - Optimistic UI patterns for request review (accept/reject) ready to integrate with API
/login— Authentication/feed— Discover developers/profile— Edit profile/profile/:userId— Full profile view/connections— Your network/requests— Incoming requests/search— Search profiles/notifications— Activity center/chat/:targetUserId— Messaging
- Primary:
#26CAE4(cyan) - Gradients: cyan‑50 → teal‑50
- Typography: system stack
- Spacing: 8px scale
- Radius: 8px–24px components
- Protected routes (utils/ProtectedRoute.jsx)
- Cookie-based session usage via
withCredentials - Client-side input validation on auth forms
- CORS/auth must be configured on backend (same-site, CSRF, rate limits)
- Vite fast dev/build
- Ready for React.lazy code-splitting on heavy routes (e.g., Chat, FullProfilePage)
- Debounced typing indicator logic supported in Chat (state scaffolding)
- Toast deduping and minimal re-renders via Redux slices
- Central error mapper (utils/errorHandler.js)
- Toast notifications (react-toastify)
- Fallback empty and loading states across pages
- Console-safe logging in catch paths
Contributions are welcome. Please:
- Open an issue for discussion
- Keep PRs focused and small
- Follow existing linting/style
Ayush Sawant - Full Stack Developer
- LinkedIn: www.linkedin.com/in/ayush-sawant28
- Email: ayushsawant28112005@gmail.com
Note: This is the frontend repository. The backend (auth, connections, chat persistence, notifications API) is expected at the URL provided via VITE_API_URL.