An open-source React application built for university students to share, search, and download academic resources (notes, slides, exam papers) across campuses. This project serves as the client-side interface for the Go-based backend API.
*> **Image Description:** A wide banner shot of the application homepage showing the logo, navigation bar, and a welcoming hero section.*
- Secure Login & Registration: JWT-based authentication flow.
- Protected Routes: Unauthorized users are automatically redirected to login.
- Profile Management: View and update user details (Name, Major, Year).
- Role Handling: Support for Student and Admin roles.
- Resource Feed: Grid view of academic resources with metadata (views, downloads).
- Advanced Search: Filter resources by title or description.
- File Upload: Drag-and-drop interface for uploading PDFs, PPTs, and DOCs with metadata (Sharing Level, Tags, Course).
- Secure Downloads: Direct S3-signed URL downloads via backend integration.
- Comments System: Discuss resources with a threaded comment section.
- Star Ratings: 5-star rating system with real-time average updates.
- Bookmarks: Save resources to a personal "Saved" list for quick access.
- Framework: React 18
- Build Tool: Vite
- Styling: Tailwind CSS v4.1
- Routing: React Router v6
- HTTP Client: Axios (with Interceptors for JWT handling)
- Icons: Lucide React
The project follows a feature-based architecture for scalability:
src/
├── components/ # Shared UI components (StarRating, Buttons)
├── features/ # Feature-specific logic
│ ├── auth/ # AuthContext, ProtectedRoute, Login forms
│ ├── resources/ # ResourceCard, Feed logic
│ ├── admin/ # Admin specific components
│ └── social/ # Comments, Ratings logic
├── layouts/ # Layout shells (AppLayout with Sidebar)
├── lib/ # Utilities (Axios instance, tailwind-merge)
├── pages/ # Main page views (Dashboard, Upload, Profile)
└── services/ # API integration services (auth, resource, social)
Image Description: The main application view. On the left is the navigation sidebar. In the center is a responsive grid of "Resource Cards," each showing a file icon, title, tags, and download count. A search bar is prominent at the top.
Image Description: A detailed view of a specific file. It shows the full description, a "Download" button, a "Bookmark" toggle, the 5-star rating component, and a comment section below.
Image Description: A clean form with a large drag-and-drop zone for files. Below it are input fields for Title, Description, and dropdowns for Resource Type (Notes, Slides) and Sharing Level (Public, University).
Image Description: This feature is just like the telegram's
saved messagefeature
- Node.js (v18 or higher recommended)
- npm
-
Clone the repository
git clone https://github.com/your-username/campus-share-frontend.git cd campus-share-frontend -
Install Dependencies
npm install
-
Environment Setup Create a
.envfile in the root directory:# URL of your Go Backend API VITE_API_URL=https://campus-share-backend.onrender.com/api/v1
-
Run Development Server
npm run dev
Access the app at
http://localhost:5173
This frontend communicates with the backend using a centralized Axios instance (src/lib/axios.js).
- Request Interceptor: Automatically attaches the
Authorization: Bearer <token>to every request if a user is logged in. - Response Interceptor: Global error handling. If the backend returns
401 Unauthorized, the app automatically clears local storage and redirects the user to/login.
- Fork the repository.
- Create a feature branch (
git checkout -b feature/AmazingFeature). - Commit your changes.
- Push to a branch.
- Open a Pull Request.
Distributed under the MIT License. See LICENSE for more information.