Welcome to the Frontend Repository of FileHub — a collaborative open-source platform designed to let users ask for help, share files, and respond with solutions in a moderated environment. This is a public collab project aimed at helping developers learn, contribute, and grow together while building something meaningful.
FileHub is a MERN stack platform where:
- Registered users can upload help requests (PDFs, DOCs, Images, etc.) with descriptions
- Other users can submit solutions
- Admins or moderators approve posts before they appear publicly
- Everyone gets a clean, responsive, fast UI to engage with help & solutions
As a frontend collaborator, you’ll:
- Build production-grade React components
- Implement Tailwind CSS and utility-first styling
- Learn route protection using Context & JWT
- Manage state using React hooks and context
- Handle responsive layouts for all screen sizes
- Work on real-world form validations, file previews, modals, and more
✅ Authentication UI (Signup/Login)
✅ File upload forms (drag & drop)
✅ Post feed (approved help requests + solutions)
✅ Role-based dashboard for admins
✅ Public post view with solution thread
✅ Responsive design for mobile/tablet/desktop
✅ Toast notifications and loading states
✅ Animations and UI polish (hover, transitions)
- React.js
- Tailwind CSS
- React Router
- Axios
- Framer/GSAP/AOS/CSS (for animations)
- Redux (Auth and Global State)
- Vite (build tool)
Frontend developers will:
- Collaborate with designers to match UI with Figma
- Implement reusable components
- Handle responsiveness (Tailwind breakpoints)
- Consume backend APIs
- Ensure accessibility and good UX
- Add basic client-side validations
- Protect routes based on login state
Goal: Build page structure, navigation bar, sidebar, routing, and authentication guards.
- Setup React Router routes
- Create layout wrappers (PublicLayout, AuthLayout, AdminLayout)
- Implement protected routes using
AuthContext
Goal: Design and implement reusable, styled components from Figma.
- Buttons, Inputs, Cards, Modals, Tabs
- PostCards, FilePreview, Avatar, etc.
- Follow atomic design principles
Goal: Ensure all components and pages are responsive and accessible.
- Add responsive Tailwind classes (sm:, md:, lg:, etc.)
- Fix overflow issues
- Test components on various screen sizes
- Add animations (Framer Motion, transitions)
Goal: Handle forms, file inputs, drag-drop UI, and preview logic.
- HelpRequestForm, SolutionForm
- File drag-drop and multi-format preview
- Progress indicator + error handling
Goal: Connect frontend with backend API endpoints.
- Axios instance setup with token auth
- Fetch & display posts
- Handle API errors and loading states
- Sync actions with backend responses
# Clone the repo
git clone https://github.com/Anish570/Filehub-Client.git
cd filehub-client
# Install dependencies
npm install
# Start the dev server
npm run devVITE_BACKEND_URL=http://localhost:5000/api/src
├── /components
├── /pages
├── /GlobalState
├── /services
├── /utils
└── App.jsx / main.jsx / index.css1. Fork the repo
2. Create a branch: git checkout -b yourbrach
3. Commit your code: git commit -m "write a descriptive commit messages"
4. Push and open a PR1. Keep PRs small and focused
2. Follow consistent naming conventions
3. Use Tailwind utilities before custom CSS
4. Use dummy data until API is ready
5. Respect component boundaries
#react #tailwindcss #fileupload #collab #frontend #mern #open-source
Join our Discord/Telegram/GitHub Discussions (link in repo sidebar) to be assigned to a team. Pick a group (Routing, UI, Upload, etc.) and start collaborating!
We believe in learning by building. This is your opportunity to ship something real, as a team. Let's build FileHub together! 🚀